font-display Strategy

Pick between swap, block, fallback and optional — with plain-English tradeoffs and the exact CSS you should paste.

Runs entirely in your browser — no upload, no registration.

font-display: swap

Text is visible instantly with the fallback and swaps in when the webfont arrives. Best for readability; expect some layout shift.

Recommended when: Marketing sites, blogs, dashboards

font-display: block

Hides text up to ~3 s, then falls back. Avoids FOUT but risks invisible text on slow connections.

Recommended when: Very short critical text (logos, one-off titles)

font-display: fallback

Very short blocking window, then falls back permanently if the font is slow. Minimizes reflow.

Recommended when: Long articles where the fallback is close enough

font-display: optional

Browser may skip the webfont entirely on the first load. Font is used if it's already cached.

Recommended when: Second-visit-first sites where the font must be free

font-display: auto

Uses the browser default (usually 'block'), which causes invisible-text bugs.

Recommended when: Never — always pick one explicitly

CSS

@font-face {
  font-family: 'Your Font';
  src: url('/fonts/your-font.woff2') format('woff2');
  font-display: swap;
}

What this tool does

Guides you to the right font-display strategy for the page you're building, then emits the CSS.

Why you might need it

font-display is the single biggest lever on Core Web Vitals for webfont pages. Auto is almost always wrong.

How to use it

Pick your strategy.
Read the tradeoff.
Copy the @font-face rule.

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.

What this tool does

Why you might need it

How to use it

Related tools