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

This content originally appeared on Bram.us and was authored by Bramus!

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 →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-07-27T22:44:43+00:00) Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor. Retrieved from https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/

MLA

" » Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor." Bramus! | Sciencx - Tuesday July 27, 2021, https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/

HARVARD

Bramus! | Sciencx Tuesday July 27, 2021 » Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor., viewed ,<https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/>

VANCOUVER

Bramus! | Sciencx - » Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/

CHICAGO

" » Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/

IEEE

" » Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/. [Accessed: ]

rf:citation

» Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor | Bramus! | Sciencx | https://www.scien.cx/2021/07/27/prevent-layout-shifts-between-web-fonts-and-fallback-fonts-with-the-size-adjust-font-face-descriptor/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.