Build font stacks that reduce layout shift BETA
Your Font Stack
The system font whose metrics the override fallback copies. Arial, Times New Roman and Courier New are on almost every device, and their Linux and Android look-alikes are added automatically.
Start typing to search Google Fonts, system fonts, or your uploads.
Live Preview
Metric Overrides
Measured in this browser tab with the generated @font-face rules. Real-world CLS also depends on viewport width, line wrapping, and how many webfonts load.
Generated CSS
What is a Font Stack & Why Does It Matter?
A font stack is a comma-separated list of fonts that a browser tries in order. If the first font isn't available or hasn't loaded yet, the browser uses the next font in the list. A well-built font stack keeps your typography consistent even before the webfont arrives.
But there's a catch: when the webfont finally loads, the browser swaps it in. If the fallback and webfont have different metrics (glyph width, x-height, ascent/descent), the text can visibly jump — that's part of CLS (Cumulative Layout Shift), and it can hurt your Core Web Vitals score.
How to Reduce Font-Related CLS
The modern solution is a @font-face rule with metric overrides. By setting size-adjust, ascent-override, descent-override, and line-gap-override, you tell the browser to render the fallback font at metrics closer to your webfont. When the webfont loads, the shift is reduced.
This tool does the math for you using real font metrics:
- Uses Arial, Times New Roman or Courier New as the fallback base (the same defaults Next.js uses), or any system font you pick
- Calculates
size-adjustfrom the weighted average glyph width of each font, the method Capsize and Next.js use - Computes
ascent-override,descent-overrideandline-gap-overridefrom the font's hhea metrics, adjusted forsize-adjust - Measures the width and height difference in your browser using the same
@font-facerule it generates - Generates the complete
@font-facerule, withlocal()names for Windows, macOS, Linux and Android
Understanding size-adjust
size-adjust is the most important override. It scales the fallback font so its glyphs occupy space similar to the webfont. A value below 100% shrinks the fallback; above 100% enlarges it. The closer the rendered widths, the less horizontal shift you'll see.
Where the font metrics come from
Metrics for 1,900+ Google Fonts are generated from the open-source Capsize metrics package (MIT license). System-font metrics come from the same dataset. Fonts you upload are measured in your browser and never sent to a server.
Best Practices
- Use
font-display: swap(oroptional) on the primary webfont so text is always visible - Preload your primary webfont with
<link rel="preload"> - Set a metric-override fallback for every webfont you ship
- Test in Chrome DevTools → Performance → Layout Shift regions
- Aim for CLS < 0.1 for a "good" Core Web Vitals rating
Frequently Asked Questions
What is a font stack?
A font stack is a comma-separated list of fonts in CSS. Example: font-family: 'Inter', Arial, sans-serif;. The browser tries each font in order and uses the first one that's available.
What is a metric-override fallback?
A fallback font whose metrics have been adjusted via @font-face overrides so it renders at metrics similar to the primary webfont. When the webfont loads, the shift is reduced (not guaranteed to be zero).
What does size-adjust do?
It scales the fallback font to match the primary webfont's glyph widths. A value like 107% enlarges the fallback slightly so when the webfont loads, the horizontal shift is reduced.
How do I test CLS from fonts?
Open Chrome DevTools → Performance → record a page load → look for orange "Layout Shift" regions. Or use the Layout Instability API with a PerformanceObserver. Aim for CLS < 0.1.
Does this work with system fonts?
Yes. If your primary is a system font like Arial, the tool still generates a stack with better fallbacks — useful when moving between operating systems or browsers.
Which fallback font should I use?
Arial for sans-serif fonts, Times New Roman for serif fonts and Courier New for monospace fonts. They are installed on almost every Windows and macOS device, and Linux and Android have metric-compatible clones (Liberation Sans, Arimo, Liberation Serif, Tinos, Liberation Mono, Cousine) that the generated rule lists in src. You can pick a different base in the tool.
How accurate is the measurement?
It renders your preview text in this browser with the webfont, the plain fallback and the fallback with overrides, then compares the widths and block heights. It does not model your page layout, other fonts or the viewport, so treat it as a close estimate rather than a CLS score. Bold and italic weights differ slightly from the regular weight the overrides are based on.
Is this tool free?
Yes — completely free with no signup. Just pick your font and copy the generated CSS.
Affiliate link — we may earn a small commission at no extra cost to you