TaskAdd an @font-face for Inter from /inter.woff2 (woff2 format) with font-display: swap. Set body to use 'Inter', system-ui, sans-serif.
Font loading: font-display swap
100 XP7 min
Theory
Two evil acronyms: FOUT and FOIT
- FOUT (Flash Of Unstyled Text) β text renders in the fallback font, then flips to your custom font. Looks awkward but content is readable.
- FOIT (Flash Of Invisible Text) β text is INVISIBLE until your font downloads, sometimes seconds. Browser's default behavior.
You want FOUT, not FOIT. The fix is one CSS property:
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-display: swap; /* fallback shown immediately; custom swapped in when ready */
font-weight: 100 900; /* variable font weight range */
}
body {
font-family: "Inter", system-ui, -apple-system, sans-serif;
}font-display values
| Value | First paint | After font loads |
swap | fallback visible | swap in custom (FOUT) |
block | invisible (3s timeout) | swap in (FOIT) |
fallback | fallback (100ms timeout) | swap if loaded in 3s, else stay |
optional | fallback (100ms timeout) | use custom ONLY if instant (cached) |
For body text: swap is the standard. For "branding" wordmark logos where you can't tolerate a fallback: maybe block (but consider an SVG instead).
Pair with preload
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin />
Cuts the FOUT duration from ~300ms to ~50ms by starting the font download before CSS is even parsed.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.