Decide between auto, block, swap, fallback, and optional. Get an explanation of each value's behaviour, recommended use cases, and copy-paste @font-face CSS.
Pick your priority — branding, performance, or balance
We recommend the right font-display value with a one-paragraph rationale
Copy the @font-face snippet with the right value applied
0 bytes uploaded. font-display Strategy Picker runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
swap: invisible text → fallback (briefly) → web font. fallback: invisible text (100ms) → fallback (3s) → web font OR keep fallback forever. Use swap for branding-critical fonts; fallback for body text where late web font loading would be jarring.
When the web font is nice-to-have but not critical — e.g., a body text font with a near-identical fallback. The browser uses the web font only if it's cached or arrives within 100 ms; otherwise it sticks with the fallback for the whole session.
auto delegates to the browser's default, which is block on most engines. Block can produce 3+ seconds of invisible text on slow networks. Almost always pick swap or fallback explicitly.
Build a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolGenerate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.
Open toolPaste a Google Fonts URL or name and get a self-hosted @font-face CSS block plus a curl script for downloading every WOFF2. Privacy-friendly, GDPR-safe.
Open tool