Your files stay on your device

Web font loading optimizer

Paste your @font-face CSS and get per-face findings on font-display, WOFF2, unicode-range, and preloads, plus optimized CSS with size-adjust fallback faces and preload tags.

Paste your @font-face CSS to see how each face loads.

Each face reports what the CSS text alone can prove: a missing or blocking font-display, a source list without WOFF2 or without format hints, a missing unicode-range, and whether the face can be preloaded at all. Preload tags carry crossorigin because fonts always need it, and at most 2 are emitted because every font preload competes with the largest contentful paint. The fallback faces use the Capsize metrics table for common fonts on their regular style; a family outside the table says so instead of inventing numbers. Overrides shrink the swap gap but do not remove layout shift entirely, and this tool is paste-only: fetching a stylesheet from a URL needs a server, because CORS blocks cross-origin reads in a browser tab.
Options

More web & auth tools

- CSP evaluator & builder (/web/csp)
- Subresource integrity (/web/sri)
- HTTP header parser (/web/headers)
All web & auth tools (/web)

Was this tool useful?
YesNo

Canonical HTML: https://nutter.tools/web/web-font-loading-optimizer
Markdown version: https://nutter.tools/web/web-font-loading-optimizer.md
Plain-text version: https://nutter.tools/web/web-font-loading-optimizer.txt
Agent index: https://nutter.tools/llms.txt