Web Font Loading Strategies
Web fonts block rendering. If handled poorly, they cause Invisible Text (FOIT) or Layout Shifts (FOUT). Bootcamps rarely cover the font-display property.
The Options
- block: Hides text for up to 3 seconds until the font loads (FOIT). Good for icon fonts, terrible for reading.
- swap: Shows fallback text immediately, then swaps. Best for body text, but causes layout shifts (FOUT).
- optional: Browser gives the font a tiny window (100ms) to load. If it misses it, it uses fallback and caches the custom font for the next page load. Best for performance.
Preloading
If a font is critical, use <link rel="preload" as="font" crossorigin> high in the head to instruct the browser to fetch it immediately.
Interactive Tool: CSS Font Stack Generator
CSS Font-Family Rule
font-family: "Space Grotesk", sans-serif;