Using Google Fonts Safely — CRAiD Quick Guide

The Problem

Embedding Google Fonts via fonts.googleapis.com transmits visitors' IP address, user agent, and referrer to Google in the USA — unlawful under GDPR (Munich Regional Court, January 2022) and incompatible with data-egress restrictions in security-critical industries.

The Solution

Self-host the fonts. The Open Font License permits it, the external request disappears, and performance usually even improves.

01 — Guide

Five steps to a compliance-tight font setup,
testable and auditable.

Obtain

Download the fonts via google-webfonts-helper — more convenient than fonts.google.com directly, because the tool generates ready-to-use @font-face snippets.

Pick the font (e.g. Inter, Roboto)
Select charset: latin is usually enough; add latin-ext for DE/EU content
Only the weights you actually use — every file costs load time
Choose Modern Browsers (woff2) as the format
Download the ZIP

Place

Create a folder in your project — path example:

/assets/fonts/inter/
  inter-v13-latin-regular.woff2
  inter-v13-latin-500.woff2
  inter-v13-latin-700.woff2

Wire up

Paste the snippet generated by gwfh into your CSS and adjust the paths:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter/inter-v13-latin-regular.woff2') format('woff2');
}

font-display: swap ensures text is visible immediately while the font is loading.

Clean up

Commonly overlooked spots to check:

<link href="https://fonts.googleapis.com/…"> in HTML
@import url('https://fonts.googleapis.com/…') in CSS
Tailwind configs, Bootstrap themes, WordPress themes
Third-party widgets, embedded iframes, tracking pixels
DevTools → Network → filter font + google: zero hits on googleapis.com or gstatic.com

Lock it

Enforce via Content Security Policy — audit artefact and protection against re-introduced Google requests:

Content-Security-Policy: font-src 'self'; style-src 'self'

The browser then blocks any external font load attempt — even if a plugin or theme silently re-references Google.

02 — Audit

Quick check before sign-off,
six points to tick off.

Network tab shows no requests to googleapis.com or gstatic.com
CSP header font-src 'self' is active
Fonts are versioned in your own repository
License notice (OFL) documented in the project
Records of processing activities contain no Google Fonts entry
Spot check in staging and production matches

03 — Bonus

Performance comes for free,
not despite self-hosting, but because of it.

Self-hosted fonts are usually faster than the CDN variant — a round trip to a foreign host, including DNS, TLS, and HTTP/2 connection setup, is avoided.

With a preload hint for the most important font, you can further improve Largest Contentful Paint:

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

Bottom line

Google Fonts may be used — just not delivered by Google. The fonts are freely licensed; the compliance risk is the third-party request, not the font itself.

← Back to Insights

Five steps to a compliance-tight font setup,testable and auditable.