diff --git a/.storybook/preview.js b/.storybook/preview.js
index b3b508b2..27c7f6a1 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,12 +1,9 @@
 import "../src/nationalarchives/all.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
-// import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import isChromatic from "chromatic/isChromatic";
 
-document.documentElement.classList.add(
-  "tna-template",
-  // "tna-template--system-theme",
-);
+document.documentElement.classList.add("tna-template");
 if (window.self !== window.top) {
   document.documentElement.classList.add("tna-template--padded");
 }
@@ -21,7 +18,6 @@ export const parameters = {
   a11y: {
     config: a11yConfig,
   },
-  // backgrounds: { disable: true },
   backgrounds: {
     values: [],
     grid: {
@@ -33,3 +29,13 @@ export const parameters = {
     expanded: true,
   },
 };
+
+const fontLoader = async () => ({
+  fonts: await Promise.all([
+    document.fonts.load("normal 1em Open Sans"),
+    document.fonts.load("bold 1em Open Sans"),
+    document.fonts.load("normal 1em Roboto Mono"),
+  ]),
+});
+
+export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss
index 1f49f5e7..68c8a218 100644
--- a/src/nationalarchives/variables/_typography.scss
+++ b/src/nationalarchives/variables/_typography.scss
@@ -9,8 +9,8 @@ $body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777
 $interactive-text-decoration-thickness: 3.5px !default;
 
 $font-family-main: "Open Sans", sans-serif !default;
-$font-weight-main: normal !default;
-$font-weight-main-bold: bold !default;
+$font-weight-main: normal !default; // Defined in utilities/_typography.scss
+$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss
 
 $font-family-heading: supria-sans-condensed, "Arial Narrow", sans-serif !default;
 $font-weight-heading: 400 !default;