diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 000000000..11ffd300e
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,87 @@
+<link
+rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-Bold.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-BoldItalic.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-Medium.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-MediumItalic.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-Regular.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-SemiBold.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
+
+<link
+  rel="preload"
+  href="../packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf"
+  as="font"
+  type="font/otf"
+  crossorigin="anonymous"
+/>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index fb12dbc61..b1935881b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -13,19 +13,6 @@ import { Themes } from "./styles/themes";
 //     import("@css/font/index.css");
 // }
 
-// Use the document.fonts API to check if fonts have loaded
-// https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts API to
-const fontLoader = async () => ({
-    fonts: await document.fonts.ready,
-});
-
-/* 👇 It's configured as a global loader
-* See https://storybook.js.org/docs/react/writing-stories/loaders
-* to learn more about loaders
-*/
-export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
-
-
 export const parameters = {
     options: {
         storySort: {