Do your fonts load from Google?

What we check, and how to fix it

When you press the button, our server fetches the page once and reads the HTML that comes back, with the same limits as our cookie banner checker: up to 3 redirects, each new address checked before we go there, 8 seconds and 1.5 MB at most. In that HTML we look for:

• stylesheet links and preloads for fonts.googleapis.com, the address in Google’s own embed code;
• @import rules for fonts.googleapis.com in the page’s <style> blocks;
• font files from fonts.gstatic.com, in a preload or an @font-face rule;
• Google’s Web Font Loader, and inline scripts that add a Google Fonts address;
• preconnect and dns-prefetch hints to either Google host.

The family names come from those addresses. Font files and @font-face rules on the page’s own domain count as self-hosted. Adobe Fonts, Bunny Fonts and font files on other domains show up separately, because they also send the visitor’s IP address to another company.

Why it matters in the EU

A font from Google’s servers loads with the page, before the visitor has done anything, and each request carries the visitor’s IP address to Google. Google says its Fonts API sets no cookies, so this is mainly a GDPR question: may a site share an IP address, which can be personal data, with Google without asking?

On 20 January 2022 the Munich Regional Court (LG München I, case 3 O 17493/20) ruled that a site which loaded Google Fonts from Google without the visitor’s consent had broken the GDPR, and ordered its owner to pay that visitor €100 in damages. It’s one ruling by one German court, and this page is general information, not legal advice. Our guide on Google Fonts and the GDPR has the details and sources.

How to host Google Fonts yourself

1. Find every place that loads them. Search your templates, theme and CSS files for fonts.googleapis.com and fonts.gstatic.com. On WordPress, look in the theme’s and page builder’s settings too: some add their own link, and some can host the fonts for you.
2. Download the files. Get the families from Google Fonts, or install them from Fontsource, which publishes open-source fonts as npm packages. WOFF2 files cover every current browser.
3. Put them on your site, for example in /fonts/, and point an @font-face rule at each file.
4. Remove the Google stylesheet link, any @import, and the preconnect and dns-prefetch hints to both Google hosts.
5. Preload the one or two files the first screen needs. A font preload needs the crossorigin attribute, even on your own domain.
6. If your site sends a Content-Security-Policy, set font-src 'self'. A Google font you missed is then blocked, and the browser console names it.
7. Run this check again, and open the Network tab in your browser’s developer tools, filtered on Font, to see what still loads.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

<link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

What this check can’t see

• Fonts that scripts add after the page loads. We don’t run JavaScript, so a theme, page builder or widget that adds Google Fonts with a script can slip past.
• @import rules inside separate CSS files. We read the HTML, not the stylesheets it links to.
• Other pages of the site, which can use other templates and other fonts.

Gatelamp’s site scanner does the full version: a real browser, every page, and every request to another domain with the script that caused it.

What we store

Nothing. The address you enter goes to our server, which fetches that one page and sends the result back to your browser. We don’t keep the address or the result, and we don’t log them. The site you check sees one visit from Cloudflare’s network, with our checker’s name in the user agent. More in the privacy policy.