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.

Self host static assets

Now this may seem counter-intuitive, but stay with me.  Please self host your static assets. There was a big trend a few years ago (probably more than a few) to use CDNs, especially for third party libraries, such as jQuery.  And yes, I fell into this trap as well. The idea behind it was pretty…

My code is not unsafe(-eval)

I was working on a project this week when I came across something which confused me, and that was the following error in my browser console… Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: ‘self’ In itself, not massively odd.  I…

Easily fixing insecure references

One of the easiest mistakes to make when trying to convert an insecure HTTP website over to a secure HTTPS one is mixed content. Mixed content is when the site itself is loaded over HTTPS, but it contains links to content which are HTTP and therefore insecure – there’s no point knowing that the page…

New Cloudflare app – Instant Page

I wrote a post 3 months ago about pre-fetching links to improve performance.  This post talked about a library called instant.page, which is a free and open source library that uses just-in-time preloading, meaning it preloads a page right before a user clicks on it. Pages are preloaded only when there’s a good chance that a user…