Self-Host Google Fonts

Self-hosting Google Fonts gives you more control over performance and loading of your fonts.

A tool I use a lot is Google Webfonts Helper. I download the fonts and host them myself, which I kinda like cause I have more control over the files. Part of my webpack setup involves creating a service worker, so it’s minimal effort to add them in there.

I was doing this before Google allowed you to use font-display, so there was that advantage for a while.

I can use rel="preload" as well to help speed things up:

<link rel="preload" href="/fonts/pt-sans-v10-latin-regular.woff2" as="font" crossorigin>
<link rel="preload" href="/fonts/pt-serif-v10-latin-700.woff2" as="font" crossorigin>
<link rel="preload" href="/fonts/pt-serif-v10-latin-regular.woff2" as="font" crossorigin>

10/10 from me. You can see the source and contribute on GitHub.