font-display
Controls how a web font displays while loading. Values: auto, block, swap, fallback, optional.
Quick example
@font-face {
font-family: "CustomFont";
src: url("font.woff2") format("woff2");
font-display: swap;
}Examples
Swap font immediately (no flash of unstyled text)
@font-face {
font-family: "CustomFont";
src: url('font.woff2') format('woff2');
font-display: swap;
/* Show fallback instantly, swap to custom font when ready */
}Use font-display: swap so users see text immediately, then update to custom font.
Hide text until font loads (FOIT)
@font-face {
font-family: "BrandFont";
src: url('brand.woff2') format('woff2');
font-display: block;
/* Text invisible until custom font loads */
}Block text until your brand font loads, avoiding fallback font flicker.
Use fallback if font takes too long
@font-face {
font-family: "OptionalFont";
src: url('optional.woff2') format('woff2');
font-display: fallback;
/* Try for 100ms, then give up and use fallback */
}Set a timeout so slow fonts don't block text rendering indefinitely.
font-display Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
Common pitfalls
font-display controls visibility during loading, not download speed. Use preload, async, and optimized file sizes to actually speed up font loading.
block (FOIT) avoids fallback font flash but delays text. swap (FOUT) shows text immediately but flashes the fallback. Choose based on your UX priority.