diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
deleted file mode 100644
index 11ffd300e..000000000
--- a/.storybook/preview-head.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<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 b1935881b..33eb7b7d1 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -8,10 +8,12 @@ import { withBackgroundMatchingColorScheme, withCenteredCanvas, withDocsContaine
 import { Code, Highlight } from "@stories/mdx";
 import { Themes } from "./styles/themes";
 
-// if (isChromatic) {
-//     // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts.
-//     import("@css/font/index.css");
-// }
+if (!isChromatic) {
+    // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts.
+    import("@css/font/index.css");
+} else {
+    import("./styles/chromatic.css");
+}
 
 export const parameters = {
     options: {
diff --git a/.storybook/styles/chromatic.css b/.storybook/styles/chromatic.css
new file mode 100644
index 000000000..df0e2f353
--- /dev/null
+++ b/.storybook/styles/chromatic.css
@@ -0,0 +1,5 @@
+*,
+*::before,
+*::after {
+    font-family: Arial;
+}