So bindest du Google Fonts lokal ein: DSGVO-konform mit WordPress

Google Fonts lokal einbinden? Das macht richtig viel Sinn!

Denn nachdem die Datenschutz-Grundverordnung (DSGVO) schon eine Weile (25. Mai 2018) gültig ist, hat kein Webdesigner (oder Agentur) eine Ausrede mehr, die Google Fonts nicht datenschutzkonform in die eigene Website einzubinden.

Und ja: die Datenschutz-Grundverordnung hat uns Webdesigner fest im Griff. Man kann es hassen oder man kann es lieben – klar ist nur wir haben uns alle dran zu halten. Denn sollte es zu einer Abmahnung kommen, gilt der folgende Spruch garantiert nicht:

»Ich hab das alles gar nicht gewußt«

Aber ich möchte in diesem Artikel nicht über Sinn oder Unsinn der DSGVO diskutieren. Fakt ist, dass Google Fonts (wenn es über den Google Server eingebunden ist) theoretisch Daten eurer Besuche abgreifen kann. Das ist nicht DSGVO-konform!

Deshalb musst du hier aktiv werden und deine Google Fonts lokal einbinden. Das bedeutet, die Schriften deiner Webseite werden nicht mehr über den Google Server geladen, sondern du lädst die Schriftarten auf deine eigene Website hoch und dadurch werden die Schriften lokal geladen. Damit sieht Google nicht mehr die Nutzerdaten.

Google Fonts lokal einbinden – so geht’s

In dieser Schritt-für-Schritt-Anleitung werde ich dir zeigen, wie du deine Google Fonts herausfindest, lokal einbindest und das externe Laden der Google Schriftarten deaktivierst.

Leider ist hier jedes WordPress-Theme anders. Das bedeutet, unsere Anleitung kann nicht 100 % aller Fälle abdecken. Dennoch werde ich versuchen sie so universell zu schreiben, dass du auch mit deinem WordPress-Theme Google Fonts lokal einbinden kannst.

Bevor wir mit der Handarbeit loslegen, die gute Nachricht: Inzwischen gibt es Wege, die dir den kompletten manuellen Aufwand abnehmen.

Der schnellste Weg: OMGF erledigt alles automatisch

Bevor du dich durch die manuelle Anleitung arbeitest, solltest du dir das Plugin OMGF anschauen. Das Plugin erkennt automatisch alle Google Fonts auf deiner Website, lädt sie herunter und schreibt die URLs um – ohne FTP, ohne CSS-Handarbeit. Einfach installieren, aktivieren, fertig.

Für die meisten Websites ist OMGF heute der Standard-Tipp für genau dieses Problem. Trotzdem lohnt es sich, die manuelle Anleitung weiter unten zu lesen – dann verstehst du, was das Plugin im Hintergrund eigentlich macht.

Eingebaute Lösungen: Font Library, Elementor und Themes

Falls du ein Block-Theme nutzt, brauchst du oft gar kein Plugin mehr. WordPress bringt seit Version 6.5 eine eigene Font Library mit: Website-Editor → Stile → Typografie → Schriften verwalten. Google Fonts werden dort per Klick installiert und automatisch lokal gespeichert (im Ordner /wp-content/fonts/).

Auch Elementor kann das von Haus aus: Unter Elementor → Einstellungen → Performance findest du die Option „Load Google Fonts Locally“. Achtung: Seit Elementor 3.32.1 ist diese Option standardmäßig deaktiviert – du musst sie also selbst aktivieren.

Und viele Themes bieten ähnliche Schalter: Astra zum Beispiel hat die Option „Load Google Fonts Locally“ direkt in den Theme-Einstellungen. Wirf also zuerst einen Blick in dein Theme, bevor du ein zusätzliches Plugin installierst.

Übrigens: Falls du die Schriften nicht selbst hosten willst, gibt es mit Bunny Fonts einen EU-gehosteten, trackingfreien Drop-in-Ersatz für die Google-Fonts-API. Bequem – aber eben weiterhin ein Drittanbieter. Lokal bleibt der Goldstandard.

