fix(style): frequent font flickering

aiktb · Oct 31, 2024 · 7a4e6b0 · 7a4e6b0
1 parent 1361f09
commit 7a4e6b0
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,7 +1,13 @@
 import "@fontsource/afacad-flux/400.css";
+import "@fontsource/afacad-flux/500.css";
 import "@fontsource/afacad-flux/700.css";
 import "@fontsource/fira-code/400.css";
 import "@fontsource/fira-code/700.css";
+import afacadFlux400Woff2 from "@fontsource/afacad-flux/files/afacad-flux-latin-400-normal.woff2?url";
+import afacadFlux500Woff2 from "@fontsource/afacad-flux/files/afacad-flux-latin-500-normal.woff2?url";
+import afacadFlux700Woff2 from "@fontsource/afacad-flux/files/afacad-flux-latin-700-normal.woff2?url";
+import firaCode400Woff2 from "@fontsource/fira-code/files/fira-code-latin-400-normal.woff2?url";
+import firaCode700Woff2 from "@fontsource/fira-code/files/fira-code-latin-700-normal.woff2?url";
 
 import "~/assets/tailwind.css";
 
@@ -17,6 +23,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="color-scheme" content="light dark" />
         <meta name="author" content="aiktb <ai.ourship@gmail.com>" />
+        <link rel="preload" as="font" type="font/woff2" href={afacadFlux400Woff2} />
+        <link rel="preload" as="font" type="font/woff2" href={afacadFlux500Woff2} />
+        <link rel="preload" as="font" type="font/woff2" href={afacadFlux700Woff2} />
+        <link rel="preload" as="font" type="font/woff2" href={firaCode400Woff2} />
+        <link rel="preload" as="font" type="font/woff2" href={firaCode700Woff2} />
         <Meta />
         <Links />
       </head>