I posted recently about using a skeleton layout to reduce cumulative layout shifts as asynchronous content loads on your website. Layout shifts can not only be annoying, but might also affect the SEO of your website with Google's updated ranking system.
Why do Web Fonts cause Layout Shifts?
As you load in a custom web font, the browser has to asynchronously download that font, often times causing the text on your page to change in size or spacing after loading, which in turn causes a blip (or shift) in the layout as fonts get replaced. There are several strategies for preventing layout shifts caused by the use of web fonts, and Simon Hearne came out with a great blog post going over many of them.
Secret Strategy: font-display: optional
As Simon writes in his blog post,
The dirty little secret of this blog post is that you can resolve layout shifts due to fonts with a single line of CSS:
font-display: optional
How to Use:
// Example CSS
@font-face {
font-family: ExampleFont;
src: url(/path/to/fonts/examplefont.woff2) format('woff2'),
font-weight: 400;
font-style: normal;
font-display: optional;
}
Basically, if you include this additional line of code when you declare your font-face, the browser will use a fallback system font if the web font is not loaded and ready by the time text is rendered. Every additional page loaded on your website will then use the web font, as it will then be loaded, which means the user will only see a system font used once if at all.
Other Considerations
Designers may cringe at the idea of using a system font for the first load, but user experience and SEO will improve by implementing this great strategy. To reduce the chances of users seeing this initial system font, there are additional strategies that will help the web font load more quickly:
- host your own fonts on your site domain
- subset fonts and serve as
woff2 - use variable fonts or a limited set of weight variations
- preload critical fonts
<link rel="preload">
These are further expanded on in Simon's blog post, so check them out further if interested, but the main takeaway is that little option which eliminates layout shift in your project while using web fonts.
Conclusion
If you are like me and frequently use various web fonts in your own project, but also like to take SEO and user experience into consideration, you may want to look into strategies to reduce cumulative layout shift when loading asynchronous data like web fonts. This simple strategy is a one-shot solution to resolving layout shifts due to web fonts. It can be applied solo or in combination with other considerations to improve your use of custom web fonts on your site or project.
Do you use web fonts in your projects? Have you noticed layout shifts as these fonts load? What other strategies have you used to resolve this issue in the past?
Top comments (0)