HTML & CSS · Senior · Question 60 of 75
How does size-adjust in a fallback @font-face reduce layout shift?
- ✓Correct answer: It scales the fallback font to match the web font's metrics, so the text reflows less when the web font swaps in
- 2It preloads the web font
- 3It forces the web font to render in the fallback's size
Explanation
Together with ascent-override and descent-override it makes the fallback occupy nearly the same space. Next.js next/font generates such adjusted fallbacks automatically.