Google Fonts sicher nutzen – Kurzanleitung

Für Unternehmen mit erhöhten Compliance-Anforderungen (DSGVO, BSI-Grundschutz, NIS2, NATO-Lieferantenstatus, VS-NfD-Umfeld).

---

Das Problem in einem Satz

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 in einem Satz

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

---

Anleitung in 5 Schritten

1. Schriften beziehen

Über google-webfonts-helper – 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 auswählen: meist reicht latin, bei deutschen/europäischen Inhalten latin-ext dazunehmen
• Benötigte Weights ankreuzen (nur was wirklich genutzt wird – jede zusätzliche Datei kostet Ladezeit)
• Modern Browsers (woff2) als Format wählen
• ZIP herunterladen

2. Dateien ablegen

Im Projekt einen Ordner anlegen, z.B.:

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

3. CSS einbinden

Das von gwfh generierte Snippet 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.

4. Alle Google-Referenzen entfernen

Häufig übersehene Stellen prüfen:

• <link href="https://fonts.googleapis.com/..."> im HTML
• @import url('https://fonts.googleapis.com/...') in CSS-Dateien
• Tailwind-Configs, Bootstrap-Themes, WordPress-Themes (laden oft Google Fonts per Default)
• Drittanbieter-Widgets, eingebettete Iframes, Tracking-Pixel
• Browser-DevTools → Network-Tab → Filter font und google: darf keine Treffer auf fonts.googleapis.com oder fonts.gstatic.com zeigen

5. Per Content-Security-Policy absichern

Die Regel technisch erzwingen – ein Audit-Nachweis und Schutz vor versehentlich neu eingeschleusten Google-Requests:

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

Damit blockiert der Browser alle externen Fontladeversuche selbst dann, wenn ein Plugin oder Theme heimlich wieder Google referenziert.

---

Quick-Check für Audits

• 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 mehr

---

Bonus: Performance

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 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; der Drittanbieter-Request ist das Compliance-Risiko, nicht die Schrift selbst.