Performance
font-display: swap
One CSS line — `font-display: swap` — eliminates the invisible-text flash while web fonts load. Free LCP win on every text-heavy page.
What it is
The `font-display` descriptor in `@font-face`, defined in CSS Fonts Module Level 4. Five values — `auto`, `block`, `swap`, `fallback`, `optional` — control how the browser handles the period between font request and font ready. `swap` shows fallback text immediately and replaces it once the web font loads.
Why it matters
Default browser behaviour blocks text rendering for up to 3 seconds while a web font downloads — that's a Flash of Invisible Text (FOIT) and it tanks LCP, especially on slow connections. `swap` flips the trade-off: text is visible from frame one. The fix is one line per @font-face rule.
Who it applies to
Every site loading custom web fonts.
How WQI scores it
Web Quality Index considers this standard satisfied when the supporting factor passes.
| # | Factor | Status |
|---|---|---|
| 36 | Font loading strategy (FOUT/FOIT/swap) | planned |
0 of 1 supporting factors are currently collected. Sites where the remaining 1 haven't been measured will show as partial or unknown on this standard until the data lands.
Related standards
- See also
- CWV , LCP , Resource hints
Other references
- guidance MDN — font-display
- guidance web.dev — Optimize web fonts
Examples
@font-face {
font-family: "Inter";
src: url("/fonts/inter.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}swap is the safe default. Use optional only for nice-to-have decorative fonts.