Font Fallback Generator
Read a web font's metrics and generate a metric-matched fallback @font-face (size-adjust, ascent-override, descent-override) to eliminate layout shift (CLS) — free, in your browser.
100% private — your font never leaves your browser. Safe for licensed or unreleased fonts.
A metric-matched fallback makes the system font occupy almost exactly the same space as your web font, so text doesn’t reflow when the web font loads — cutting Cumulative Layout Shift (CLS). Metrics are read locally; your font is never uploaded.
How to use the Font Fallback Generator
- Drop your web font (.ttf/.otf/.woff).
- Choose a system font to match against.
- Copy the generated fallback @font-face.
- List it right after your web font in CSS.
What you can use it for
- Eliminate layout shift (CLS) from font loading
- Generate size-adjust and override descriptors
- Match a system font to your web font's metrics
- Improve Core Web Vitals scores
More free tools
Working with web fonts?
Convert, inspect and optimise fonts with our free in-browser typography tools — nothing uploaded.
See all free font tools →Frequently asked questions
What does a metric-matched fallback do?
It resizes a system font (via size-adjust and override descriptors) to occupy almost exactly the same space as your web font, so text doesn't jump when the web font loads.
How does this reduce Cumulative Layout Shift (CLS)?
Layout shift happens when the fallback and web font take different amounts of space. Matching their metrics keeps the layout stable, improving your CLS score.
What is size-adjust in CSS?
size-adjust scales a font's glyphs up or down. Combined with ascent-override and descent-override it makes a fallback font match your web font's dimensions.
Which fallback font should I match against?
Match a widely-installed system font in the same style — Arial or Verdana for sans-serif, Times New Roman or Georgia for serif.
Is my font uploaded to read its metrics?
No — metrics are read locally in your browser; your font never leaves your device.