Fix font loading flash: font-display block + preload

- Changed @font-face from font-display: swap to block (hides text until font loads) - Added preload links for 3 most used font weights (Regular, Bold, Medium) - Eliminates FOUC (Flash of Unstyled Content) where default font shows first
2026-03-30 15:31:35 +00:00
parent 9bf67ffa38
commit 8f2679253b
2 changed files with 32 additions and 10 deletions
--- a/app/layout.js
+++ b/app/layout.js
@ -25,7 +25,29 @@ export const metadata = {
 export default function Layout({ children }) {
  return (
    <html lang="ar" dir="rtl">
-      <head />
+      <head>
+        <link
+          rel="preload"
+          as="font"
+          href="/fonts/Madani-Arabic-Regular.ttf"
+          type="font/ttf"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          as="font"
+          href="/fonts/Madani-Arabic-Bold.ttf"
+          type="font/ttf"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          as="font"
+          href="/fonts/Madani Arabic Medium.ttf"
+          type="font/ttf"
+          crossOrigin="anonymous"
+        />
+      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        style={{ fontFamily: "'Madani Arabic', 'Noto Sans Arabic', 'Cairo', Arial, sans-serif" }}