perf: convert fonts to WOFF2 (10x smaller), fix preload to match, add html,body CSS font rule

app/globals.css

@@ -3,74 +3,74 @@
 /* ─── Madani Arabic Font ─── */
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Thin.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Thin.woff2') format('woff2');
   font-weight: 100;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Extra Light.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Extra Light.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Light.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani-Arabic-Regular.ttf') format('truetype');
+  src: url('/fonts/Madani-Arabic-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Medium.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Semi Bold.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Semi Bold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani-Arabic-Bold.ttf') format('truetype');
+  src: url('/fonts/Madani-Arabic-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Extra Bold.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Extra Bold.woff2') format('woff2');
   font-weight: 800;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 @font-face {
   font-family: 'Madani Arabic';
-  src: url('/fonts/Madani Arabic Black.ttf') format('truetype');
+  src: url('/fonts/Madani Arabic Black.woff2') format('woff2');
   font-weight: 900;
   font-style: normal;
-  font-display: swap;
+  font-display: block;
 }
 
 :root {
@@ -92,6 +92,10 @@
   }
 }
 
+html, body {
+  font-family: 'Madani Arabic', 'Noto Sans Arabic', 'Cairo', Arial, sans-serif;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);

app/layout.js

@@ -29,22 +29,22 @@ export default function Layout({ children }) {
         <link
           rel="preload"
           as="font"
-          href="/fonts/Madani-Arabic-Regular.ttf"
+          href="/fonts/Madani-Arabic-Regular.woff2"
-          type="font/ttf"
+          type="font/woff2"
           crossOrigin="anonymous"
         />
         <link
           rel="preload"
           as="font"
-          href="/fonts/Madani-Arabic-Bold.ttf"
+          href="/fonts/Madani-Arabic-Bold.woff2"
-          type="font/ttf"
+          type="font/woff2"
           crossOrigin="anonymous"
         />
         <link
           rel="preload"
           as="font"
-          href="/fonts/Madani Arabic Medium.ttf"
+          href="/fonts/Madani Arabic Medium.woff2"
-          type="font/ttf"
+          type="font/woff2"
           crossOrigin="anonymous"
         />
       </head>