No CLS from Web Fonts – Size Adjust to the Rescue

You load a slick new font and boom – the layout jumps like it just got kicked. Web fonts are great until they trash your CLS score. Here’s how to stop the shake for good.

The problem

Fancy web fonts look great until they nudge every line and wreck your CLS score.

The fix

Use size-adjust and matching metric overrides so fallback and loaded fonts take up the same space.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

Why it works

These metrics tell the browser to make the fallback font measure like the final one. No jump, no shift, CLS stays at zero.

You can grab metrics straight from Chrome DevTools → Rendering → Font metrics override.