Avoid layout shift caused by web fonts

Introduction

Covers font-display, preload, size-adjust, and metric-compatible fallbacks, with before-and-after CLS numbers from a real marketing page.

The mental model

• Start from the smallest version that could work, and make it observable.
• Write down the trade-off you are accepting, not only the feature you are shipping.
• Revisit the decision when the team grows; most choices in Web Performance have a shelf life.

A practical starting point

1. Reproduce the situation on a scratch branch, next to a measurement you trust.
2. Change one variable at a time, and keep the diff small enough to explain in one sentence.
3. Keep the result, throw away the scaffolding.

git switch -c experiment/one-thing

Closing thoughts

None of this is doctrine. Treat it as a checklist you are allowed to disagree with — ideally with an experiment of your own that settles the argument.