No Login Data Private Local Save

Font Loading Strategy Tester - Online FOIT vs FOUT

8
0
0
0

Font Loading Strategy Tester

Compare FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) in real time. Load custom fonts, simulate network delays, and see exactly how users experience your typography before and after font loading.

Test Configuration
Direct link to a .woff2 file. Cross-Origin access required.
1500ms
Adds artificial delay to highlight FOIT/FOUT behavior.
FOIT (block) Waiting
The quick brown fox...
—
FOUT (swap) Waiting
The quick brown fox...
—

Frequently Asked Questions

FOIT (Flash of Invisible Text) occurs when text remains hidden until a custom font loads. Users see a blank space for several seconds. FOUT (Flash of Unstyled Text) means the browser first shows a fallback font (like Arial) and then swaps to the custom font once it's ready. FOIT can harm perceived performance; FOUT can cause layout shifts.

The font-display property controls how a font is displayed during loading. Values include auto, block (FOIT), swap (FOUT), fallback, and optional. For example, font-display: swap immediately shows the fallback and swaps later, improving perceived performance.

For most websites, font-display: swap is recommended because it avoids invisible text and reduces LCP (Largest Contentful Paint) delay. Google recommends ensuring text remains visible during webfont load. Use optional only if the custom font is not critical.

The font URL must support CORS (Cross-Origin Resource Sharing) and be a valid .woff2 file. If you see a network error, try hosting the font on the same domain or using a CDN that allows CORS (like jsDelivr or Google Fonts gstatic). Our preset fonts are CORS-enabled.

We load your specified font file in the background and control the visibility timing. FOIT preview hides the text until the font is loaded (plus extra delay you set). FOUT preview shows fallback text immediately and swaps to the custom font after loading. This visual simulation reflects real-world browser behavior when using font-display: block vs swap.

Preload critical font files with <link rel="preload">. Use font-display: swap or optional. Match fallback font metrics to the custom font using size-adjust, ascent-override, and descent-override in @font-face to reduce layout shift (CLS).
🔧 Related Tools