From 8f2679253b95c63df57bc05735abf4bd3cb1ef87 Mon Sep 17 00:00:00 2001
From: Claw AI
Date: Mon, 30 Mar 2026 15:31:35 +0000
Subject: [PATCH] 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
---
app/globals.css | 18 +++++++++---------
app/layout.js | 24 +++++++++++++++++++++++-
2 files changed, 32 insertions(+), 10 deletions(-)
diff --git a/app/globals.css b/app/globals.css
index 0a7aa79..35aaf1a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,7 +6,7 @@
src: url('/fonts/Madani Arabic Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -14,7 +14,7 @@
src: url('/fonts/Madani Arabic Extra Light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -22,7 +22,7 @@
src: url('/fonts/Madani Arabic Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -30,7 +30,7 @@
src: url('/fonts/Madani-Arabic-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -38,7 +38,7 @@
src: url('/fonts/Madani Arabic Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -46,7 +46,7 @@
src: url('/fonts/Madani Arabic Semi Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -54,7 +54,7 @@
src: url('/fonts/Madani-Arabic-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -62,7 +62,7 @@
src: url('/fonts/Madani Arabic Extra Bold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
@font-face {
@@ -70,7 +70,7 @@
src: url('/fonts/Madani Arabic Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
- font-display: swap;
+ font-display: block;
}
:root {
diff --git a/app/layout.js b/app/layout.js
index fc59121..539a5ac 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -25,7 +25,29 @@ export const metadata = {
export default function Layout({ children }) {
return (
-
+
+
+
+
+