Why do WebFonts affect the performance of a web page?
WebFonts, while popular for allowing typographic customization on websites, represent a considerable challenge to page performance. Having multiple web fonts can significantly slow down load time. It is advisable to limit the use to a maximum of two WebFonts, or even avoid them altogether in cases where performance is critical. Let's explore three methods to optimize the loading of these resources and minimize their impact on performance.
What are the three common WebFont loading strategies?
There are a variety of strategies for loading WebFonts that, while necessary for design, bring with them certain drawbacks. Let's address three basic loading methods:
-
Normal loading via CSS: WebFonts are added via a link in the CSS, which is blocking to the rendering process, stopping HTML parsing until the font is fully downloaded.
-
Font Shift (Flash of Unstyled Text - FoUT): Consists of using a default system font (e.g. Arial) while the desired WebFonts are loaded in parallel. This generates a noticeable "FLASH" when the fonts change, a phenomenon known as Flash of Unstyled Text.
-
Flash of Invisible Text (FOIT): Here, no text is displayed until the WebFonts are completely downloaded, causing a moment of "invisibility" that can be disturbing to the user.
How can we optimize the loading of WebFonts?
Optimizing WebFonts involves a careful analysis of how the font loads and what tools we can use to improve this experience. Here are several useful strategies.
Using display in Google Fonts
An efficient technique is to use the display: swap property in Google Fonts, which allows displaying a text with a system font until the web font is loaded and can swap automatically when available, thus improving the user's perception.
<link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
WebFontLoader for more control
For more granular control over WebFonts, it is recommended to use WebFontLoader, an open source library that facilitates font management from various vendors, such as Google Fonts, TypeKit, and Font Deck.
<script>
WebFont.load({ google: { families: ['Muli'] } } });</script>
Implementing CSS events
The WebFontLoader library emits events based on the font state (loading, active, inactive), allowing dynamic CSS settings to switch between system fonts and WebFonts elegantly.
html { font-family: Arial, sans-serif;}
html.wf-active { font-family: 'Muli', sans-serif;}
Why limit WebFonts in your project?
Reducing the number of WebFonts not only improves performance, but also provides a more consistent user experience. Ideally, using a single WebFont, or even none at all, is recommended. By taking specific measures and using appropriate tools, such as WebFontLoader, we ensure that fonts load efficiently, avoiding unwanted effects such as invisible text or abrupt font changes. In addition, it is essential to keep learning and considering advanced strategies, such as those detailed by experts like Zach Lederman, to reach new goals in web optimization.
Want to see more contributions, questions and answers from the community?