Font Performance Tester

Simulate and measure FOIT/FOUT impacts of different font-display strategies.

Web Font Simulation display: swap
The quick brown fox jumps over the lazy dog.
Ready (System Fallback)
System Reference Instant
The quick brown fox jumps over the lazy dog.
Always Visible

Loading Timeline Simulation

0ms
1500ms
3000ms
Invisible (FOIT)
Fallback Font (FOUT)
Web Font Rendered
Time to First Text Paint
0ms
Web Font Render Time
0ms
UX Score
100/100

Definitions

  • FOIT (Flash of Invisible Text): Browser hides text while waiting for custom font. Blocks users from reading.
  • FOUT (Flash of Unstyled Text): Browser shows system font immediately, then swaps to custom font when loaded. Better for UX/SEO.

Optimization Tips

  • Always use font-display: swap for critical text.
  • <link rel="preload" as="font" ...> to fetch high-priority fonts early.
  • Subset fonts (e.g., specific characters or unicode ranges) to reduce file size.
  • Match fallback font metrics (size-adjust) to reduce cumulative layout shift (CLS).