How To Optimize Web Fonts for Speed

What's a web font?

In the earlier days of the web, websites were restricted to using only the fonts that were installed on a user's computer. This was extremely restrictive since only Arial and Times New Roman were safe bets! Even then, Macintosh and Windows computers would display them differently.

Enter web fonts. These are fonts that are downloaded by a user's web browser on demand if they don't already have them. This means you can use any web font on your website and it'll look the same across different devices, operating systems and browsers.

Why does it affect speed?

Since the web font is downloaded by the user's web browser it will increase the size of assets the browser needs to download to display the page. Larger pages, slower loading time.

These assets can be split into a) things that must be downloaded before the user can start interacting with the page and b) things that can be downloaded after the user can start interacting. In technical terms (a) render blocking and (b) non-render blocking.

Render blocking assets could be things like a Javascript to show the 'add to cart' button. Non-render blocking assets might be a Facebook Like button.

To speed up your shop have as many things non-render blocking as possible. What about web fonts, shouldn't we have them non-render blocking? Maybe...

Non-render Blocking & Flash of Unstyled Text

As we mentioned above, option (b) non-render blocking means the page is displayed and the user can interact before the asset is downloaded. In the case of a web font this means that the browser will display the page and its text before the font is downloaded.

During the time between (a) assets being downloaded and (b) the browser may display the text on the page using its default font.

We call this behaviour 'flash of unstyled text' because the gap between (a) and (b) is typically quite small and the default font will 'flash' on the screen and then change to your desired font shortly after.

Depending on your shop setup this can either be an acceptable thing or very disorienting for users.

Talk with your theme developer to see if your theme supports making the web font non-render blocking. Try it out to see if this potential flash of unstyled text is acceptable to you in exchange for a faster shop.

Always use a CDN

Content Delivery Networks (CDNs) are networks of very fast servers with very fast internet connections spread across the world. They're operated by big companies like Google and Adobe.

They host font files that you can link to directly. The benefit is that your user's may already have downloaded the font file from them and don't need to download it again, or if they do it's guaranteed the fastest place to download it from.

It's almost certain your theme already is downloading its fonts from a CDN, but ask your theme developer if you're not sure.

Only load the character sets, styles and weights you need

A font can be in 1) a variety of weights (boldness) 2) italics and 3) different character sets (languages).

Your shop may for example just use a Latin language in the 400 and 700 weights. You do not need to download 100, 300, 500, 900 weights, maybe you don't even need italic and you certainly don't need Vietnamese, Cyrillic or Greek.

Most CDNs allow you to select just the weights, italics and character sets you need.

It's common however for themes to download by default all, since they don't know which you will need in your shop. Identify which you need and then look at your theme docs or ask your theme developer to just download these.





Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us