What the Web Font Loading Optimizer does
This optimizer reads your @font-face rules - pasted, or taken from a public page and its stylesheets - and checks how each font will load: whether it sets font-display, offers WOFF2, is split into unicode-range subsets and is preloaded when it renders above-the-fold text. It then writes copyable CSS: your faces with a sensible font-display, preload tags with the required crossorigin, and metric-matched fallback faces using size-adjust and the ascent, descent and line-gap overrides, so the swap from fallback to web font moves less text.
Fallback metrics come from a dated table of 25 common web and system fonts (the Capsize metrics, MIT licence). Pasted CSS is analysed in your tab; a URL is read by the a2z.tools server.
How to use it
- Paste the CSS that declares your fonts. For Google Fonts, open the
fonts.googleapis.com/css2?...URL in a browser and paste what it returns. Or enter your page's URL. - Choose the
font-displaystrategy for text:swapshows text at once and swaps later,optionalnever swaps late (no layout shift, but the web font may be skipped on a slow first visit). - Name the faces used above the fold, such as
Inter 400, so they get preload tags. Leave it blank to use the first regular face. - Press Optimise and work through the findings.
- Copy the optimised CSS and preload tags, then update your font stacks to include the generated fallback family, for example
font-family: "Inter", "Inter Fallback", sans-serif.
Reading the results
A face without font-display uses auto, which most browsers treat like block: text is invisible for up to three seconds while the font downloads. That delays the first contentful paint and can delay LCP when the LCP element is text.
swap fixes invisible text but creates a second layout when the web font arrives. The generated fallback face scales Arial, Times New Roman or Courier New so its average character width and line box match the web font, which reduces the resulting layout shift.
WOFF2 is supported by every current browser and is the smallest format; TTF, OTF, EOT and SVG sources only add weight or complexity. unicode-range subsets let the browser skip files the page's text does not need.
Preloads are suggestions for the fonts you name. Each preload competes with the HTML, CSS and the LCP image, so more than two is flagged.
Worked example: self-hosted Inter and a Lora italic
The example declares Inter 400 (WOFF2 and WOFF, no font-display), Inter 700 (swap) and Lora italic (a TTF with font-display: block). The regular Inter face gets a warning for the missing font-display and a preload suggestion because it is the first regular face; Lora gets warnings for block and for having no WOFF2 source, plus a note that its src has no format() hint.
For Inter the fallback is Arial. Inter's average character width is 978 of 2,048 units and Arial's is 913 of 2,048, so size-adjust is 978 / 913 = 107.12%. Inter's ascent of 1,984 units becomes an ascent-override of 1,984 x 913 / (2,048 x 978) = 90.44%, and its descent of 494 units becomes 22.52%.
Lora falls back to Times New Roman at size-adjust: 115.2%, ascent-override: 87.33% and descent-override: 23.78%. The optimised CSS sets both Inter faces and the Lora face to swap, and adds one preload tag for inter-regular.woff2.
Formulas and scoring rules
- size-adjust
size_adjust = (web_xWidthAvg / web_unitsPerEm) / (fallback_xWidthAvg / fallback_unitsPerEm)Output as a percentage rounded to 2 decimals.- ascent-override
ascent_override = web_ascent / (web_unitsPerEm x size_adjust)- descent-override
descent_override = |web_descent| / (web_unitsPerEm x size_adjust)- line-gap-override
line_gap_override = web_lineGap / (web_unitsPerEm x size_adjust)
Choosing between swap and optional
Use swap when the brand font matters on every visit and you have matched the fallback's metrics, so the swap barely moves anything. Use optional when layout stability and speed matter more: the browser waits a very short time, and if the font is not ready it keeps the fallback for that page view and uses the cached font next time.
block is right only for icon fonts, where fallback characters would show nonsense. fallback is a middle ground with a short invisible period and a limited swap window.
Limitations: what the result does not prove
- Fallback metrics exist for the 25 fonts in the table, measured on the regular style. Italic and bold faces use the same overrides, which is usually close but not exact; for other families, generate metrics from the font file.
- It reads CSS, not rendering: it cannot tell which faces a page actually uses above the fold unless you say so.
- The URL mode reads the page and up to four stylesheets from the a2z.tools server. Fonts loaded by JavaScript (for example a font loader script) are not seen.
- Metric overrides reduce layout shift from font swaps; they do not remove it completely, because individual glyph widths still differ.
Privacy: where your data goes
The analysis runs in your browser. If you choose to load a public URL instead of pasting, a2z.tools fetches that address read-only and returns the text to your tab; private and internal addresses are refused and nothing is stored. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- CSS Fonts Level 4 - font-display - checked 19 Sep 2026
- W3C Resource Hints / HTML preload - checked 19 Sep 2026
- CSS Fonts Module Level 5 - size-adjust and metric overrides
- Chrome for Developers - Improved font fallbacks
- Capsize font metrics (MIT)
Frequently asked questions
Should I use font-display swap or optional?
Use swap when showing the web font on every visit matters and you can match the fallback's metrics to limit the swap's layout shift. Use optional when stability and speed matter most; returning visitors still get the web font from the cache.
Why does a font preload need the crossorigin attribute?
Fonts are always fetched in CORS mode. A preload without crossorigin is made in a different mode, so the browser cannot reuse it and downloads the font a second time. Add crossorigin even when the font is on your own domain.
What does size-adjust do in a fallback @font-face?
It scales the local fallback font so its characters take up roughly the same width as the web font. Combined with ascent-override and descent-override, the fallback text occupies nearly the same space, so little moves when the web font arrives.
Do I still need WOFF or TTF sources?
Not for current browsers: WOFF2 is supported everywhere that matters today. Keeping only WOFF2 simplifies your CSS and avoids accidentally serving a larger format when the order of src entries is wrong.
How many web fonts should a page load?
As few as the design allows. Each weight and style is a separate file; two to four files is common for text. Variable fonts can replace several weights with one file, and subsets keep each file small.
Why is text invisible while my font loads?
Without font-display, or with block, browsers hide text for up to three seconds waiting for the font. Setting font-display to swap, fallback or optional shows text in a fallback font straight away.
Last reviewed by the A2Z.Tools team against the sources listed above.
