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.

The <code>font-display</code> 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.

The browser divides the time spent to download a font into three phases:

<code>font-display</code> changes the amount of time the browser spends in each of these phases. It’s specified by adding it to the <code>@font-face</code> CSS rule.

Alternatively, if you’re using Google Fonts it can be specified using the <code>display</code> URL parameter:

We have five options to change the display behavior:

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 <code>block</code> 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 <code>block</code>
 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 <code>block</code> to ensure your website design matches your branding.

If the font you’re using is similar to the default system font, consider using <code>optional</code> to eliminate nearly all of the delay caused by loading an alternative font.

Otherwise, considering using <code>fallback</code> or <code>swap</code> for body text and everywhere else. Compared to <code>swap</code>, the <code>fallback</code>
 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.

Using font-display to Improve Time-To-Interactive

Share This

Power3Designs