Font Display Swap: Complete Guide
Master the font-display CSS property to control how fonts load and render. Learn when to use swap, fallback, optional, and block values.
Key Takeaways
- • swap: Best for most cases—shows fallback immediately, swaps when ready
- • fallback: Short block period (100ms), limited swap window
- • optional: Best for slow connections—may skip custom font entirely
- • block: Hides text briefly—use sparingly for icon fonts
In this article
Understanding FOIT and FOUT
FOIT (Flash of Invisible Text)
Browser hides text while font loads. Users see blank space.
FOUT (Flash of Unstyled Text)
Browser shows fallback font, then swaps to custom. Users see a shift.
font-display Values
font-display: swap
Zero block period, infinite swap period. Shows fallback immediately.
@font-face {
font-family: 'CustomFont';
src: url('/font.woff2') format('woff2');
font-display: swap;
}font-display: fallback
Short block (~100ms), short swap (~3s). Balanced approach.
font-display: fallback;
font-display: optional
Very short block (~100ms), no swap. Browser decides based on connection speed.
font-display: optional;
font-display: block
Long block (~3s). Use only for icon fonts where fallback would show wrong characters.
Warning: Causes FOIT—invisible text hurts LCP.
Comparison Chart
| Value | Block | Swap | Best For |
|---|---|---|---|
| swap | 0ms | Infinite | Most text |
| fallback | ~100ms | ~3s | Brand fonts |
| optional | ~100ms | None | Performance-first |
| block | ~3s | Infinite | Icon fonts |
Preventing Layout Shift
Using swap causes FOUT which can trigger CLS. Use size-adjust to match fallback metrics:
@font-face {
font-family: 'CustomFont-Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 90%;
}Additional Resources
Optimize Your Fonts
Generate optimized @font-face CSS with font-display included.
Generate CSS
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist
Font Display Swap FAQs
Common questions about font-display CSS property