Skip to main content

Free font fallback generator

Keep text from jumping when your web font loads

Drop in the font your site serves. FontPivot reads its metrics and character widths, calculates size-adjust, ascent-override, descent-override, and line-gap-override for Arial, Times New Roman, or another system font, and shows the shift with and without them before you copy the CSS.

Fallback generator

Match a fallback to your font.

Read in your browser · nothing is uploaded

Choose your web font

Maximum 25 MB

Select a font to calculate its fallback CSS.

How to generate fallback font CSS

  1. Drop the font file your site serves above, or browse for it. It is read on your device.
  2. Check the name in “Font family name in your CSS”. It should match the font-family of your own @font-face rule.
  3. Keep the recommended fallbacks or tick others. Arial covers Windows, macOS, and iOS; Roboto covers Android.
  4. Open the demo. Overlay, side by side, or swap: the adjusted fallback should take up almost the same space as your font.
  5. Copy the CSS, paste it next to your @font-face rule, and use the font-family stack on your text.

What the CSS looks like

You keep your own @font-face rule for the web font. The generator adds a second rule that points at a font already on the device with local() and gives it your font’s proportions:

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 104.2%;
  ascent-override: 92.4%;
  descent-override: 23.1%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

The numbers above are an illustration; yours come from your font.

How the size-adjust calculator works

The calculation follows the method used by Capsize, fontaine, and Next.js. First it finds how wide your font is on average: the advance width of each letter, digit, space, and common punctuation mark, weighted by how often it appears in English text, so an “e” counts far more than a “q”. Characters the font lacks count at the width of its missing-glyph box, as in Capsize. The same average is known for each system font.

size-adjust       = (your average width ÷ your UPM) ÷ (fallback average width ÷ fallback UPM)
ascent-override   = ascent   ÷ (UPM × size-adjust)
descent-override  = descent  ÷ (UPM × size-adjust)
line-gap-override = line gap ÷ (UPM × size-adjust)

UPM is the font’s units per em. Ascent, descent, and line gap come from the font’s hhea table, which browsers on macOS, Android, and Linux use for line spacing. When the font sets the USE_TYPO_METRICS flag, the OS/2 typo values are used instead, because the OpenType specification tells software to prefer them, and Windows and Android do. Chrome on macOS keeps the hhea values, so for the rare font whose two sets differ, some vertical shift can remain there; the generator warns you when that applies. Windows reads the OS/2 win values when the flag is off. Well-made web fonts keep all three sets consistent, so every platform agrees. The overrides are divided by size-adjust because size-adjust scales them too.

The metrics of the system fonts and the letter weighting come from Capsize (MIT license, © SEEK). For the background, read Reduce layout shift from web fonts. To check a font’s hhea, typo, and win values yourself, open it in the font viewer.

Browser support

First version that supports each descriptor, from MDN’s browser compatibility data (checked November 2026). Browsers skip descriptors they don’t support, so the rest of the rule still applies.

Browser support for the fallback descriptors
DescriptorChromeEdgeFirefoxSafari
size-adjust92929217
ascent-override878789No
descent-override878789No
line-gap-override878789No

Safari lists the three override descriptors in Technology Preview only. Until they ship, Safari users get the width match from size-adjust but not the vertical one. See MDN on size-adjust and ascent-override.

Good to know

Fallback font questions

Is my font uploaded?

No. The file is read by your browser on your device, and the values are calculated there. Nothing is sent to our server, and leaving the page clears it.

Which fallback font should I use?

One the visitor already has, in the same style as your font. For a sans serif, Arial is installed on Windows, macOS, and iOS, and Roboto on Android and ChromeOS, so the generator picks both. For a serif, Times New Roman; for a monospace font, Courier New. Each fallback gets its own @font-face rule, and the browser uses the first one installed on the device.

What does size-adjust do, and why not just change font-size?

size-adjust scales one font face, not the element. Your text keeps the font-size you set, but while the fallback is showing, its letters are drawn larger or smaller so a line holds about as many words as it will in your web font. Changing font-size would also change the web font once it loads.

Why are the override values divided by size-adjust?

size-adjust scales every metric of the face, including the ones set with ascent-override, descent-override, and line-gap-override. Dividing by size-adjust first means that after the scaling, the ascent, descent, and line gap end up exactly at your web font’s values.

Does it work in Safari?

Partly. Safari 17 and later apply size-adjust, so widths and line breaks match. Released versions of Safari ignore the three override descriptors, according to MDN’s compatibility data; they are only in Safari Technology Preview. In Safari, line heights can still differ a little. Unknown descriptors are skipped, so the CSS is safe to ship to every browser.

Do bold and italic need their own values?

Each weight and style has its own widths. The values here are for the file you load, measured against the regular style of each fallback, and one rule is usually enough for body text. Bold and italic text in the fallback is then drawn with the browser’s synthesized bold or slant, so it matches less closely. This page does not generate separate rules for bold or italic fallback faces yet.

My site sets line-height. Do I still need the overrides?

With a fixed line-height such as 1.5, every line has the same height in both fonts, so ascent, descent, and line gap matter less. size-adjust still matters, because it keeps line breaks in the same places. The overrides also keep text vertically centred the same way inside each line.

What about fonts with an optical size axis?

Some variable fonts change their letter widths with the text size through an optical size (opsz) axis, and their default is often a display size. Browsers pick the optical size from the font size, so this page measures such fonts at opsz 16, the usual body text size, or the nearest size the font allows. The values then fit body text; large headings in the same font can still shift a little.

How do the values compare with Capsize, fontaine, and next/font?

The method is the same, and the system font metrics come from Capsize. The average width uses Capsize’s English letter weighting, so for the same font and fallback the values match Capsize’s to a hundredth of a percent. One difference: when a font sets USE_TYPO_METRICS, this page uses its typo values, as the OpenType specification asks, where Capsize always reads hhea.

Will this remove layout shift completely?

No, it makes it much smaller. Letters in two different fonts never have exactly the same widths, so a word can still move to the next line in some paragraphs. Loading the font sooner, for example with preload or font-display: optional, helps too.