Try document.fonts API to ensure fonts loaded

Sage-Bionetworks · May 23, 2023 · 360588f · 360588f
1 parent f6b66b2
commit 360588f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/synapse-react-client/.storybook/preview-head.html b/packages/synapse-react-client/.storybook/preview-head.html
@@ -1,9 +1,7 @@
 <script>
   window.global = window
 </script>
-<!-- Preload the Lato font because delayed font loads can cause screenshot instability in Chromatic -->
-<link rel="preload" href="https://fonts.googleapis.com/css?family=Lato" as="style">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+
 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

diff --git a/packages/synapse-react-client/.storybook/preview.jsx b/packages/synapse-react-client/.storybook/preview.jsx
@@ -6,6 +6,7 @@ import { StorybookComponentWrapper } from '../src/components/StorybookComponentW
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import { getHandlers } from '../mocks/msw/handlers'
 import { MOCK_REPO_ORIGIN } from '../src/utils/functions/getEndpoint'
+import isChromatic from 'chromatic/isChromatic'
 
 globalThis.Buffer = Buffer
 globalThis.process = {
@@ -113,8 +114,16 @@ initialize({
   },
 })
 
+const fontLoader = async () => ({
+  fonts: await Promise.all([document.fonts.load('700 1em Lato')]),
+})
+
 export const loaders = [mswLoader]
 
+if (isChromatic && document.fonts) {
+  loaders.push(fontLoader)
+}
+
 export const decorators = [
   (Story, context) => {
     return (