Google Fonts lokal einbinden — Schritt-für-Schritt-Anleitung

Externe Schrift-CDNs sind technisch elegant, aber datenschutzrechtlich problematisch. Wer auf Nummer sicher gehen will, hostet Schriften lokal. Diese Anleitung zeigt drei Wege — vom Drei-Zeilen-Snippet für statische Sites bis zur WordPress-Variante.

1. Schrift-Dateien beschaffen

Auf fonts.google.com findest du jede Schrift mit ihren Stilen. Für die lokale Einbindung brauchst du das WOFF2-Format (kleinste Dateigröße, hervorragende Browser-Unterstützung). Das einfachste Werkzeug zum Download ist der google-webfonts-helper (gwfh.mranftl.com): Schrift wählen, gewünschte Stile, „Modern Browsers“ → Zip mit allen Dateien herunterladen.

Tipp: Lade nur die Stile, die du wirklich brauchst. Eine typische Site benötigt 400, 500 und 700 — nicht alle neun Strichstärken.

2. CSS schreiben

Lege die WOFF2-Dateien unter /assets/fonts/ ab und ergänze in deiner Stylesheet-Datei pro Stil eine @font-face-Regel:

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

Der Schlüssel font-display: swap sorgt dafür, dass beim Laden zunächst eine System-Schrift angezeigt wird, bis die eigene Schrift bereit ist — gut für die wahrgenommene Performance.

3. Den alten Google-Aufruf entfernen

In deinem HTML-Head darf kein <link href="https://fonts.googleapis.com/…"> mehr stehen. Auch @import url(https://fonts.googleapis.com/…) in CSS-Dateien muss raus. Den Status prüfst du danach am bequemsten direkt mit dem Scanner auf googlefontschecker.de.

WordPress-spezifisch

In WordPress kommen Aufrufe an fonts.googleapis.com häufig nicht aus dem Theme, sondern aus drei anderen Quellen:

• Page-Builder (Elementor, WPBakery, Divi) liefern oft eigene Schrift-Einstellungen, die zur Laufzeit Schriften vom CDN ziehen. Prüfe die Einstellungen unter „Theme Style“ oder „Global Settings“.
• Gutenberg seit Core 6.x hostet Schriften lokal, sofern das Theme die Font Library nutzt.
• Plugins wie Contact-Form-7-Themes, Slider-Plugins oder Cookie-Banner können eigene Schrift-Aufrufe einschleusen.

Ein Hardening-Snippet im Theme blockt verbliebene Aufrufe als Sicherheitsnetz:

add_filter("style_loader_src", function ($src) {
  if ($src && stripos($src, "fonts.googleapis.com") !== false) {
    return false;
  }
  return $src;
}, 100);

Performance-Auswirkungen

Lokal gehostete Schriften sind in modernen Setups nicht langsamer als das CDN. Studien von 2023 und 2024 zeigen: Wenn dein Hosting HTTP/2 oder HTTP/3 spricht, deine Schrift-Datei mit preload annonciert ist und du Brotli-Kompression nutzt, sind die Unterschiede vernachlässigbar — bei Erstbesuchern oft sogar zugunsten der lokalen Variante, weil ein zusätzlicher DNS-/TLS-Roundtrip wegfällt.

Re-Check

Nach der Umstellung lohnt ein Re-Scan mit dem Google Fonts Checker. Sollte er weiterhin rot leuchten, ist meistens noch ein Plugin oder eine Inline-Style-Regel die Ursache. Im Detail-Report siehst du die genaue Fundstelle.