Updated on Mar 09, 2021
Web browsers support a variety of system fonts but many sites prefer to have a custom font that isn’t available by default. Loading custom fonts is very common but if done incorrectly can cause a bad user experience and low PageSpeed scores.
This short tutorial will show you how to load fonts the correct way to Ensure text remains visible during Webfont loads.
Fortunately, this change is very simple to implement and when our previous @font-face example is changed to have the font-display attribute added, it will look like:
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
The font-display: swap directive leverages a browser API of the same name, which instructs the browser that any text using this font should be rendered with a system font first. When the custom font is ready, the browser swaps them. This allows the browser to render some visible text earlier and enables users to start reading immediately.
Font-display is supported in most modern browsers. There are polyfills for legacy browsers but if PageSpeed is your primary motivation, you don’t need to worry about these because PageSpeed Insights and Lighthouse use a Google Chrome instance and font-display is supported from Chrome 60+.
Browsers ship with a small number of fonts pre-installed that can be called from CSS. The most common are:
Such a small pool limits the options for designers so fonts from third party services such as Google Fonts and Adobe Fonts (formerly Typekit) can be used to give different styling. These can be called in CSS using the src attribute of the @font-face directive by pointing to a local file that you have downloaded or a URL to the font on the web.
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
}A @font-face example
Fonts are large render blocking resources that take a while to load, especially if you are loading them from a 3rd party URL each time. While this is happening the browser cannot paint the text on the screen so nothing is visible, which is a problem known as the flash of invisible text (FOIT). This is an unpleasant user experience because when the font eventually loads it snaps into place which can cause a jarring motion rather than a smooth transition for users viewing the page.
Additionally, it can cause the layout of the page to move slightly, which falls foul of the Cumulative Layout Shift guidelines of Web Vitals. Here is an example:
If you are using a Google Font, it’s even simpler than the method described above and no CSS code changes are required. Just add &display=swap onto the end of the URL and font-display will automatically work.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">Unfortunately, we couldn’t find a similar solution for Adobe Fonts but if we do, this guide will be updated.
While font-display will solve the FOIT issue and improve your PageSpeed score, it will introduce another similarly named issue: Flash Of Unstyled Text (FOUT).
Showing a system font first makes text visible immediately but if the style is different from how the webfoot will render, a noticeable flicker will occur when the Webfont snaps into place. This behaviour shouldn’t impact your PageSpeed score at the moment but it’s not the perfect user experience so you should try to avoid it.
There is also a ready-made solution for this called preloading, which is suitable if you are loading your fonts with a link directive in your HTML. All that is needed is to add rel=“preload”:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel=“stylesheet">
The preload directive instructs the browser to prioritise downloading of this resource so when the page needs it, rendering can occur immediately because the browser will already have the font in the cache.
Using stylish fonts previously came with the trade-off of a lower PageSpeed score and weaker user experience but with font-display and preloading, you can apply them to your page in a smooth way that isn’t obvious to most users.
Despite this, we recommend you limit the use of web fonts to headings narrow FOIT and FOUT to a smaller selection of the page. Additionally, readability should be your primary concern over style. Typography and fonts existed before computers in print form and the system fonts we have now are digital versions of what has worked for almost 100 years with so readers are familiar with them.
If you are interested in PageSpeed, start a trial for PageSpeedPlus today and let us monitor your scores and measure your loading times worldwide.