/** * Fonts Fallback — Instant system font render before web fonts load * Load this FIRST in before any font CDN links * Strategy: system fonts → jsDelivr fontsource → Google Fonts */ /* ==================================================================== FONT STACKS — Graceful fallback chain ==================================================================== */ :root { /* Arabic: Cairo → Noto Arabic → system Arabic → generic sans */ --font-cairo: 'Cairo', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', 'Arial Unicode MS', sans-serif; /* Latin: Inter → system UI → generic sans */ --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ==================================================================== BASE FONT APPLICATION ==================================================================== */ body { font-family: var(--font-cairo); /* Prevent invisible text during font swap */ font-display: swap; } /* LTR languages use Latin font stack */ [dir="ltr"] body, [dir="ltr"] p, [dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] h5, [dir="ltr"] h6 { font-family: var(--font-inter); } /* Buttons/inputs always inherit */ button, .btn, input, select, textarea { font-family: inherit; } /* ==================================================================== FONT LOADING INDICATOR — briefly show before Cairo loads ==================================================================== */ .fonts-loading body { opacity: 0.95; /* near-invisible flash prevention */ }