Willst du lieber selbst Hand anlegen (oder verstehen, was da eigentlich passiert), zeigt dir die folgende Anleitung den manuellen Weg.

Benutzte Google Fonts herausfinden

Im ersten Schritt müssen wir natürlich wissen, welche Google Fonts wir ersetzen wollen. Deshalb müssen wir die genutzten Google Fonts identifizieren.

Falls du nicht weißt, welche Google Fonts du benutzt, gibt es mehrere Möglichkeiten, das herauszufinden. Das liegt daran, dass Google Fonts unterschiedlich eingebunden werden können.

Falls du ein extra Plugin benutzt und Google Fonts einzubinden, findest du die Schriftarten natürlich in den Einstellungen des jeweiligen Plugins. Meistens jedoch werden Schriften über ein Theme eingebunden. Hier findest du die eingebunden in Schriften in den Einstellungen des Themes oder über den Customizer (Design → Customizer → Fonts).

Google Fonts in den Theme-Optionen finden

Willst du deine Schriftarten über dein WordPress-Theme eingebunden hast, hängt es davon ab, welches Theme du benutzt. Ich kann hier keine Anleitung für alle WordPress-Theme schreiben, da es von Theme zu Theme unterschiedlich ist, wo die Entwickler die Schriftart Einstellungen platziert haben.

Bei den meisten Themes sollte es sich jedoch ein folgenden drei Orten finden:

• irgendwo unter Design, Typography oder Einstellungen
• in einem eigenen Menüpunkt
• unter Design → Customizer

Falls du ein Page Builder Plugin (wie Elementor) benutzt, kann es auch sein, dass die Schriften an mehreren Orten hinterlegt sind. Achte immer darauf alle Einstellungen zu überprüfen.

Sobald du die jeweiligen Google Fonts gefunden hast, solltest du dir notieren, welche Schriftarten und Schriftschnitte du benutzt.

Google Fonts in einem Plugin finden

Vielleicht hast du deine Google Fonts aber auch über ein Plugin eingebunden. Manchmal passiert das sogar über Plugins, die etwas völlig anderes tun. Das ist natürlich ein schlechter Stil von Entwicklern – bedeutet aber für dich, dass du (wenn du fertig bist) dein Ergebnis auf jeden Fall überprüfen solltest. Damit wirklich keine Google Fonts mehr geladen werden.

Falls du nicht mehr weißt, ob du Google Schriften über ein Plugin eingebunden hast, schau doch einfach mal durch deine Plugin Liste und überprüfe, ob eins der folgenden Plugins dabei ist:

• Easy Google Fonts (verwaist – seit Jahren kein Update mehr, solltest du ersetzen)
• WP Google Fonts (wurde inzwischen aus dem WordPress-Verzeichnis entfernt – falls es bei dir noch läuft, runter damit)
• Google Maps, reCaptcha und andere Google Dienste

Du findest dann die jeweils eingesetzte Schriftart in den Einstellungen des Plugins.

Falls du Google Maps oder andere Google Dienste eingesetzt werden externe Schriftart eingeladen. Hier ist es meist nur sehr schwer möglich diese zu deaktivieren. Deshalb solltest du diese Skripte und iFrames komplett aus deiner Webseite entfernen.

Google Fonts über die Entwicklerkonsole finden

Königsweg (hier wirst du alle Schriftarten finden) ist über die Entwicklerkonsole. Dies hat den Vorteil, dass du hier keine Schriftarten übersehen kannst, da in der Entwicklerkonsole gezeigt wird, welche Google Fonts geladen werden.

Um die Entwicklerkonsole aufzurufen, klickst du auf deiner eigenen Website die rechte Maustaste und wählst dann „Element untersuchen“. Übrigens gibt es die Entwicklerkonsole in Chrome sowie auch in Firefox.

Für Chrome: Klicke den Tab Network. Aktualisiere nun deine Website, damit du siehst, was alles geladen wird. In der oberen Leiste aktivierst du den Filter „Fonts“. Nun zeigt dir Chrome alle Schriftarten an, die geladen werden.

