Self-hosting Google Fonts on a static site

The problem

This site loaded its three fonts from Google Fonts: Bricolage Grotesque, Instrument Sans and JetBrains Mono. It only took one <link> tag.

A review of the site before launch caught what that tag really does. Each page load sends the visitor's browser to Google's font servers, so Google receives their IP address and browser details, even if they never touch the contact form.

I could either list Google in my privacy policy or stop sending the data. I chose to stop sending it.

What I did

1. Downloaded the variable, Latin-only builds of each font. Together they come to about 147 KB.
2. Added them to the site with their Open Font License files.
3. Replaced the Google link with @font-face rules in the stylesheet.
4. Made the same change on the 404 page, which has its own styles and was easy to miss.
5. Tightened the Content Security Policy, so the site no longer has to trust an outside host for styles or fonts.

How I tested it

I served the built site locally with the real policy attached, then checked which files the browser requested. All three fonts came from the site itself, with no policy errors, and the built site no longer refers to Google Fonts.

Trade-offs

• Latin only. Characters outside the Latin set, such as Cyrillic or Greek, fall back to a system font.
• Replacing a font takes a rename. Fonts are cached for a year, so a replacement needs a new file name for browsers to pick it up.
• No more automatic updates. Google would have shipped font fixes for me. Now that's my job.

What I took away

One line of HTML can share visitor data with an outside service. When I add one now, I check what it sends and make sure the privacy policy covers it.