Fallback font matcher
Upload your web font and pick a system fallback. The tool measures both in your browser and writes the CSS that makes the fallback take up the same space.
Before and after
Same text, same width. The shaded lines show each line box. The closer the heights match, the less the page jumps.
@font-face generator
Detects weight and style and writes the CSS.
Open tool →Fluid type scale
clamp() font sizes that scale smoothly.
Open tool →Font stack builder
Modern system font stacks, ready to copy.
Open tool →The WordPress plugin
Looking for the original Web Fonts Loader plugin? Find out where it lives now.
Plugin page →Quick answer: To reduce layout shift from web fonts, create a fallback @font-face using a local system font with size-adjust, ascent-override, descent-override and line-gap-override set so it takes up the same space as your web font. Upload your font above and this tool measures it and writes the CSS.
Why fonts cause layout shift
When a web font loads late, the browser first shows a fallback font and then swaps. If the two fonts have different widths and line heights, the text reflows and everything below it jumps. That counts against Cumulative Layout Shift (CLS).
How the fix works
You declare a second @font-face whose source is a local system font, then adjust it with size-adjust (glyph width) and the three metric overrides (vertical space). Put it after your web font in the font-family stack.
font-family: "My Font", "My Font Fallback", sans-serif;
Frequently asked questions
What is size-adjust?
size-adjust scales a font's glyphs and metrics by a percentage. Applied to a fallback face, it makes the system font's text width match the web font.
What do the override descriptors do?
ascent-override, descent-override and line-gap-override set the font's vertical metrics so the line box has the same height as the web font's.
Do all browsers support these descriptors?
size-adjust is supported in all current major browsers. Support for the vertical override descriptors has varied by browser, so check current browser support. Unsupported descriptors are ignored, so the CSS is safe to ship.
Does this replace font-display?
No. Use both: font-display: swap controls when the swap happens, and the tuned fallback makes the swap almost invisible.
Why is the result measured in the browser?
Measuring real rendering handles WOFF2 and every font format, with no server. Values can differ slightly between operating systems if their system fonts differ.