Fix Vertical Layout Shifts with CSS ascent-override

Web font loading frequently introduces Cumulative Layout Shift (CLS) when fallback fonts swap with custom web fonts, causing page content to visibly jump. The CSS ascent-override descriptor eliminates these vertical layout shifts by enabling developers to adjust the height of a fallback font's baseline-to-top dimension to match the custom web font. By pairing a customized local fallback @font-face with ascent-override, the rendered height and line box of the fallback text will perfectly align with the web font before it finishes downloading, producing a seamless, zero-shift swap.

The Cause of Vertical Font Shifts

When a browser loads a web page, it typically renders text immediately using a system fallback font (such as Arial or Times New Roman) to prevent blank spaces—a behavior defined by font-display: swap. However, even when both the fallback font and the incoming web font share the exact same font-size and line-height, their internal typographic metrics differ.

Every font contains built-in metrics defined by its designer:

• Ascent: The distance from the baseline to the top of the highest glyphs.
• Descent: The distance from the baseline to the bottom of the lowest glyphs.
• Line Gap: The recommended extra space between consecutive lines.

Because the browser uses these intrinsic metrics to calculate the inline box height, swapping from a fallback with a high ascent to a web font with a lower ascent instantly changes the vertical space the text occupies. Across long paragraphs, this causes lines to reflow and pushes surrounding content down or pulls it up, triggering high CLS scores.

How ascent-override Works

The ascent-override descriptor is used inside a @font-face rule. It takes a percentage value—or normal—and directly overrides the font's internal ascent metric relative to the font's unit size (em).

@font-face {
  font-family: 'CustomFont-Fallback';
  src: local('Arial');
  ascent-override: 90%;
}

By defining a dedicated fallback @font-face using a local system font, developers can modify that fallback's ascent space. Setting ascent-override scales the top half of the text box for the fallback font so that the distance from the baseline to the top of the characters matches the incoming web font precisely.

Implementing ascent-override to Eliminate Shifts

To prevent shifting, create a custom fallback font definition that matches the dimensions of your primary web font:

/* 1. Define the web font */
@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins.woff2') format('woff2');
  font-display: swap;
}

/* 2. Create the adjusted fallback */
@font-face {
  font-family: 'Poppins-Fallback';
  src: local('Arial');
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

/* 3. Apply the font stack */
body {
  font-family: 'Poppins', 'Poppins-Fallback', sans-serif;
}

When the page loads:

1. The browser immediately displays text using 'Poppins-Fallback' (Arial).
2. Because ascent-override is set to match Poppins' intrinsic ascent, the text line boxes take up the exact vertical space that Poppins will require.
3. When the 'Poppins' web font finishes loading and swaps in, the baseline, line heights, and total block heights remain identical.

Why It Matters for Core Web Vitals

Cumulative Layout Shift is one of Google's Core Web Vitals metrics, directly influencing search engine rankings and user experience. Unexpected shifts can disorient users or cause misclicks. Using ascent-override—often alongside companion descriptors descent-override and line-gap-override—removes the need for complex JavaScript-based metric matching and solves font-swapping layout stability entirely through native, performant CSS.