Google Fonts lokal in WordPress einbinden

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

Warum Google Fonts ein DSGVO-Problem sind

Im Januar 2022 urteilte ein deutsches Gericht (LG Munchen, Az. 3 O 17493/20), dass das Einbinden von Google Fonts uber den standardmassigen externen Link einen DSGVO-Verstoss darstellt. Das Gericht stellte fest, dass die Ubermittlung der IP-Adresse eines Besuchers an Google ohne vorherige Einwilligung gegen Art. 6 Abs. 1 DSGVO verstosst, da der Websitebetreiber kein berechtigtes Interesse hat, das das Recht des Nutzers auf Datenschutz uberwiegt. Der Seitenbetreiber wurde zur Zahlung von Schadensersatz an den betroffenen Besucher verurteilt.

Dieses Urteil hat einen klaren Prazedenzfall in der EU geschaffen. Seitdem haben zahlreiche Anwaltskanzleien massenweise Abmahnungen an Websitebetreiber verschickt, die Google Fonts noch extern laden. Die Losung ist einfach: hoste die Schriftdateien auf deinem eigenen Server, sodass keine Daten an Google ubermittelt werden. Dieser Ansatz ist vollstandig DSGVO-konform, eliminiert das rechtliche Risiko und verbessert oft auch die Ladegeschwindigkeit.

Google Fonts fur 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. Offne den Google Webfonts Helper und suche nach der benotigten Schriftart (z.B. "Open Sans", "Roboto", "Lato").
2. Wahle die Zeichensatze, die du benotigst. Fur die meisten europaischen Websites reichen "latin" und "latin-ext" aus. Fuge "cyrillic" oder "greek" nur hinzu, wenn dein Inhalt tatsachlich diese Schriften verwendet.
3. Wahle die Schriftstile und -gewichte, die du auf deiner Website nutzt. Gangige Auswahlen sind 400 (regular), 400 italic, 700 (bold) und 700 italic. Vermeide die Auswahl von Gewichten, die du nicht tatsachlich verwendest, da jedes die Dateigresse erhoht.
4. Das Tool generiert fertige @font-face CSS-Regeln. Kopiere diese. Du kannst den Dateipfad-Prafix anpassen, damit er zu deiner Server-Verzeichnisstruktur passt.
5. Lade die ZIP-Datei mit allen ausgewahlten Schriftdateien in modernen Formaten (woff2 und woff) herunter.

Manuelles Self-Hosting Schritt fur 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 uberstehen.

Schritt 2: @font-face CSS hinzufugen

Fuge 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, wahrend 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 ladt. Das geschieht typischerweise durch Dequeuing des Style-Handles. Der Handle-Name variiert je nach Theme, daher musst du moglicherweise deinen HTML-Quellcode inspizieren, um ihn zu finden:

add_action('wp_enqueue_scripts', function() {
    // Gangige 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 Prioritat von 100 stellt sicher, dass dieser Code nach dem Enqueuing der Theme-Styles ausgefuhrt wird. Wenn das Theme einen anderen Handle-Namen verwendet, prufe deinen Seitenquelltext auf ein <link>-Tag mit fonts.googleapis.com und notiere das id-Attribut (entferne das abschliessende -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 moglicherweise das Header-Template bearbeiten oder ein Child-Theme verwenden, um es zu uberschreiben.

Self-Hosting per Plugin

Wenn du Schriftdateien und CSS nicht manuell verwalten mochtest, konnen Plugins den gesamten Prozess automatisieren:

• OMGF (Optimize My Google Fonts): erkennt automatisch auf deiner Website geladene Google Fonts, ladt die Schriftdateien auf deinen Server herunter, generiert lokales @font-face-CSS und entfernt die externen Google-Fonts-Referenzen. Es preloaded Schriften auch fur bessere Performance und verwaltet Cache-Busting. Dies ist die beliebteste Option fur diese spezifische Aufgabe.
• Asset CleanUp (Pro): kann neben allgemeiner Asset-Optimierung auch Google Fonts erkennen und lokal hosten. Es bietet mehr Kontrolle daruber, welche Seiten welche Schriften laden, nutzlich fur Websites, bei denen verschiedene Bereiche unterschiedliche Typografie verwenden.
• Perfmatters: enthalt eine lokale Google-Fonts-Funktion neben anderen Performance-Optimierungstools. Eine gute Wahl, wenn du ein einzelnes Plugin fur mehrere Performance-Verbesserungen mochtest.

font-display: swap verstehen

Die Eigenschaft font-display: swap in deinen @font-face-Regeln ist wichtig fur die Benutzererfahrung und Core Web Vitals. Ohne sie konnen 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 gezahlt werden, und stellt sicher, dass Inhalte auch bei langsamen Verbindungen lesbar sind.

Font-Subsetting fur bessere Performance

Wenn du die Optimierung noch weiter treiben mochtest, ziehe Font-Subsetting in Betracht. Eine vollstandige "Latin Extended"-Schriftdatei enthalt moglicherweise Zeichen fur Sprachen, die du auf deiner Website nie verwendest. Tools wie fonttools (pyftsubset) oder Everything Fonts Subsetter konnen ungenutzte Zeichen entfernen und die Dateigresse erheblich reduzieren. Beispielsweise konnte eine Schriftdatei, die das gesamte Latin Extended abdeckt, 25KB gross sein, aber ein Subset mit nur den fur Englisch und Deutsch verwendeten Zeichen konnte unter 15KB liegen. Fur die meisten Websites sind die vom Google Webfonts Helper angebotenen Zeichensatze bereits ein vernunftiges Subset, daher ist dieser Schritt optional.

Sicherstellen, dass keine externen Font-Anfragen verbleiben

Nach deinen Anderungen ist es wichtig zu uberprufen, dass keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com verbleiben. Offne die Entwicklertools deines Browsers (F12), gehe zum Tab "Netzwerk", lade die Seite neu und filtere nach "font" oder suche nach "googleapis". Prufe mehrere Seiten, nicht nur die Startseite, da manche Themes auf verschiedenen Seitenvorlagen unterschiedliche Schriften laden.

Prufe auch, ob Plugins Google Fonts laden. Manche Page Builder, Slider-Plugins oder Formular-Plugins laden ihre eigenen Google Fonts unabhangig vom Theme. Moglicherweise musst du die Einstellungen jedes Plugins auf eine Option "Google Fonts deaktivieren" oder "Schriften lokal laden" prufen.

Mit InspectWP verifizieren

Fuhre nach deinen Anderungen einen neuen InspectWP-Scan durch. Der DSGVO-Bereich deines Reports zeigt an, ob noch Anfragen an Google-Fonts-Server bestehen. InspectWP pruft 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.