Sobald du hier auf eine Schriftart klickst, siehst du den Pfad, aus welchem diese Schriftart geladen wird.

In meinem Beispiel habe ich die Fonts bereits lokal eingebunden und die Schriftart wird über meine Domain geladen.

Benötigte Google Fonts herunterladen

Nachdem du nun weißt, welche Google Fonts du benutzt, solltest du diese herunterladen, um die Google Fonts lokal auf deinem Web Server einzubinden.

Natürlich kannst du alle Google Fonts auch bei Google herunterladen. Allerdings benötigst du für die lokale Einbindung der Google Fonts bestimmte Dateitypen.

Hierfür gibt das tolle kleine Tool Google Webfonts Helper von Mario Ranftl, welches automatisch die benötigten Dateitypen für die jeweiligen Google Fonts zur Verfügung stellt:

https://gwfh.mranftl.com/fonts

Und deine benötigte Schrift herunterzuladen, gibst du einfach in das Suchfeld (oben links in der Ecke) die gewünschte Schrift ein. Danach wählst du die jeweiligen Zeichensätze und Schriftschnitte aus. Lass dabei die Voreinstellung „Modern Browsers“ aktiviert – damit bekommst du nur das WOFF2-Format, und mehr brauchst du für moderne Browser nicht.

Unter dem Punkt 3 solltest du noch den Dateipfad angeben, indem du die Schriften später auf deinen Server laden solltest. Das kleine Tool wird die CSS Datei dahingehend anpassen.

Im vierten Schritt lädst du dir die Dateien herunter.

Solltest du mehrere Schriftarten auf deiner Website nutzen, kannst du die hier beschriebenen Schritte natürlich beliebig oft wiederholen. Das Google Webfonts Helper Tool wird dir immer gute Dienste leisten :)

Google Fonts auf deinen Server hochladen

Nachdem du dir nun die Schriftarten heruntergeladen hast, wirst du eine ZIP-Datei auf deinem Computer finden. Diese enthält neben der CSS-Datei deine Schrift im WOFF2-Format. Nur falls du im Webfonts Helper „Historic Support“ ausgewählt hast, liegen zusätzlich ältere Formate (EOT, SVG, WOFF, TTF) bei – die brauchst du heute aber nicht mehr.

Die Dateien solltest du auf deinen eigenen Server hochladen. Dafür nutzt du ein FTP Programm, um dich mit deinem Webspace zu verbinden. Achte hier darauf, dass du die Schriften in das vorher definierte Verzeichnis hochlädst.

CSS auf deiner Website anpassen

Du hast es fast geschafft. Nachdem du die Google Schriften auf deinem eigenen Server abgelegt hast, solltest du die Schriftarten noch in deine eigene CSS einbinden. Dafür hat dir das Google Webfonts Helper Tool bereits den nötigen CSS Code geliefert.

Binde diesen Code einfach in die style.css-Datei ein. Achte jedoch darauf, dass du ein Child-Theme verwendest, damit die notwendigen Änderungen auch nach dem Update deines WordPress-Themes noch bestehen bleiben.

Falls du noch kein Child-Theme verwendest, solltest du das unbedingt nachholen!!!

Verbindung zu Google Fonts deaktivieren

Nun musst du noch die Verbindung zum Google Server trennen, da wir ja die Schriften lokal eingebunden haben.

Falls du deine Schriften über ein Plugin (z.B. Easy Google Fonts) eingebunden hattest, reicht es dieses zu deaktivieren. Falls du die Google Fonts jedoch über ein WordPress-Theme eingebunden hast, versuche die Schrift-Optionen im Theme zu löschen.

Mit Plugins

Alternativ gibt es natürlich auch Plugins, die die Verbindung zu Google kappen. Und das Ganze per Knopfdruck.

Hier gibt es verschiedene Plugins, das externe Laden von Google Schriften deaktivieren können. Falls du bereits Autoptimize nutzt (gutes Plugin, um Ladezeiten zu optimieren), kannst du damit auch Google Fonts entfernen:

