Serving Google Fonts in Faster, Privacy-Preserving Way
I use a web font on my site, and I love it. Atkinson Hyperlegible was designed by the Braille Institute, and while it isn't the most beautiful typeface, it's distinctive, handsome, and designed to be easy to read, especially for people with vision problems. I talked about doing this a while ago, but I never bothered to post the solution. So let's dig in!
First off: I know what you're thinking. "Let's just go to Google Fonts, search for the font, pick the weight, and add their code snippets." And you can do that – I can't stop you. But, there are good reasons not to.
- If you're concerned with your users' privacy, hosting resources through Google is a bad idea. They're tracking every download, and using your site to follow people around the web. Some folks are fine with it, some aren't, but if you care about people, you don't subject them to that. (There may be GDPR concerns as well, but I am not an expert on that.)
- Even if you're okay with helping Google track your users, you probably care about how your page performs, particularly from the perspective of Google's PageSpeed tests. I wrote up a host of problems with that in my previous post, but your score starts to plummet each time you embed something from Google on your site, to include analytics, charts and fonts.
- You could host your font files yourself, but unless you're paying for a CDN, it's a bad idea. Putting font files on your server is a quick way to drop your PageSpeed scores.
- Most importantly: even if you only care a tiny amount about those things, it's super easy to set up, so why not?
So let's get started!
Start with Google
Okay, I know that sounds bad after everything I said, but stay with me. Google is just the first step. Go to Google Fonts and search for a font you like. Let's use my choice as an example. On that page, click "Get Font" and then "Get Embed Code" on the following page. From there, click on "Change Styles" and pick the styles and weights you want. Are you going to use this for just headlines? Body copy? Do you need italics? You know better than me, but I would encourage you to only pick the fonts you need for a given typeface. Your page weight will thank you. I chose "Regular 400" and "Bold 700". On the panel to the right (on desktop) copy the link tags for the HEAD of your pages and the CSS to put into your stylesheet.
Paste that code into a document, and let's forget how close we came to doing things the wrong way.
Let's Talk about CoolLabs
CoolLabs hosts a bunch of resources for improving your website, but we're focused on font files. Their instructions are super clear: just find and replace all instances of "fonts.googleapis.com" with "api.fonts.coollabs.io". You can also delete the "preconnect" link to fonts.gstatic.com since we aren't going to use it.
But why would we do all that?
CoolLabs pays BunnyCDN to host font files for you on a bare metal server with no tracking. This removes some of the complaints from PageSpeed (you'll still get a warning about now the cache policy is only 30 days, but that's not a big deal), and keeps your users from being tracked, all while serving the files from a fast CDN. That's all of our problems answered!
So copy that CSS into your files, paste the links into your the HEAD of your HTML, and you're done.
Unless You're Picky Like Me
That's not what I do, mind you.
The first thing I do is think about how often I'm going to use all of my font files. Most of my site relies on the Normal 400 weight, and just uses size for things like headers as opposed to weight. I very occasionally use STRONG tags, so I want the Bold 700 weight available, but I'm not going to prioritize it.
Also, one of the links you've just added is just a CSS file with links to the files. You could just copy that CSS into your CSS and not have to load another file from a different server. I don't exactly do that because I (needlessly) worry that the links might change, so I have a CRON job on my server that downloads that file and it prepends it to the rest of my CSS.
However you choose to do it, you now have the URLs to the actual font files, so I copy the URL for the Normal 400 weight, and create a "preload" link for just that font file in the HEAD of my HTML. I also add a "dns-prefetch" link to that domain above the "pre-connect" link in the hopes of speeding up that process another tiny bit. Take a look at the source of this page and my site's css file to see exactly what I do.
Wrapping Up
So what did we do?
- Pick a font from Google Fonts
- Find and replace in the code they gave us to get the files from CoolLabs instead
- Fiddle with that code to get it just the way we like it
And at this point, you might be thinking, does it even work? Well, see or yourself. Check out the PageSpeed result for this page using those exact techniques. Not too shabby, right? If you don't trust me, try doing this process as Google suggests, and check your results. I think you'll be suitably horrified. Either way, hit me up on Mastodon or Bluesky if you have any suggestions!
