Google Fonts lokal in WordPress einbinden

Wenn deine WordPress-Website Google Fonts von fonts.googleapis.com lädt, sendet der Browser jedes Besuchers eine Anfrage an Googles Server. Diese Anfrage enthält die IP-Adresse des Besuchers, den User Agent, die Referrer-URL und weitere Metadaten. Google erhält diese Daten bei jedem einzelnen Seitenaufruf, was ein erhebliches Datenschutzproblem nach europäischem Recht darstellt.

Warum Google Fonts ein DSGVO-Problem sind

Im Januar 2022 urteilte ein deutsches Gericht (LG München, Az. 3 O 17493/20), dass das Einbinden von Google Fonts über den standardmäßigen externen Link einen DSGVO-Verstoß darstellt. Das Gericht stellte fest, dass die Übermittlung der IP-Adresse eines Besuchers an Google ohne vorherige Einwilligung gegen Art. 6 Abs. 1 DSGVO verstößt, da der Websitebetreiber kein berechtigtes Interesse hat, das das Recht des Nutzers auf Datenschutz überwiegt. Der Seitenbetreiber wurde zur Zahlung von Schadensersatz an den betroffenen Besucher verurteilt.

Dieses Urteil hat einen klaren Präzedenzfall in der EU geschaffen. Seitdem haben zahlreiche Anwaltskanzleien massenweise Abmahnungen an Websitebetreiber verschickt, die Google Fonts noch extern laden. Die Lösung ist einfach: Hoste die Schriftdateien auf deinem eigenen Server, sodass keine Daten an Google übermittelt werden. Dieser Ansatz ist vollständig DSGVO-konform, eliminiert das rechtliche Risiko und verbessert oft auch die Ladegeschwindigkeit.

Google Fonts für Self-Hosting herunterladen

Der einfachste Weg, die richtigen Schriftdateien mit dem passenden CSS zu bekommen, ist das Tool Google Webfonts Helper von Mario Ranftl. So verwendest du es:

1. Öffne den Google Webfonts Helper und suche nach der benötigten Schriftart (z. B. „Open Sans", „Roboto", „Lato").
2. Wähle die Zeichensätze, die du benötigst. Für die meisten europäischen Websites reichen „latin" und „latin-ext" aus. Füge „cyrillic" oder „greek" nur hinzu, wenn dein Inhalt tatsächlich diese Schriften verwendet.
3. Wähle die Schriftstile und -gewichte, die du auf deiner Website nutzt. Gängige Auswahlen sind 400 (regular), 400 italic, 700 (bold) und 700 italic. Vermeide die Auswahl von Gewichten, die du nicht tatsächlich verwendest, da jedes die Dateigröße erhöht.
4. Das Tool generiert fertige @font-face CSS-Regeln. Kopiere diese. Du kannst den Dateipfad-Präfix anpassen, damit er zu deiner Server-Verzeichnisstruktur passt.
5. Lade die ZIP-Datei mit allen ausgewählten Schriftdateien in modernen Formaten (woff2 und woff) herunter.

Manuelles Self-Hosting Schritt für Schritt

Schritt 1: Schriftdateien hochladen

Erstelle ein fonts-Verzeichnis in deinem Theme- oder Child-Theme-Ordner und lade die heruntergeladenen Schriftdateien dorthin hoch:

/wp-content/themes/dein-theme/fonts/
    open-sans-v40-latin-regular.woff2
    open-sans-v40-latin-regular.woff
    open-sans-v40-latin-700.woff2
    open-sans-v40-latin-700.woff

Wenn du ein Child-Theme verwendest, platziere die Schriften im Child-Theme-Verzeichnis, damit sie Updates des Parent-Themes überstehen.

Schritt 2: @font-face CSS hinzufügen

Füge das vom Google Webfonts Helper generierte CSS in das Stylesheet deines Themes oder eine benutzerdefinierte CSS-Datei ein. Stelle sicher, dass du font-display: swap setzt, damit Text sichtbar bleibt, während die Schriften laden:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}

Schritt 3: Externe Google-Fonts-Referenz entfernen

Du musst verhindern, dass dein Theme Schriften von fonts.googleapis.com lädt. Das geschieht typischerweise durch Dequeuing des Style-Handles. Der Handle-Name variiert je nach Theme, daher musst du möglicherweise deinen HTML-Quellcode inspizieren, um ihn zu finden:

add_action('wp_enqueue_scripts', function() {
    // Gängige Handle-Namen, die von Themes verwendet werden
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');

    // Manche Themes verwenden andere Handles
    wp_dequeue_style('flavor-google-fonts');
    wp_deregister_style('flavor-google-fonts');

    // Divi Theme
    wp_dequeue_style('divi-fonts');
    wp_deregister_style('divi-fonts');
}, 100);

