Fallback Font Adjust

In web design, it’s common practice to use custom fonts to enhance a site’s visual appeal. However, when these fonts aren’t available — for example, during loading or due to network issues — the browser falls back to a fallback font, defined in the font-family.

Here’s an example:

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

If 'CustomFont' fails to load, the browser will try Arial, then sans-serif.

The problem? Each font has different metrics and proportions. When the fallback font is used, the layout often “jumps”: headings resize, spacing changes, and content shifts. This phenomenon is known as Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT).

The new CSS @font-face properties — ascent-override, descent-override, line-gap-override, and size-adjust (often collectively referred to as fallback font adjust) — aim to fix this issue by allowing you to fine-tune the appearance of the fallback font..

Here’s how:

@font-face {
  font-family: 'CustomFont';
  src: url('CustomFont.woff2') format('woff2');
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
  size-adjust: 110%;
}

These properties allow you to:

• ascent-override / descent-override: Align the fallback font’s vertical metrics to match the primary font.
• line-gap-override: Control spacing between lines.
• size-adjust: Scale the fallback font so it visually aligns with the original.

Benefits of using fallback font adjust

One of the biggest advantages of using fallback font adjust is the improved visual consistency it brings. Even when the custom font isn’t available right away, the fallback font can look much closer to your intended design — keeping the overall look and feel intact.

It also helps reduce layout shifts. When the primary font eventually loads, there’s no sudden jump in size or spacing, which means the page stays stable and smooth for the user.

And let’s not forget performance: fallback font adjust allows you to load fonts more efficiently without compromising the visual quality of your typography. It’s a simple way to make your site feel faster and more polished.

Tools and Resources

Several tools and libraries help developers calculate proper fallback adjustments like font-style-matcher and Chrome DevTools font metrics inspection.

I also created a small open-source project that simplifies the calculation of font metrics and generates the necessary CSS to optimize fallback font adjustment. You can check it out here or clone the github repository.