Browser & Web Performance · Middle · Question 29 of 75

How can you reduce CLS caused by web fonts?

1Always use font-display: swap without any fallback tuning
✓Correct answer: Match the fallback font metrics with size-adjust and related @font-face descriptors, or use font-display: optional
3Load fonts with loading="lazy"

Explanation

If the fallback takes the same space as the web font, swapping doesn't move text. optional avoids late swaps entirely.

Further reading

Test yourself

Take the Browser & Web Performance · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.