From 373c63f2e161825aacdf561ddd7a1eb6f4017775 Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Fri, 29 Nov 2024 11:42:54 +0100
Subject: [PATCH] test: wait for fonts to load before rendering story in
 Chromatic (#2851)

---
 apps/storybook/.storybook/preview.tsx     | 3 +++
 apps/storybook/chromatic.config.json      | 6 +++++-
 apps/storybook/story-utils/fontsLoader.ts | 5 +++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 apps/storybook/story-utils/fontsLoader.ts

diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
index b730d57326..1b902a00d4 100644
--- a/apps/storybook/.storybook/preview.tsx
+++ b/apps/storybook/.storybook/preview.tsx
@@ -2,11 +2,13 @@ import './style.css';
 import '../../../packages/css/src/index.css';
 import '@digdir/designsystemet-theme/digdir.css';
 import type { Preview } from '@storybook/react';
+import isChromatic from 'chromatic/isChromatic';
 
 import type { LinkProps } from '@digdir/designsystemet-react';
 import { Link, List, Paragraph, Table } from '@digdir/designsystemet-react';
 
 import { customStylesDecorator } from '../story-utils/customStylesDecorator';
+import { fontsLoader } from '../story-utils/fontsLoader';
 import { allModes, viewportWidths } from '../story-utils/modes';
 import customTheme from './customTheme';
 
@@ -166,6 +168,7 @@ const preview: Preview = {
     },
   },
   decorators: [customStylesDecorator],
+  loaders: isChromatic() && document.fonts ? [fontsLoader] : [],
 };
 
 /* Add this back when https://github.com/storybookjs/storybook/issues/29189 is fixed */
diff --git a/apps/storybook/chromatic.config.json b/apps/storybook/chromatic.config.json
index 0979624c1d..3ae286278f 100644
--- a/apps/storybook/chromatic.config.json
+++ b/apps/storybook/chromatic.config.json
@@ -5,5 +5,9 @@
   "storybookBaseDir": "apps/storybook",
   "storybookBuildDir": "dist",
   "zip": true,
-  "externals": ["packages/css/**/*.css", "packages/theme/**/*.css"]
+  "externals": [
+    "packages/css/**/*.css",
+    "packages/theme/**/*.css",
+    "apps/storybook/{.storybook,story-utils}/**/*"
+  ]
 }
diff --git a/apps/storybook/story-utils/fontsLoader.ts b/apps/storybook/story-utils/fontsLoader.ts
new file mode 100644
index 0000000000..599f3ff63c
--- /dev/null
+++ b/apps/storybook/story-utils/fontsLoader.ts
@@ -0,0 +1,5 @@
+import type { Loader } from '@storybook/react';
+
+export const fontsLoader: Loader = async () => ({
+  fonts: await Promise.all([document.fonts.load('400 1em Inter')]),
+});