Die Priorität von 100 stellt sicher, dass dieser Code nach dem Enqueuing der Theme-Styles ausgeführt wird. Wenn das Theme einen anderen Handle-Namen verwendet, prüfe deinen Seitenquelltext auf ein <link>-Tag mit fonts.googleapis.com und notiere das id-Attribut (entferne das abschließende -css, um den Handle-Namen zu erhalten).

Manche Themes hardcoden den Google-Fonts-Link direkt im Template-Header, anstatt wp_enqueue_style zu verwenden. In diesem Fall musst du möglicherweise das Header-Template bearbeiten oder ein Child-Theme verwenden, um es zu überschreiben.

Self-Hosting per Plugin

Wenn du Schriftdateien und CSS nicht manuell verwalten möchtest, können Plugins den gesamten Prozess automatisieren:

• OMGF (Optimize My Google Fonts): erkennt automatisch auf deiner Website geladene Google Fonts, lädt die Schriftdateien auf deinen Server herunter, generiert lokales @font-face-CSS und entfernt die externen Google-Fonts-Referenzen. Es preloadet Schriften auch für bessere Performance und verwaltet Cache-Busting. Dies ist die beliebteste Option für diese spezifische Aufgabe.
• Asset CleanUp (Pro): kann neben allgemeiner Asset-Optimierung auch Google Fonts erkennen und lokal hosten. Es bietet mehr Kontrolle darüber, welche Seiten welche Schriften laden, nützlich für Websites, bei denen verschiedene Bereiche unterschiedliche Typografie verwenden.
• Perfmatters: enthält eine lokale Google-Fonts-Funktion neben anderen Performance-Optimierungstools. Eine gute Wahl, wenn du ein einzelnes Plugin für mehrere Performance-Verbesserungen möchtest.

font-display: swap verstehen

Die Eigenschaft font-display: swap in deinen @font-face-Regeln ist wichtig für die Benutzererfahrung und Core Web Vitals. Ohne sie können Browser Text verstecken, bis die Schrift fertig geladen ist (bekannt als FOIT, Flash of Invisible Text). Mit swap zeigt der Browser sofort Text mit einer Fallback-Systemschrift an und ersetzt sie dann, sobald die benutzerdefinierte Schrift geladen ist. Das verhindert, dass Layout-Verschiebungen gegen deinen Cumulative Layout Shift (CLS)-Score gezählt werden, und stellt sicher, dass Inhalte auch bei langsamen Verbindungen lesbar sind.

Font-Subsetting für bessere Performance

Wenn du die Optimierung noch weiter treiben möchtest, ziehe Font-Subsetting in Betracht. Eine vollständige „Latin Extended"-Schriftdatei enthält möglicherweise Zeichen für Sprachen, die du auf deiner Website nie verwendest. Tools wie fonttools (pyftsubset) oder Everything Fonts Subsetter können ungenutzte Zeichen entfernen und die Dateigröße erheblich reduzieren. Beispielsweise könnte eine Schriftdatei, die das gesamte Latin Extended abdeckt, 25 KB groß sein, aber ein Subset mit nur den für Englisch und Deutsch verwendeten Zeichen könnte unter 15 KB liegen. Für die meisten Websites sind die vom Google Webfonts Helper angebotenen Zeichensätze bereits ein vernünftiges Subset, daher ist dieser Schritt optional.

Sicherstellen, dass keine externen Font-Anfragen verbleiben

Nach deinen Änderungen ist es wichtig zu überprüfen, dass keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com verbleiben. Öffne die Entwicklertools deines Browsers (F12), gehe zum Tab „Netzwerk", lade die Seite neu und filtere nach „font" oder suche nach „googleapis". Prüfe mehrere Seiten, nicht nur die Startseite, da manche Themes auf verschiedenen Seitenvorlagen unterschiedliche Schriften laden.

Prüfe auch, ob Plugins Google Fonts laden. Manche Page Builder, Slider-Plugins oder Formular-Plugins laden ihre eigenen Google Fonts unabhängig vom Theme. Möglicherweise musst du die Einstellungen jedes Plugins auf eine Option „Google Fonts deaktivieren" oder „Schriften lokal laden" prüfen.

Mit InspectWP verifizieren

Führe nach deinen Änderungen einen neuen InspectWP-Scan durch. Der DSGVO-Bereich deines Reports zeigt an, ob noch Anfragen an Google-Fonts-Server bestehen. InspectWP prüft Verbindungen sowohl zu fonts.googleapis.com (das CSS) als auch zu fonts.gstatic.com (die Schriftdateien selbst). Wenn alle Schriften korrekt selbst gehostet werden, sollte keine der beiden Domains in der Liste externer Ressourcen erscheinen.