Wie du in WordPress Google Fonts DSGVO-konform einbaust

Jonas Tietgen

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:

Google Fonts DSGVO-konform lokal laden in WordPress – die 10 Minuten Anleitung

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

OMGF Plugin Titelbild

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

Google Font Erkennung in OMGF Pro aktivieren

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

Google Fonts lokal laden und optimieren in OMGF

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

Google Fonts prüfen

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:

  1. Die Schriftart auswählen und herunterladen
  2. Die heruntergeladene Font auf deinen Server hochladen
  3. Den Font mit einem Code Snippet über deine style.css Datei einbinden
  4. 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

Der Google Webfonts Helper
Mit dem Google Webfonts Helper erstellst du ganz einfach die benötigten Webfonts für deine Website.

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.)

In WordPress Google Fonts hochladen
So sollte es aussehen, wenn du die Schriftart-Dateien in einen eigenen Ordner hochlädst.

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:

Code in der style.css zum Aufruf der Google Font
So sieht die style.css nach dem Einfügen des Codes in etwa 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.

Fonts werden über den Google Server geladen (Console)
So sollte es nicht aussehen: Fonts werden über den Google Server geladen.
Google Fonts lokal abrufen
So sollte es aussehen: keine Abrufe über den Google Server.

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?

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


Jonas Tietgen

Dein WordPress Ninja mit 10+ Jahren Erfahrung, Gründer von WP Ninjas und SEO Nerd.

Jonas hilft Solopreneuren, ihre WordPress Websites selber überarbeiten, pflegen und optimieren zu können.

Schon seit er 14 ist, baut er Websites mit WordPress und arbeitet Jahren täglich mit WordPress. Dadurch hat er Erfahrung mit so ziemlich jedem Theme und Plugin, kennt WordPress auswendig und toppt das Ganze mit einer Liebe zu Webdesign (inklusive Webdesign-Studium) und SEO.

In über 120 Tutorials stellt er dir in seinem Blog sein gesamtes Wissen zur Verfügung, erweitert dein SEO-Wissen in seinem Search Effect Podcast und unterstützt dich in Coachings und über seinen beliebten Mitgliederbereich.

Abseits von WordPress nerdet Jonas gerne über Gesundheit ab, macht viel Krafttraining und weiteren Sport und baut immer wieder spannende Website-Projekte wie das HomeGym-HQ auf.


46 Plugins & Tools, dank denen ich 20.000 Besucher monatlich bekomme!

Das WordPress Toolkit kostenlos für dich

Abonniere meine exklusiven WordPress Tipps, News und mein Experten-Wissen, das ich sonst nirgends teile!

 

...und sichere dir das WordPress Toolkit kostenlos!

Nach der Willkommenssequenz (5 Mails) kommen die E-Mails im Normalfall 1x / Woche. Du kannst dich natürlich jederzeit abmelden und bekommst keinen Spam! Datenschutz

Google Fonts DSGVO-konform
lokal laden mit nur wenigen Klicks

Das OMGF Pro Plugin unterstützt dich, indem es die genutzten Google Fonts lokal lädt, optimiert und somit DSGVO-konform macht.

WordPress Google Fonts lokal laden Beitragsbild

Google Fonts DSGVO-konform
lokal laden mit nur wenigen Klicks

Das OMGF Pro Plugin unterstützt dich, indem es die genutzten Google Fonts lokal lädt, optimiert und somit DSGVO-konform macht.

WordPress Google Fonts lokal laden Beitragsbild
WordPress Cookie Plugin von Real Cookie Banner