Google Fonts sicher nutzen — CRAiD Kurzanleitung

Das Problem

Google Fonts via fonts.googleapis.com einzubinden überträgt IP-Adresse, User-Agent und Referer der Besucher an Google in die USA — unzulässig nach DSGVO (LG München, Januar 2022) und unvereinbar mit Datenabfluss-Restriktionen sicherheitskritischer Branchen.

Die Lösung

Schriften lokal hosten. Die Open Font License erlaubt es, der externe Request entfällt, die Performance steigt meist sogar.

01 — Anleitung

Fünf Schritte zur compliance-festen Schrifteinbindung,
prüfbar und auditierbar.

Beziehen

Schriften über google-webfonts-helper herunterladen — komfortabler als der direkte Weg über fonts.google.com, weil das Tool fertige @font-face-Snippets generiert.

Schrift wählen (z. B. Inter, Roboto)
Charset wählen: meist latin, bei DE/EU latin-ext dazunehmen
Nur benötigte Weights — jede Datei kostet Ladezeit
Modern Browsers (woff2) als Format
ZIP herunterladen

Ablegen

Im Projekt einen Ordner anlegen — Pfad-Beispiel:

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

Einbinden

Das von gwfh generierte Snippet ins CSS einfügen, Pfade anpassen:

@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 sorgt dafür, dass Text sofort sichtbar ist, während die Schrift lädt.

Bereinigen

Häufig übersehene Stellen prüfen:

<link href="https://fonts.googleapis.com/…"> im HTML
@import url('https://fonts.googleapis.com/…') in CSS
Tailwind-Configs, Bootstrap-Themes, WordPress-Themes
Drittanbieter-Widgets, eingebettete Iframes, Tracking-Pixel
DevTools → Network → Filter font + google: keine Treffer auf googleapis.com oder gstatic.com

Absichern

Per Content-Security-Policy technisch erzwingen — Audit-Nachweis und Schutz vor wieder eingeschleusten Google-Requests:

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

Der Browser blockiert dann jeden externen Fontladeversuch — selbst wenn ein Plugin oder Theme heimlich wieder Google referenziert.

02 — Audit

Quick-Check vor Abnahme,
sechs Punkte zum Abhaken.

Network-Tab zeigt keine Requests an googleapis.com oder gstatic.com
CSP-Header font-src 'self' aktiv
Fonts liegen versioniert im eigenen Repo
Lizenzhinweis (OFL) im Projekt dokumentiert
Verarbeitungsverzeichnis enthält keinen Google-Fonts-Eintrag
Stichprobe in Staging und Produktion deckt sich

03 — Bonus

Performance gibt's gratis dazu,
nicht trotz Self-Hosting, sondern deswegen.

Selbst gehostete Fonts sind in der Regel schneller als die CDN-Variante — ein Roundtrip zu einem fremden Host inklusive DNS, TLS und HTTP/2-Connection entfällt.

Mit einem preload-Hint für die wichtigste Schrift lässt sich der Largest Contentful Paint zusätzlich verbessern:

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

Fazit

Google Fonts darf benutzt werden — aber nicht von Google ausgeliefert. Die Schriften sind frei lizenziert; das Compliance-Risiko ist der Drittanbieter-Request, nicht die Schrift selbst.

← Zurück zu Insights

Fünf Schritte zur compliance-festen Schrifteinbindung,prüfbar und auditierbar.