Einstellungen → Autoptimize → Extras → Google Fonts entfernen

Solltest du Perfmatters nutzen, findest du auch in diesem Plugin Einstellungen, um Google Fonts zu deaktivieren:

Im Untermenü „Fonts“ findest du den Punkt „Disable Google Fonts“. Noch besser: Dort gibt es inzwischen auch die Option „Local Google Fonts“ – damit hostet Perfmatters deine Google Fonts per Klick gleich selbst.

Solltest du keines der oben genannten Plugins verwenden, kannst du ein Plugin installieren. Dazu nutzt du einfach eines der folgenden Plugins:

• Disable and Remove Google Fonts
• OMGF (deaktiviert nicht nur die Verbindung, sondern hostet die Fonts gleich lokal)

Installiere das Plugin und aktiviere es – eine Konfiguration ist nicht notwendig.

Mit Snippet

Falls die oben genannten Plugins dir nicht helfen konnten, kannst du auch ein Code Snippet in die functions.php deines Child-Themes integrieren:

function removeGoogleFonts(){
global $wp_styles;
$regex = '/fonts\.googleapis\.com\/css2?\?family/i';
foreach($wp_styles->registered as $registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);

Der Regex erfasst übrigens auch die neuere Google Fonts API (css2) – ältere Versionen dieses Snippets matchen nur die alte css?family-URL und lassen moderne Einbindungen durchrutschen. Das sollte bei vielen klassischen Themes funktionieren. Prüfe danach aber unbedingt, ob wirklich keine Google Fonts mehr geladen werden – falls das Snippet nicht greift, ist OMGF die bequemere Lösung.

Prüfe, ob alle Google Fonts lokal geladen werden

Du hast es fast geschafft! Im letzten Schritt solltest du noch überprüfen, ob wirklich alle Google Fonts lokal eingebunden sind. Dafür öffnest du die Entwicklerkonsole deines Browsers und schaust im Tab „Network“ mit dem Filter „Fonts“, von wo die Google Schriften geladen werden.

Achte darauf auch den Cache zu löschen, damit deine Website auch den aktuellen CSS Code verwendet.

Google Fonts lokal einbinden Fazit

Durch die DSGVO du als Webmaster gewissermaßen dazu gezwungen, Google Fonts lokal einzubinden. Die gute Nachricht: Der alte Nachteil, dass lokale Fonts die Ladezeit verschlechtern könnten, gilt heute nicht mehr. Seit Chrome mit Version 86 die Cache-Partitionierung eingeführt hat, gibt es den geteilten Browser-Cache des Google-CDN schlicht nicht mehr. Lokal eingebundene Schriften sind dadurch in der Regel sogar schneller – der zusätzliche DNS- und TLS-Handshake zum Google-Server entfällt. Du bekommst also DSGVO-Konformität und bessere Performance in einem.

Einige Webmaster haben sich aufgrund von Ladezeitoptimierung sowie der DSGVO dazu entschlossen, Standard-Systemschriften zu benutzen.

Ich persönlich halte davon nicht viel. Ein Webdesign lebt von der Typografie. Nicht nur für unsere Webdesign Dresden Projekte setzen wir deshalb auf lokale Google Fonts. Hier auf Standard-Systemschriften zu setzen, finde ich ästhetisch sehr fragwürdig.

Klar geht es auch immer um Ladezeit und damit auch und das Nutzererlebnis – allerdings sollte sich das Look-and-Feel deiner Website auch gut anfühlen.

Standardschriften wie Arial finde ich persönlich hässlich. Schließlich war es ein langer Weg zu den Webfonts.

Früher gab es eben nur Arial und Verdana als Schriftart für das Web. Heute bieten sich den Webdesigner hier viel größere Möglichkeiten. Auch Google hat mit seiner Schriftart Bibliothek dazu beigetragen, das Web typografischer zu machen.

Als Webdesigner solltest du diese Möglichkeit nutzen.