Using font-display to Improve Time-To-Interactive
While native fonts are ideal from a speed standpoint, customizing the font used on your website is a great way to improve the design and readability of your website. The downside is that downloading the custom font files to the browser increases the load time of the content. By default, loading a custom font also increases the Time-To-Interactive metric (the delay before a user can interact with the content), making the website feel slower and less responsive leading to a higher bounce rate and decreased time spent on the site.
font-display CSS property controls what the browser displays while it’s waiting for a font to be downloaded; and changing it from the default setting can make your website feel faster and perform better on very slow connections.
Font Display Timeline
The browser divides the time spent to download a font into three phases:
- Block Initially the font is not available. Since the browser is laying out the page at this time, it renders an invisible font so that other elements may be rendered on the page close to their final position.
- Swap Once the font is available, the browser swaps the invisible font with the downloaded font.
- Failure If the font fails to download, the browser follows the normal font fallback process. Generally this means the browser will display elements with the next font specified in the CSS using
font-display changes the amount of time the browser spends in each of these phases. It’s specified by adding it to the
@font-face CSS rule.
Alternatively, if you’re using Google Fonts it can be specified using the
display URL parameter:
We have five options to change the display behavior:
autoThe browser’s default. This is usually the same as
blockWait up to 3 seconds before displaying unstyled text. Switch to the font once it’s ready. Users won’t see unstyled text if the font loads before 3 seconds.
swapDo not block at all. The browser will immediately display unstyled text and switch to the font once it’s ready.
fallbackBlock for 100ms before displaying unstyled text. Switch to the font if it’s ready within 3 seconds. If 3 seconds pass and the font hasn’t loaded, the browser won’t swap the font, keeping the unstyled text. Since the block period is short, users will see a flash of unstyled text unless the font is cached by the browser or they are very close to the server.
optionalBlock for 100ms and if the font hasn’t loaded during that time, keep the unstyled text. In other words, consider the font face optional: use it if it’s available, otherwise skip it.
Icon fonts have no acceptable fallback font. If the font doesn’t load, the browser will display gibberish because the UTF code point used by the icon font will be unused or have another value in different font. For icon fonts, use
block to give the font as much time as possible to load.
Watch out for fonts used in artistic CSS illustrations and diagrams where the font lends significantly to the art. Use the
block setting to give the font as much time to load, since the fallback will make the art less appealing. Similarly, websites are an extension of your company brand. So if you sell high-end or veblen goods or design is a key part of your competitive advantage, use
block to ensure your website design matches your branding.
If the font you’re using is similar to the default system font, consider using
optional to eliminate nearly all of the delay caused by loading an alternative font.
Otherwise, considering using
swap for body text and everywhere else. Compared to
fallback setting makes it less likely the user will see unstyled text and has the added advantage of preventing the content from shifting after a significant delay, improving usability on mobile and other slow networks.