FOIT and font-display: swap: Faster Text with a Fallback Flash

Subtitle: Read now; swap later without losing layout.

• Panel 1 - Why text disappears:
• Browser waits for the web font
• Text stays hidden during the block
• Slow font delays visible content
• That delay is FOIT

• Panel 2 - What swap changes:
• Paint a fallback at once
• Replace it when the font arrives
• Win: readable first paint
• Cost: FOUT during replacement
• Bad metric match can raise CLS

• Panel 3 - Control the trade-off:
• Pick metric-compatible fallbacks
• Tune with size-adjust
• Align ascent and descent
• Set line-gap-override where supported
• Preload only a critical font
• Timing remains browser-controlled

• Panel 4 - Falsify the promise:
• Throttle the font request
• Compare default with swap
• Record FCP and CLS
• Block the font completely
• Page must remain readable
• swap is policy, not a time guarantee