<b>The sneaky layout shift caused by web fonts</b>

<b>The sneaky layout shift caused by web fonts</b>

Here's a CLS — Cumulative Layout Shift — cause people miss for months: custom fonts. Your page loads with a backup system font, then your real font arrives and swaps in. If the two fonts are different widths, every line of text reflows and the layout jumps. Google counts that jump.

Think of it like trying on two jackets that are 'the same size' but fit completely differently.

How to tame it:
— Add <code>font-display: swap</code> so text is readable immediately, then accept a tiny swap
— Better: use <code>size-adjust</code> in your <code>@font-face</code> to match the fallback's width to your real font
— Best for stability: <code>font-display: optional</code> — if the font is slow, the browser just keeps the fallback, zero shift

<b>Try this:</b> Pick your body font and add a matching system fallback like <code>Arial</code>. Closer widths mean a smaller, calmer swap.