Improving WordPress Page Speed With The Web Font Loader

The Web Font Loader is a JavaScript library that allows websites to load web fonts such as Google Fonts, TypeKit, Fonts.com and FontDeck. This library also allows us to load fonts asynchronously, which allows the page content to load without waiting for fonts to load. In my experience, including the use of the Web Font Loader on my clients sites had the biggest improvement on Google Page Speed and mobile tests. Since you can’t control how fast external resources load I would get inconsistent load times on different networks. I was able to completely eliminate render-blocking JavaScript and CSS in above-the-fold content.

Enqueuing The Web Font Loader In WordPress

Firstly, you have to enqueue the JavaScript library. We want to load this file in the footer for best results. To do this we need to download the Web Font Loader library and host it in our theme.

I put the file in /js/webfont.js. Now that the file is in our theme, we need to enqueue it in the footer. Inside a function that is hooked into the wp_enqueue_scripts action, we will place our wp_enqueue_script function call.

We call the wp_enqueue_script function with the following parameters:

• Handle name: 'fontloader_js'
• Source (file location): get_template_directory_uri() . '/js/webfont.js'
• Dependencies: NULL
• Version: ''
• In Footer: true

After all that, our complete function call looks like this:

wp_enqueue_script( 'fontloader_js', get_template_directory_uri() . '/js/webfont.js', NULL, '', true );

As long as your wp_footer action is placed correctly in your theme, you should see the script right before the </body> tag.

Loading Google Fonts Asynchronously

While looking at the documentation, it is very simple to load Google Fonts. All we need is to include an inline script below where we enqueued our Web Font Loader library. This is very easy to do in WordPress with the wp_add_inline_script function.

Directly after the function call we made to enqueue the JavaScript library, we need to add our custom script to tell the loader what fonts to load. For example, on this site I am currently using Assistant font from Google Fonts with weights of 400, 700 and 800. To do this, my function looks like this:

We call the wp_add_inline_script function directly after our enqueue function with the following parameters:

• Handle name: 'fontloader_js'
• The inline script data as a string: get_font_loader()
• Position: 'after'

After all that, our complete function call looks like this:

wp_add_inline_script( 'fontloader_js', get_font_loader(), 'after' );

As you can see I use a function call to get the fonts to load. This is a solution I use for clients who may want to change what font families without editing the theme files. If you are interested in seeing that full solution let me know in the comments. Otherwise, you would put the inline script as a string. It would look like this:

wp_add_inline_script( 'fontloader_js', 'WebFont.load({google:{families:["Assistant:400,700,800"]}});', 'after' );

Notice how in the array families we have the family name, followed by the selected font weights. You can add more families by simply adding another array value.

Finishing Up

Now that your Google Fonts are loading asynchronously, they will no longer be render-blocking. This does come with a small price to pay. You will have a bit of FOUT, flash of unstyled content, because the content will render with a fallback font and as soon as the Google Fonts are loaded they will be switched to the correct fonts. In my opinion, getting content to users is far more important than some unstyled content. If you are looking into fixing or improving the FOUT, you can look at this article.

Thank you for reading and let me know about how you use the Web Font Loader library. If you have questions, please leave those below as well.