modified preview.js in order to try to load fonts

.storybook/preview.js

@@ -8,10 +8,22 @@ 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");
+// }
+
+// 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 Promise.all([document.fonts.load("400 1em Font Name")]),
+});
+
+/* 👇 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: {