Ten things every marketer should know about web performance no. 6: custom fonts make text slower to display
Marketers care about presenting a consistent brand image. And for good reason. Consistent use of colour, logos and text is essential to building a recognisable identity.
If those elements vary too much when people interact with an organisation, any meaning attached to that identity can be lost.
Being able to display your website’s text in a custom font, specific to your brand, is therefore extremely valuable.
Displaying text on the web
In the early days of the web, using specially designed, custom fonts was pretty much out of the question.
Instead, text was displayed with a limited range of ‘web safe’ fonts – fonts that were available on the end user’s system.
This was far from ideal, and eventually, thanks to popular demand, the people in charge of web standards gave us the ability to use custom fonts on websites.
Suddenly, you could use any font you wanted.
And at a stroke, the web got slower.
Why custom fonts are slow
Unlike system fonts, custom fonts are rarely saved on the end user’s device. They therefore have to be loaded separately, which takes time.
On top of this, font files are referenced inside style sheets. This means that a web browser doesn’t discover a font file until it’s finished loading the style sheet that contains it.
It gets worse.
Browsers will generally hold off loading a font file until they discover some text that needs it.
This avoids downloading fonts unnecessarily, but it can also add a further delay.
In some browsers, such as Chrome, all this can push back the point at which text is displayed. So you might see all the visual elements of your web page dropping into place, but with blank spaces where the text should be while you wait for fonts to load.
Other browsers, such as Internet Explorer, will use a fallback font while waiting for the custom version to load. While this does allow text to display earlier, it can have a jarring effect on the user experience as it switches from one to the other, especially if the custom font is radically different from the fallback. This is known as a ‘flash of unstyled text’ or ‘FOUT’.
What you can do about it
The simplest, most effective option for faster load times is to avoid custom fonts completely. If you use a custom font, there is always some performance trade-off. You just need to decide whether the value of presenting a consistent brand image is worth the potential damage to that image through a slower website.
A compromise solution is to use standard system fonts for mobile visitors, who a) are more likely to be on a slow connection and b) may be more interested in getting a fast response than in seeing the properly branded version of the site. So, if you’re standing in the rain, using your phone to look for a restaurant, you just want the details as fast as possible. You really don’t care what the text looks like!
If you do use a custom font, one way to minimise its size – and therefore its impact on load times – is to subset it. This means loading only those characters that you know you’re going to need on the page. So if it’s a UK-only site, for example, you probably don’t want to load Greek or Cyrillic characters.
Another option is to preload your font. With just one line of HTML, you can tell the browser to load your font file(s) early, before it’s finished loading the style sheet that contains it. As long as you know the font is going to be needed on the page, this is a great way to get text to display faster.
Preload doesn’t yet work in all browsers (it’s not supported on iOS), but it’s definitely worth considering, especially when it’s this easy:
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>
Finally, it should soon be possible to give browsers more direction on how you want them to handle custom fonts. A new CSS property, font-display, will, for example, let you define whether you want the browser to use a fallback before loading the custom font. You’ll even be able to tell the browser to use the fallback instead of the custom font if the visitor’s network connection is slow. At the time of writing, font-display is fully supported only in more recent versions of Chrome (desktop) and Opera.
So are custom fonts even worth it?
None of the above means you should never use custom fonts. They help make the web a richer, more interesting place and they help you communicate your brand identity.
It’s just important to be aware of the performance trade-off and what you can do to minimise the impact. Because, while inconsistent branding can undoubtedly have a negative impact on the business, so can slow load times.
Also in this series:
Ten things every marketer should know about web performance…
Published date:  20 July 2017
Written by:  Alex Painter