CLS (Font-related)

Cumulative Layout Shift (CLS) caused by font loading is one of the most frustrating and common Core Web Vitals problems on the web. It happens when a web font loads and replaces a fallback font, and the two fonts have different metrics — different character widths, line heights, or spacing. The result is text that visibly jumps: paragraphs reflow, buttons resize, page sections shift vertically. Users may lose their reading position or accidentally click the wrong element during the shift.

CLS is measured as a score combining the size of the layout shift (what fraction of the viewport moved) and the distance content traveled. Google uses CLS as a ranking factor, making font-related layout shifts a literal SEO problem in addition to a user experience one.

The root cause is metric mismatch between fallback and web fonts. If you load Playfair Display (a wide, high-contrast serif) but fall back to Georgia, the character widths differ enough to cause significant reflow when the swap occurs.

The best solutions, in order of effectiveness:

1. font-display: optional — Never performs a late swap. The font loads silently and is used on subsequent visits once cached:

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato.woff2') format('woff2');
  font-display: optional;
}

2. Font metric overrides — Adjust fallback font metrics to match the web font, minimizing shift during swap:

@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'InterFallback', sans-serif;
}

3. Font preloading — Get the web font into the browser cache before the first paint:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

4. Variable fonts — Reduce the number of font files to fetch, decreasing the time window where a swap could occur.

For sites using Google Fonts, the &display=swap parameter enables font-display: swap but does allow late swaps that cause CLS. Adding preload and metric overrides on top of swap is the most robust approach:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=optional" rel="stylesheet">

Measuring CLS in Chrome DevTools (Performance tab > Layout Shift regions) or Lighthouse shows exactly which font swaps are contributing to your score. A CLS score below 0.1 is considered "Good" by Google's Core Web Vitals thresholds.