Fallback font generator
Match a fallback font to your web font with size-adjust, ascent-override and descent-override, so text does not jump when the web font loads.
Measuring…
How do fallback metric overrides work?
When a web font loads late, the browser first draws the text in a fallback font, then swaps. If the two fonts have different widths and heights, lines rewrap and the page jumps. That movement counts against Cumulative Layout Shift.
size-adjust scales the fallback so its average character width matches your web font. ascent-override and descent-override then make each line as tall as it will be with the web font. You declare these on a second @font-face rule that points to a local font such as Arial, and list that family right after your web font.
This tool measures both fonts in your browser: the width of English text weighted by letter frequency, and the ascent and descent the browser reports. The overlay shows how closely the adjusted fallback follows the real font. Background in how to prevent layout shift from web fonts.
Which fallback font should I choose?+
Pick one that is installed almost everywhere and has the same general style: Arial for sans serifs, Times New Roman or Georgia for serifs, Courier New for monospaced fonts.
Do all browsers support size-adjust?+
size-adjust works in all current browsers. ascent-override and descent-override are not supported in Safari yet, so treat them as a progressive improvement.
Does Next.js do this for me?+
Yes. next/font generates an adjusted fallback automatically. This tool is for sites that load fonts with plain CSS.
Find out when visitors see your fallback.
Font Inspector shows the font that is actually rendered and flags it when a fallback is showing, on your own site or anyone else’s.