How to font-display specification reference
- Step 1auto — Browser-defined behaviour. Most browsers default to block-like (3s block, infinite swap). Safari historically infinite block (FOIT forever). Avoid — too unpredictable.
- Step 2block — Short block period (~3s), infinite swap period. Invisible text for 3s, then fallback if not loaded. Swap to web font whenever it arrives. Bad UX on slow networks.
- Step 3swap — Very short block period (~100ms), infinite swap period. Fallback shown almost immediately, swap when web font arrives. Always produces FOUT but never FOIT.
Frequently asked questions
What's fallback's behaviour?+
Short block (~100ms), short swap (~3s). After swap period: failure mode — sticks with fallback for the session. So if the font is slow, you get fallback briefly then web font; if it's very slow, you get fallback the whole session.
What's optional's behaviour?+
Very short block (~100ms), zero swap period. After block: failure mode immediately — uses cached web font if available, fallback otherwise. Most aggressive: any uncached web font is essentially skipped on first visit.
Is the timing exact across browsers?+
No — browsers implement the block and swap periods with their own durations within the spec's allowable ranges. Chrome's block period for swap is ~100ms; Firefox's is similar. Behaviour is consistent enough that the spec's intent is preserved.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.