Stop Web Fonts From Shifting Your Text

Stop Web Fonts From Shifting Your Text

When a custom font loads, text can suddenly swap from a backup font to the real one, nudging everything around — a flash of restyled text. That movement feeds CLS — Cumulative Layout Shift. Think of it like swapping out a tablecloth while dinner is on the table.

The playbook:
—
1. Find where your font loads in CSS, the @font-face rule.
—
2. Add font-display: swap; inside it so text shows immediately.
—
3. To stop the jump, pick a backup font with similar width in your font stack.
—
4. Preload your main font file with a preload link in the head.
—
5. Reload and watch for any text reflow.

Matching the backup font's size to the real one minimizes the shift.

Try this: Add font-display swap to your heading font and reload twice to spot the change.