diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 00000000..0976145a
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,13 @@
+<!--
+  The brand faces the theme names in --font-sans / --font-mono. The package
+  ships no font files (a consumer loads them), so the workbench loads them here
+  or every story falls back to Arial and stops matching the design. Red Hat
+  Display comes as the variable font so the arbitrary weights some components
+  use (font-[550], font-[650]) render as written rather than snapping.
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+/>