Wenn dein Theme oder ein Plugin Google Fonts nutzt, wird bei jedem Seitenaufruf der Google Server kontaktiert.
Dieser externe Aufruf sorgt dafür, dass Daten des Seitenbesuchers an Google übertragen werden. Das verstößt gegen die DSGVO und kann zu rechtlichen Problemen führen.
Um diese Probleme zu umgehen, kannst du Google Fonts lokal und somit DSGVO-konform laden.
Es gibt sowohl eine einfache und automatisierte Möglichkeit hierfür, als auch einen manuellen und aufwendigeren Weg.
So, jetzt lass uns deine Google Fonts DSGVO-konform in WordPress nutzen:
Wie du automatisiert Google Fonts DSGVO-konform lokal abrufst [meine Empfehlung]
Wenn du technisch nicht so versiert bist oder einfach Zeit sparen möchtest, kann ich dir diesen Weg empfehlen.
Egal, ob du mit dem WordPress Website erstellen gerade erst fertig geworden bist oder eine schon lange bestehende Website hast, dieser Weg ist in meinen Augen der absolut einfachste.
Und zwar gehen wir diesen Weg mit einem meiner Lieblings-WordPress DSGVO Plugins, und zwar OMGF Pro*, das für dich sämtliche geladenen Google Fonts findet, sie auf deinen Server lädt und von dort ausliefert.
Somit bestehen keine Verbindungen mehr zu den Google Servern und du hast deine Google Fonts lokal gehostet. Zusätzlich hilft das Plugin:
- Cummulative Layout Shift (Eine Metrik der Google Core Web Vitals) durch font-display swapping zu verbessern
- nicht benötigte Schriftarten oder Schriftstärken zu löschen
Falls du Video-Anleitungen bevorzugst, findest du sie hier:
Alternativ geht es hier weiter:
Lass uns gemeinsam Schritt für Schritt das OMGF Pro Plugin* installieren und einrichten. Nach der einmaligen Einrichtung musst du nichts mehr tun, denn OMGF kümmert sich um das lokale Laden der Google Fonts deiner WordPress Installation.
Es gibt zwar auch eine kostenlose Version, sie erkennt allerdings die genutzten Google Fonts nicht so zuverlässig wie die Pro Version.
1. Kaufe und installiere das OMGF Pro Plugin
Für nur 19 € kannst du hier das OMGF Plugin* für eine Website kaufen. Selbst für mehrere Websites ist das Plugin mit 39 € für 10 Website oder 79 € für 100 Websites preiswert.
Nach dem Kauf bekommst du eine E-Mail mit dem Lizenzcode und der Installationsdatei des Plugins. Nun musst du in WordPress unter “Plugins” → “Installieren” zunächst die kostenlose Version installieren. Du findest sie, wenn du “OMGF” in die Suche eingibst.
Anschließend kannst du ebenfalls unter “Plugins” → “Installieren” auf “Plugin hochladen” klicken und die Installationsdatei von OMGF Pro hochladen, welche du über den Link in der E-Mail heruntergeladen hast.
Aktiviere jetzt beide Versionen des Plugins.
2. Google Font Erkennung einstellen
Navigiere nun in den neuen Menüpunkt unter “Einstellungen” → “Optimize Google Fonts”.
Hier findest du alle Einstellungen für OMGF. Zunächst wechselst du in den Reiter “Erkennungseinstellungen” und aktivierst alle vier Checkboxen bei “Erweiterte Verarbeitung (Pro).
Das sorgt dafür, dass das Plugin verschiedenste Arten der Einbindung von Google Fonts in WordPress durchsucht. Da nicht jedes Theme und Plugin die gleichen Einbindungen nutzen, ist die Pro-Version sehr nützlich, um wirklich alle Google Fonts zu finden.
Anschließend speicherst du deine Änderungen ganz unten.
3. Optimiere deine Google Fonts lokal
Wechselst du jetzt in den Reiter “Schriftarten optimieren”, siehst du ganz unten alle von OMGF erkannten Google Fonts.
Diese Fonts werden jetzt bereits lokal geladen!
Du kannst sie zudem noch weiter optimieren, indem du über die Checkboxen in der Spalte “Nicht laden” Fonts auswählst, welche du gar nicht auf deiner Website benötigst. Diese werden dann nicht mehr geladen.
Zudem kannst du über die Checkbox “Vorladen” aktivieren, dass ein gewisser Font vorgeladen wird, was für eine gefühlte Ladezeitverbesserung sorgt. Das macht aber nur bei Fonts Sinn, die above the fold angezeigt werden.
Führst du hier Änderungen durch, musst du sie anschließend über den Button ganz unten speichern.
4. Prüfe, ob alle Verbindungen zu Google Font-Servern gekappt sind
Nachdem du die Einstellungen in OMGF gespeichert hast, solltest du zunächst deinen Cache löschen und kannst anschließend prüfen, ob deine Website weiterhin eine Verbindung zu den Google Font-Servern herstellt.
Öffne dazu am besten einen inkognito-Tab, rufe deine Website auf und mache einen Rechtsklick irgendwo auf deine Website. Klicke dann “Untersuchen” (Google Chrome).
In dem sich öffnenden Fenster kannst du nun auf “Sources” (Chrome) bzw. “Debugger” (Firefox) klicken und solltest jetzt keinen Eintrag mehr sehen, der “fonts.googleapis.com” oder “fonts.gstatic.com” heißt (wie in dem obenstehenden Screenshot zu sehen).
Alternativ: Wie du manuell in WordPress Google Fonts lokal einbindest
Um es kurz im Vorhinein zusammenzufassen, werden wir nun:
- Die Schriftart auswählen und herunterladen
- Den heruntergeladenen Font auf deinen Server hochladen
- Den Font mit einem Code Snippet über deine style.css Datei einbinden
- Per Plugin die Abfragen zum Google Server blocken
Na, das ist doch gar nicht so viel wie gedacht, oder?
Wähle deine Schriftart(en) und lade sie herunter
Es gibt ein tolles Tool, dass dich Google Fonts in ein paar wenigen Klicks in Webfonts umwandeln lässt und dir zusätzlich noch ganz komfortabel den dazu passenden Code ausgibt. Diesen kannst du dann ganz einfach auf deiner WordPress Website einbinden.
Gehe nun also auf den Google Webfonts Helper, gib oben links in der Suche den Namen deiner genutzten Google Font ein, und wähle sie aus der Liste aus. Anschließend kannst du bei “2. Select Styles” auswählen, welche Stärken und Stile dieser Schriftart du benötigst.
Jetzt scrollst du erst einmal kurz ganz runter zu “4. Download files” und klickst auf den Download Button.
Lade den Font auf deinen Server hoch
Nach dem Download musst du die heruntergeladene .zip Datei entpacken. Anschließend hast du auf deinem lokalen Rechner verschiedene Dateien liegen, welche die von dir ausgewählten Stile und Stärken der Schriftart enthalten.
Diese müssen nun auf deinen Webserver hochgeladen werden. Du verbindest dich also per FTP mit deinem Server erstellst am besten einen neuen Ordner für deine Schriften.
Möchtest du es ganz einfach machen, erstellst du in dem Hauptverzeichnis deiner WordPress Installation (das ist dort, wo die ganzen Dateien und die Ordner namens “wp-content”, “wp-admin” und “wp-includes” liegen) einen neuen Ordner und nennst ihn beispielsweise “fonts”.
In diesen Ordner lädst du nun die Dateien hoch, die du gerade eben auf deinem Rechner entpackt hast.
(Lass die FTP Verbindung noch offen, wir brauchen sie gleich nochmal.)
Den Font via Codeschnipsel in der style.css Datei aufrufen
Super, jetzt hast du die Schriftart schon auf deinem Server und musst WordPress, beziehungsweise den Browsern, jetzt nur noch mitteilen, wo die Schriftart liegt und dass sie genutzt werden soll.
Der Google Webfonts Helper zeigt dir bei “3. Copy CSS” einen Code an, der je nach Menge der gewählten Stile und Stärken entweder kurz oder etwas länger ist. Diesen Code musst du nun kopieren und in deiner style.css Datei einfügen.
Die style.css Datei findest du normalerweise unter “wp-content” → “themes” → “dein Child Theme”.
Hier findest du alles rund um (d)ein Child Theme:
So, jetzt wird es aber noch mal kurz technisch:
Am besten sollte der Code in der style.css Datei deines Child-Themes eingefügt werden. Dadurch kannst du weiterhin Updates deines Themes durchführen, ohne dass dieser Code verloren geht. Meistens wird beim Kauf eines Themes nicht nur das Theme mitgeliefert, sondern auch ein Child-Theme. Ist dem so, kannst du es einfach wie ein normales Theme installieren und aktivieren. Keine Sorge, deine Website wird sich dadurch nicht verändern!
Fügst du den Code statt in die style.css deines Child-Themes in die deines Haupt-Themes ein, musst du bei jedem Theme-Update den Code erneut einfügen, da er überschrieben wird.
Gut, weiter gehts.
Den Code fügst du einfach zu Beginn der style.css ein. Am besten nicht in der ersten Zeile, sondern (falls vorhanden) den ersten paar ausgegrauten Zeilen.
So sieht es beispielsweise in der style.css Datei meines Child Themes aus:
So kannst du in WordPress Google Fonts deaktivieren
So, jetzt ist deine Website ready, um die Fonts über deinen eigenen Server abzurufen. Trotzdem wird dein Theme zum aktuellen Zeitpunkt aber noch Anfragen an den Google Server schicken, da dies im Theme oder in Plugins so hinterlegt ist.
Es gibt ein kleines und schlankes Plugin, dass die Verbindung zum Google Server unterbindet.
Installiere dir jetzt “Disable and Remove Google Fonts” und aktiviere es. Es gibt keine Einstellungen, das Plugin funktioniert “Out of the Box”, ohne dass du etwas tun musst.
Ja, das Plugin wurde lange Zeit nicht aktualisiert. Da es keine bekannten Probleme oder Sicherheitslücken gibt, ist das absolut kein Problem.
Prüfe, ob es noch eine Verbindung zum Google Server gibt
Wenn du Chrome oder Firefox nutzt, kannst du ganz einfach einen Rechtsklick irgendwo auf deine Website machen und “Untersuchen” anklicken. Im sich daraufhin öffnenden Fenster wechselst du auf den Reiter “Sources”.
Hier kannst du in der linken Sidebar sehen, zu welchen externen Servern eine Verbindung hergestellt wird.
Zack, schon hast du die Verbindung zu den Google Servern gekappt und lädst deine Schriftart(en) zukünftig über deinen eigenen Server.
Hat bei dir alles funktioniert oder gab es große Hürden?
WordPress Themes ohne Google Fonts
Es gibt sicherlich auch WordPress Themes, die keine Google Fonts nutzen. Die meisten allerdings haben eher die Möglichkeit integriert, die Fonts lokal zu laden.
Beispielsweise kannst du im Kadence Theme einfach im Customizer unter “Performance” den Haken bei “Load Google Fonts locally” setzen, bei GeneratePress deine Fonts lokal einbinden oder auch in OceanWP die “Google fonts from site” Option aktivieren, um die Verbindung zu Google Servern zu kappen.
Ich würde dir allerdings empfehlen, dein Theme nicht alleine danach auszuwählen, ob Google Fonts integriert sind oder nicht. Es gibt viele wichtigere Faktoren und Google Fonts kannst du mit meiner Anleitung oben einfach loswerden.
Unter den abertausenden an WordPress Themes genau die zu finde, welche keine Google Fonts nutzen, ist gar nicht einfach. Die WordPress Standard-Themes allerdings kommen ganz ohne Google Fonts: TwentyTwenty One / Two / Three.
Die DSGVO nervt? Schlage (fast) alle Fliegen mit einer Klappe!
Hier Google Fonts, dort Google Analytics Tracking Opt-In, ach und natürlich auch ein Opt-In für den Facebook Pixel… Ganz ehrlich, die DSGVO kann richtig nerven…
Um gleich mehrere Fliegen mit einer Klappe zu schlagen, möchte ich dir das Plugin “Real Cookie Banner*” empfehlen. Ich nutze es selber auf meiner Website und auch auf den Seiten meiner Kunden.
Das Plugin bietet dir die wichtigsten Möglichkeiten, und lässt dich ein funktionierendes Opt-In für Google Analytics, Facebook Pixel und alle weiteren Cookies & externen Verbindungen auf deiner Website einbauen. Und es hat sogar noch mehr zeitsparende Funktionen, um dir die Anpassung an die DSGVO zu vereinfachen!
Möchtest du weitere Dienste auf deiner Website DSGVO-konform machen?
Wie du in WordPress Google Fonts DSGVO konform einbaust
Wie du den Google Tag Manager mit WordPress verbindest [DSGVO konform]
Wie du Google Analytics mit WordPress verbindest [DSGVO konform]
So fügst du den Facebook Pixel in WordPress ein [DSGVO konform]
Calendly DSGVO-konform in WordPress einfügen
Videos von Vimeo DSGVO-konform in WordPress einfügen
Tracking mit Hotjar DSGVO-konform in WordPress einfügen
ActiveCampaign DSGVO-konform in WordPress einfügen
