How to font-display: swap vs fallback vs optional decision guide
- Step 1Pick by priority — Branding-critical (logo, hero typography): swap. Performance-critical (body text on text-heavy pages): optional. Balanced (most websites): swap.
- Step 2Apply via @font-face — @font-face { src: ...; font-display: swap; ... }. One descriptor per @font-face block. Different fonts can have different font-display values within the same site.
- Step 3Validate behaviour — Throttle to Slow 3G in DevTools and reload. swap shows fallback then web font. fallback briefly shows nothing then fallback. optional may stick with fallback for the session.
Frequently asked questions
What does swap actually do?+
Browser uses fallback font immediately (after a brief invisible period of ~100ms). Swaps to web font when loaded. May cause FOUT (Flash of Unstyled Text) when the swap happens. Best for branding fonts where 'wrong but visible' beats 'right but invisible'.
When does optional stick with fallback?+
If the web font isn't cached and doesn't arrive within ~100ms. The browser sticks with fallback for the rest of the session. Best for body text where late FOUT would be jarring.
Why is auto bad?+
auto delegates to the browser's default, which is block on most engines. Block can produce 3+ seconds of invisible text on slow networks. Almost always pick swap or fallback explicitly.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.