Fallback Font Matcher

What it's for

Stop a page’s text from jumping when its web font arrives. Until a web font loads, the browser shows the text in a fallback font, such as Arial, which is usually wider or narrower, so lines rewrap and the page shifts when the web font takes over. CSS can scale and adjust the fallback to take the same space; this works out the numbers.

For example, when a page scores badly for layout shift (Cumulative Layout Shift, CLS) because its headings rewrap as the font loads, make a matched fallback here and add it to the font stack.

How to use it

Choose the web font file, or drop it on the page, and choose the Fallback font to adjust (remembered in this browser). It must be on this device, as it’s measured here.

The tool measures a sentence in both fonts, and writes an @font-face rule for the fallback with:

• size-adjust, which scales the fallback to the web font’s width.
• ascent-override, descent-override and line-gap-override, the web font’s own line heights, so lines are spaced the same.

Copy the CSS into your stylesheet and put the new fallback after the web font in font-family, as the comment at the end shows. Compare shows the web font, the adjusted fallback and the plain fallback: the first two should wrap at the same places.

Example

Save this site’s own font from this address, open it, and keep Arial as the fallback:

https://toolbox.thoughtasylum.com/assets/fonts/montserrat.woff2

On a Mac, the message says Arial needs scaling to 114.24%, and the CSS has size-adjust: 114.24%, ascent-override: 84.73%, descent-override: 21.97% and line-gap-override: 0%.

Good to know

The match is by average width over a sample sentence, so individual words can still differ a little. Fonts vary between systems (Arial on Windows and on a Mac aren’t identical), so measure on the system most of your visitors use, and give each a fallback of its own (Arial for Windows and Mac, Roboto for Android) if it matters. size-adjust and the overrides work in current Chrome, Edge, Firefox and Safari; older browsers ignore them.