How to Use Google Fonts in a Way Google Likes (SEO)

Let's face it: Google Fonts are awesome--and totally free! It's so strange, though, that the way Google recommends you load them via the font selection tool at fonts.google.com is advised against in Lighthouse. Come on, Google! 😮‍💨

The trick is to download the web font files from Google Fonts and host them yourself. You'll definitely want to host them on a high-availability CDN edge server like Amazon Cloudfront or Cloudflare. Check out this tutorial on how to create your own free Cloudfront on AWS. I use mine pretty heavily and I have yet to see usage over $0.00.

If you use a serverless service like Vercel, then you're public assets will automagically be CDN'ed. I highly recommend Vercel if you are into NextJS (which you should be).

Step 1 - Download Your Fonts

First, you'll need to acquire the font files from Google. The easiest and quickest way to accomplish this is to use the google-webfonts-helper tool. It's a free tool so be sure to give it a 🌟 on Github. It's pretty cool. To use the tool:

1. Search for your desired font in the let sidebar
2. Select your charsets (default is Latin)
3. Copy the generated CSS
4. Download the font file package

Another cool feature about this tool is you can change the folder prefix to reflect your directory structure in your project or CDN.

Step 2 - Modify the CSS

To make Lighthouse happy, we need to leverage the font-display: swap CSS property so that the browser will use a specified local system font in lieu of the web font whilst it is being downloaded. Here's an example:

/* inter-100 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.eot'); /* IE9 Compat Modes */
    src: local('Verdana'),
         url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.woff') format('woff'), /* Modern Browsers */
         url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('https://cdn.designly.biz/fonts/inter/inter-v12-latin-100.svg#Inter') format('svg'); /* Legacy iOS */
  }

Notice that I added font-display: swap right below font-weight: 100. This is the key to making Google happy! Now when you apply this style in your elements, you'll do something like: font-family: Inter, Verdana. Verdana, is a web safe font, meaning most desktop and mobile devices have this font stored locally on the device's hard disk. Most modern browsers will honor the swap directive and render the local Verdana font until Inter is loaded.

Whelp, I hope you found this joint useful. For more great stuff about web dev and systems administration, please read the Designly Blog! 🙃