Google Fonts deaktivieren & lokal laden in WordPress – die einfache Anleitung für Einsteiger

WordPress Google Fonts lokal laden Beitragsbild

Meine Meinung

Das OMGF Pro Plugin ist eines der besten Plugins, das ich kenne. Es sichert dich gegen Abmahnungen wegen der Einbindung von Google Fonts ab, lädt sie automatisch lokal und kappt alle Verbindungen zu den Google Servern.

Wenn du auf deiner WordPress Website Google Fonts nutzt, solltest du sie aus datenschutzgründen lieber deaktivieren und laden.

Das Problem ist, dass wenn ein Theme oder Plugin Google Fonts nutzt, bei jedem Seitenaufruf Google Server kontaktiert werden.

Dieser externe Aufruf sorgt dafür, dass die IP Adresse des Besuchers an Google übertragen wird. Das verstößt gegen die DSGVO und kann zu Abmahnungen führen.

Leider reicht es auch nicht aus, Google Fonts mit einem Cookie-Plugin in das Cookie-Banner aufzunehmen.

Um diese Probleme zu umgehen, kannst du Google Fonts deaktivieren, 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 & deaktivierst [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 lokal 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 deaktivieren und anschließende 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 deaktiviert 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 oben stehenden Screenshot zu sehen).

Alternativ: Wie du Google Fonts lokal in WordPress einbindest & die Verbindung zu Google Fonts deaktivierst

Um es kurz im Vorhinein zusammenzufassen, werden wir nun:

  1. Die Schriftart auswählen und herunterladen
  2. Den heruntergeladenen 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?

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

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

3. 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„.

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.

4. Die Verbindung zu Google Fonts Servern deaktivieren

So, jetzt ist deine Website ready, um die Fonts über deinen eigenen Server abzurufen. Trotzdem wird deine Website 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 „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 deaktiviert 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 einfach loswerden.

Unter den Abertausenden an WordPress Themes genau die zu finden, welche keine Google Fonts nutzen, ist gar nicht einfach. Die WordPress Standard-Themes allerdings kommen ganz ohne Google Fonts: TwentyTwenty One / Two / Three.

Häufig gestellte Fragen zu Google Fonts

Setzen Google Fonts auch Cookies?

Nein, Google Fonts setzen keine Cookies. Werden die Fonts von den Google Servern geladen, wird lediglich die IP-Adresse des Seitenbesuchers übertragen.

Sorgen lokale Google Fonts für schlechtere Ladezeiten?

Lokale Google Fonts sorgen nicht für schlechtere Ladezeiten – im Gegenteil. Werden die Schriftarten vom eigenen Server geladen, muss nicht erst eine Verbindung zu den Google Servern hergestellt werden. Der Unterschied in der Ladezeit ist allerdings kaum zu merken.

Welche Nachteile hat es, Google Fonts lokal einzubinden?

Die Nachteile, Google Fonts lokal einzubinden, bestehen in erster Linie aus dem Aufwand und möglichen Kosten der Umsetzung. Zudem werden beim lokalen Abruf nicht die neuesten Versionen der Fonts geladen, aber das ist in meinen Augen zu vernachlässigen.

Woher weiß ich, ob ich Google Fonts nutze?

Du kannst deine Website entweder durch einen Google Fonts Checker laufen lassen, oder in der Entwickler-Konsole deines Browsers nachschauen. Öffne in Google Chrome die Entwickler-Konsole und klicke anschließend auf „Sources“. Stehen dort die Verbindungen zu fonts.googleapis.com oder fonts.gstatic.com, nutzt du Google Fonts.


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 seit 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, sowie dem Keyword-Magic-Workshop 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 bambuslife.de oder wattlife.de 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 Begrüßungsmail 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