perf: convert fonts to WOFF2 (10x smaller), fix preload to match, add html,body CSS font rule
All checks were successful
Build frontend / build (push) Successful in 42s

This commit is contained in:
Claw AI
2026-03-30 15:34:36 +00:00
parent dee74d335f
commit e6d754d014
12 changed files with 28 additions and 24 deletions

View File

@ -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);

View File

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