Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor

You know something good’s landed when two out of the three great Web/CSS resources — here Smashing Magazine and web.dev (*) — write about the same topic: the size-adjust descriptor for @font-face.

To improve font rendering, a great technique is font swapping. The problem however, is that sometimes when the web font loads, it shifts the entire page around since it presents at a slightly different box height size.

By putting size-adjust in the @font-face rule, it sets a global glyph adjustment for the font face. Timing this right will lead to minimal visual change, a seamless swap.

Available in Chromium 92 and (flagged) Firefox 89 at the time of writing. Up-to-date list on “Can I Use …”.

The posts contain links to tools to help you define the perfect size-adjust value.

• CSS size-adjust for @font-face →
• A New Way To Reduce Font Loading Impact: CSS Font Descriptors →