FOIT / FOUT Simulator
See exactly what your users see while a webfont is loading — and pick the right font-display strategy.
Runs entirely in your browser — no upload, no registration.
Typography sets the tone of everything you build. When webfonts arrive late, your users see either nothing (FOIT) or your fallback (FOUT) — pick the failure that hurts your product least.
What this tool does
Simulates the three CSS font-display behaviours (block=FOIT, swap=FOUT, fallback) with an adjustable loading delay.
Why you might need it
Choosing the wrong font-display value costs you either LCP (block) or CLS (swap). This is the fastest way to feel the trade-off.
How to use it
- Pick a font.
- Choose a strategy.
- Set a delay to simulate a slow network.
- Click 'Reload' to replay.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.