Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix font loading flash: font-display block + preload
Some checks failed
Build frontend / build (push) Has been cancelled
Details

Browse Source 
- 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
This commit is contained in:
Claw AI
2026-03-30 15:31:35 +00:00
parent 9bf67ffa38
commit 8f2679253b
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/globals.css
View File

@ -6,7 +6,7 @@
src: url('/fonts/Madani Arabic Thin.ttf') format('truetype'); src: url('/fonts/Madani Arabic Thin.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -14,7 +14,7 @@
src: url('/fonts/Madani Arabic Extra Light.ttf') format('truetype'); src: url('/fonts/Madani Arabic Extra Light.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -22,7 +22,7 @@
src: url('/fonts/Madani Arabic Light.ttf') format('truetype'); src: url('/fonts/Madani Arabic Light.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -30,7 +30,7 @@
src: url('/fonts/Madani-Arabic-Regular.ttf') format('truetype'); src: url('/fonts/Madani-Arabic-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -38,7 +38,7 @@
src: url('/fonts/Madani Arabic Medium.ttf') format('truetype'); src: url('/fonts/Madani Arabic Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -46,7 +46,7 @@
src: url('/fonts/Madani Arabic Semi Bold.ttf') format('truetype'); src: url('/fonts/Madani Arabic Semi Bold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -54,7 +54,7 @@
src: url('/fonts/Madani-Arabic-Bold.ttf') format('truetype'); src: url('/fonts/Madani-Arabic-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -62,7 +62,7 @@
src: url('/fonts/Madani Arabic Extra Bold.ttf') format('truetype'); src: url('/fonts/Madani Arabic Extra Bold.ttf') format('truetype');
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
@font-face { @font-face {
@ -70,7 +70,7 @@
src: url('/fonts/Madani Arabic Black.ttf') format('truetype'); src: url('/fonts/Madani Arabic Black.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: block;
} }
:root { :root {

24
app/layout.js
View File

@ -25,7 +25,29 @@ export const metadata = {
export default function Layout({ children }) { export default function Layout({ children }) {
return ( return (
<html lang="ar" dir="rtl"> <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 <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
style={{ fontFamily: "'Madani Arabic', 'Noto Sans Arabic', 'Cairo', Arial, sans-serif" }} style={{ fontFamily: "'Madani Arabic', 'Noto Sans Arabic', 'Cairo', Arial, sans-serif" }}