Serve Google Fonts Locally To Avoid Tracking
Google Fonts is a very cool service. I expect it's done more for improving typography on the web than pretty much everything else combined. But, I'm increasingly wary of the tracking. So, I've taken to hosting my own versions of the fonts. Here's how I do it:
Select a font with an eligible license from the Google Fonts collection.
Instead of downloading the font from the download button, copy the link to the CSS file from embed codes and open it directly.
Download the individual versions of the font from the `src`` URLs and store them in your site directory structure.
Paste the CSS from the Google file into your site's CSS and update the `src:`` attributes to point to your copies.
It took me about 15min to walk through that process for a font. Given that I'm thinking on a twenty-year timeline, that's an easy cost to pay.
Notes
Fonts download as `.ttf`` files when I use the button on the website. The URLs in the CSS file area `.woff2`` files that have been significantly smaller in my experience. For example, the set of Atkinson Hyperlegible .ttf fonts is 217KB. The corresponding .woff2 files are 65KB.
There's 8 .woff2 files and only 4 .ttf. But, the .woff2 files include both `latin`` and `latin-ext``. Depending on the site content you could cut down to just the four you need and reduce the download size even more (e.g. `latin`` is 40KB)
You don't have to use all the fonts. (e.g. I'm not using the 700 weight bold italics. So, my download is three files that weigh a collective 33KB)
You don't get the benefit of standard google fonts likely already being a browsers cache on your first site load. That doesn't concern me.