Self host Google Fonts in WordPress

I wrote a few days ago about why you should self host static assets, and one of the key use cases that I had in mind (other than jQuery, which I mentioned in the post) was Google Fonts.

Now I don’t have a problem with Google Fonts itself, in fact it’s a great service that I use a lot when clients (including myself) want a specific font.  In terms of optimum performance, there are arguments for using the native font stack, but this can be limiting at times.

However, as discussed when I wrote previousl about Zero Round Trip Time Resumption (or 0-RTT), the cost of these connections adds up, so if we can self host the file we should, and with a font this is usually multiple files, as you have the stylesheet itself and the font file, of which you have different flavours (.tff, .woff, .woff2, etc.) for different browsers.

There is a great plugin for WordPress that makes the process of downloading and hosting the fonts locally really easy, and it’s called Optimize My Google Fonts.

This plugin works a little differently than some of the others that I’ve seen.  Rather than dynamically try to replace out links, it is all done up front.  The scripts lets you specify the font that you want and then different subsets you want (regular, bold, italic, etc.), and then downloads them for you and creates a stylesheet which is included as well.  Essentially it generates up front, so they only need to be included at run time.  It even periodically updates the downloaded files, in case there are any changes.

You can then use an option within this script to block files loaded from “fonts.gstatic.com” or “fonts.googleapis.com”, so that only your self-hosted fonts are referenced.

I’ve found this plugin to be very easy to use, and a great little boost to performance by adding it and setting it up as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.