fonts preloading best practices

When it comes to web performance optimization, preloading is a useful tool in your arsenal.

Preloading lets you declare specific resources that a browser must request without blocking the rest of your page’s rendering.

Basically, it gives you more control over how the resources on a web page load, which helps you optimize your site’s performance and improve your site’s perceived page load times.

In this article, we’re going to focus on one specific aspect of preloading – web font preloading.

You’ll learn what font preloading is and how it works. Then, we’ll also share some best practices for preloading web fonts.

What Is Preloading In General?

We cover preloading in detail in this post, but here’s the quick version:

When someone visits your website, their browser loads all the resources on that web page in a certain order, which you can see from the Network tab in Chrome developer tools or in a performance testing tool like GTmetrix or WebPageTest:

By default, web browsers decide how to load these resources based on the order that they’re declared in your site’s HTML, which isn’t always optimal from a performance and/or user experience perspective.

With preload, you can force browsers to load certain resources early on, like fonts. This gives you more control over how your site loads, which, when implemented properly, let you improve your site’s performance.

Why Is Font Preloading Important?

By default, your site will delay font requests until after the render tree has already been constructed.

I know that’s a little technical, so let me try and break it down into more human-friendly terms.

Essentially, with the default behavior, a browser will wait to load the font file until after it starts “painting” visible content to the user’s screen. Basically, the browser is lazy loading the font files so that it only starts loading a specific font once the browser knows that the font is needed (it knows that the font is needed because it already needs to use that font to “paint” text on the screen).

However, this lazy loading approach can lead to situations where the browser is ready to start displaying text but, because it hasn’t downloaded the font yet, the browser needs to delay painting the text until it has downloaded the font. 

This is called a FOIT, or Flash of Invisible Text. Or, it can also lead to a FOUT, or Flash of Unstyled Text.

In summary, without font preloading, you might run into a situation where a browser is ready to load your site’s text, but it can’t because the font isn’t available yet. That is, it needs to download the font before it can paint the text.

The reason you want to avoid this situation is that it slows down the perceived page load times for your visitors, which leads to degraded user experience.

With font preloading, you can force a visitor’s browser to load important fonts early on so that the browser can start painting text as soon as it’s ready, rather than potentially waiting to load the font.

Font preloading doesn’t tell the browser what the font will be used for – it just says “hey, download this font right away so that it’s ready to go”. Then, when the browser is ready to start painting the text, it already has the font available and can start displaying the text right away.

How to Preload Fonts on WordPress

While there are some plugins that can help you preload certain types of fonts (like Google Fonts), the manual method of preloading fonts involves adding some code to the <head> section of your WordPress site.

You have a few options for inserting code in your WordPress site’s <head> section. You can:

The code itself that you’ll use is as follows:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Best Practices for Font Preloading and Optimization

Next, let’s talk about some best practices for properly using font preloading.

Limit the Number of Fonts and Formats You Preload

If you use multiple fonts, it might be tempting to preload every font that you use in every format.

However, there are performance tradeoffs to using font preloading.

With preload, you’re essentially forcing browsers to make a high-priority request for the font URL whether or not it’s needed. If you load unnecessary fonts, you’ll unnecessarily delay a visitor’s browser from loading the rest of your site.

To balance these trade-offs, you should limit the number of fonts that you preload to only those that are absolutely necessary for the initial page load (i.e. those fonts that are needed above the fold).

Depending on your design, this could just be the font you use for your titles. Or, it might also include the font that you use for your body text.

Additionally, you’ll want to limit the formats that you preload, as well. For example, only preload the regular format, but not the italic or bold formats.

It’s much less jarring to have a FOUT for just your italic text or bold text, as those formats likely account for only a small part of your content.

Basically, you only want to preload the fonts that will have a noticeable effect on your site’s above-the-fold experience.

Make Sure That the Fonts You Preload Match Your CSS

If you’re loading fonts from an external CDN service (like Google Fonts or Adobe Fonts), be careful that the font files you’re preloading match the fonts called for in your CSS.

The font on the CDN might’ve been updated, which can lead to a situation where you end up preloading a different version of the font than what’s called for in your CSS. This can lead to a suboptimal situation in which you actually force visitors’ browsers to download two versions of the same font.

To avoid this, you can also host your custom fonts locally if possible.

The free OMGF plugin can help you locally host Google Fonts on WordPress. It can also automatically help you preload only fonts that are loaded above-the-fold.

Make Sure That You Use the crossorigin Attribute

When you preload fonts, it’s important to set a crossorigin attribute even if the fetch is not cross-origin. You can see this in the code example from before:

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

While the reason why is complex, the end result is that browsers will ignore preloaded fonts without the crossorigin attribute, which will cause the browser to actually fetch the font twice (once during the preload, and then another time after discarding the preloaded font).

Get Started With WordPress Font Preloading Today

Used smartly, font preloading can help you speed up how quickly your site is able to display visible text content, which boosts your site’s perceived page load times.

To preload a font, you’ll need to add some code to the <head> section of your site.

While font preloading can improve your site’s performance, you’ll want to:

For other ways to improve how you use fonts on your site, check out our complete guide to web font optimization.

Author's avatar

Colin Newcomer is a freelance writer who spends his days inside the WordPress dashboard. He lives a life of danger, riding a scooter through the chaos of Hanoi.

3 comments

Thks for this blog post.
Why WP Rocket does not offer such an option? It would be great and I see it as a natural addition to its domain.
Cheers.

    Hi :) We're working on the implementation of Fonts preloading in WP Rocket. It will be available with one of our next major releases!

I'm unclear about how many versions of the same font I should preload. Currently I'm using a system font stack for my body and only a small-ish font file for all headers, which I now installed locally: Bree Serif.
But of course it comes in several versions and the use seems to be browser dependent. Right now I preload the WOFF and WOFF2 versions and ignore the SVG file.
Any comment from you to this please! Right, wrong, don't know... ;)
Cheers.

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}