font-display Generator
Compare and generate every font-display strategy. Understand the exact loading behaviour, invisible-text timing, and Core Web Vitals impact for swap, fallback, optional, block, and auto.
Comparison table
| Strategy | Invisible text | Fallback period | Swap window | Best for |
|---|---|---|---|---|
swap | 0ms | Immediate | Unlimited | Body text, headlines |
fallback | 100ms | 100ms | ~3s | Balanced content |
optional | 100ms | 100ms | None (first visit) | Zero CLS |
block | ~3s | 3s | Unlimited | Icon fonts only |
auto | Varies | Varies | Varies | Not recommended |
swap for body text and headings users need to read immediately. Use optional if you cannot accept any layout shift. Never use block for text content — invisible text for 3s is a critical LCP failure.Frequently asked questions
What is the best font-display strategy?
swap is the correct choice for body text. optional gives zero layout shift but users on slow connections may never see the custom font. block should only be used for icon fonts.
Does font-display affect Core Web Vitals?
Yes. swap minimizes LCP delay. block can severely harm LCP because text is invisible during the block period. optional has the smallest CLS impact but may sacrifice custom font display on slow connections.
What is FOIT and FOUT?
FOIT (Flash of Invisible Text) is when text is invisible while the font loads — caused by block. FOUT (Flash of Unstyled Text) is when fallback text shows first then swaps — caused by swap. FOUT is universally preferred over FOIT.
Is font-display: auto ever a good choice?
Rarely. auto delegates to browser heuristics, which differ between Chrome, Safari, and Firefox. Behaviour is unpredictable. Explicitly choosing swap is more reliable.