Google Fonts lokal einbinden in Wordpress Beitragsbild Daniel Kaiser Webentwicklung

Google Fonts lokal einbinden in WordPress | Einfache Anleitung – So klappts!

Google Fonts lokal einbinden in WordPress ist gar nicht schwer. Muss aber sein. Warum müssen Schriftarten, wie eine Google Fonts, lokal in meiner Webseite eingebunden werden? Und wie mache ich das? Dazu möchte ich Dir in diesem Artikel kurz die wichtigsten Fragen beantworten und erklären wie Du dazu vorgehen kannst:



Vielleicht interessiert Dich auch:

PHP 7.4 Support Ende – Das solltest Du beachten und tun!


Warum müssen Google Fonts lokal eingebunden werden?

Verwendet Deine Website Schriften von Google, also die sog. Google Fonts, werden diese häufig direkt von einem Google-Server geladen und nicht vom eigenen Webserver. Beim Herstellen dieser Verbindung zum Google-Server werden Daten, wie etwa die IP-Adresse des Websitebesuchers übermittelt. Das stellt seit der Einführung der DSGVO einen Datenschutzverstoß dar, insofern der Webseitenbesucher nicht ausdrücklich zugestimmt hat. Und genau DAS ist leider sehr häufig nicht der Fall und kann dich schnell bares Geld kosten.

Das Landesgericht München I hat im Januar 2022 in einem wegweisenden Urteil nun den Datenschutzverstoß bestätigt (https://www.gesetze-bayern.de/Content/Document/Y-300-Z-GRURRS-B-2022-N-612). Seit dem läuft eine gigantische Abmahnwelle über Deutschland. Es wird in den Abmahnungen immer wieder Bezug auf dieses Urteil genommen und eine Entschädigung von 100€ verlangt. Zahlst Du nicht, droht Dir ein anwaltliches Schreiben und vermutlich weitere Kosten. Wenn Du dem also aus dem Weg gehen möchtest, beachte die folgenden Schritte und binde Deine Schriften sicher ein!

Google Fonts lokal einbinden in WordPress: Wie erkenne ich, ob ich handeln muss?

Ob Deine Webseite Schriften von Google Fonts lädt kannst du sehr einfach mit den folgenden Schritten herausfinden:

  1. Öffne Deine Webseite in einem Browser Deiner Wahl. In diesem Beispiel wird Googles Chrome verwendet. Das Vorgehen ist jedoch queer durch alle Browser sehr einheitlich.
  2. Öffne die Entwickler-Konsole. Dazu drückst Du die F12-Taste oder navigierst über das Menü bei „weitere Tools“ auf „Entwicklertools“.
  3. Navigiere in die Registerkarte „Netzwerk“ und klicke auf den Filter „Schriftart“ (Screenshot 1)
  4. Lade jetzt die Seite neu und sieh dir die geladenen Dateien genau an. In der Spalte URL kannst Du erkennen von welcher Quelle die geladenen Dateien stammen. Hier sollten nur Quellen Deiner eigenen Domain genannt sein. Ist aber, wie im Screenshot 2, eine Datei von etwa fonts.gstatic.com geladen, wird es Zeit zu handeln.
Google Fonts lokal einbinden WordPress Anleitung Step 1
Screenshot 1 – Entwicklerkonsole im Reiter Netzwerk mit Filter auf Schriftarten
Google Font lokal einbinden Quelle der Schriftart Screenshot 2
Screenshot 2 – Schriftart mit Quelle fonts.gstatic.com

Eine Alternative Methode um Handlungsbedarf zu ermitteln ist der kostenlose Google-Font-Checker von sicher3. Diesen findest Du unter https://sicher3.de/google-fonts-checker/
Dort trägst Du einfach deine URL ein und kannst direkt prüfen ob Google Fonts extern geladen werden.
Ich selbst bevorzuge aber immer das manuelle Auslesen, da ich das Ergebnis gerne mit eigenen Augen sehe.

So lädst Du Deine Google Fonts in WordPress lokal

Damit diese Fonts nun nicht mehr von einem Google-, sondern vom eigenen Server geladen werden sind nur wenige Schritte nötig. Wichtig ist: Du musst Admin auf der Webseite sein. Gehe dazu nun wie folgt vor:

Navigiere zunächst in den Admin-Bereich Deiner Webseite und anschschließend zu den Plugins. Klicke auf Installieren und Suche nach dem Plugin: OMGF (OMGF | GDPR Compliant, Faster Google Fonts)
https://de.wordpress.org/plugins/host-webfonts-local/

Plugin OMGF um Google Fonts und Schriften lokal einzubinden mit WordPress
Screenshot 3 – Das Plugin OMGF um Google Schriften lokal einzubinden

Installiere und aktiviere das Plugin nun.

Natürlich gibt es noch weitere Plugin-Alternativen, wie etwa:
https://de.wordpress.org/plugins/local-google-fonts/ oder https://de.wordpress.org/plugins/embed-google-fonts/.

Mein Tipp für die Verwendung von WordPress-Plugins:

Bevor ich ein Plugin installiere achte ich auf diese vier Kriterien um es als brauchbar und seriös einzustufen.

  • Wann wurde das Plugin zuletzt aktualisiert? Wenn es sehr alt ist, lass lieber die Finger davon!
  • Passt die minimal geforderte und die getestete WordPress-Version sowie die verwendete PHP-Version zu Deiner? Wenn nicht könnte die Installation zu einem kritischen Fehler führen.
  • Wie oft wurde das Plugin schon installiert? Plugins mit mehreren Tausend Installationen scheinen gut anzukommen und machen offenbar das was sie sollen!
  • Checke die Bewertungen. Sind sehr viele negative Bewertungen dabei, dann denke darüber nach, ob ein anderes Plugin vielleicht besser geeignet wäre.

Nachdem Du das Plugin nun erfolgreich aktivierst hast navigiere zu dessen Einstellungen. Alles was Du jetzt tun musst ist auf „Starte Optimierung“ zu klicken. Solltest Du ein Caching-Plugin aktiviert haben schalte es aber bitte zunächst ab.

OMGF sucht nun selbstständig nach verwendeten Google Fonts und speichert diese lokal in Deinen Uploads-Ordner ab. Ab sofort wird Deine Seitenbesucher die Schriftart nicht mehr vom Google-, sondern von Deinem Webserver übertragen. Damit ist Deine Seite – in dieser Hinsicht – rechtssicher.

Vergiss bitte nicht das Caching wieder zu aktivieren und teste unbedingt, über die oben beschriebene Methode, ob die Schrift auch wirklich lokal geladen wird. Sollten Probleme beim Google Fonts lokal einbinden in WordPress auftauchen, findest du in den FAQ des Plugins sowie im Netz weitere Debugging-Hilfen.

Dir hat diese Anleitung gefallen oder Du möchtest Feedback abgeben? Dann melde Dich gerne bei mir unter Daniel Kaiser Webentwicklung oder schreibe in den Kommentaren über Deine Google-Font-Erfahrungen.

Schreibe einen Kommentar

Weitere Beiträge

PHP 7.4 Support Ende Beitragsbild
Der Support von PHP 7.4 endet – Was muss ich nun tun?

Der Support von PHP 7.4 endet bald. Und die meisten Webseiten arbeiten mit diesem PHP-Skript. Es wird ständig weiter entwickelt, wobei ältere Versionen irgendwann ihr Lebensende erreichen. Mit PHP-7.4 ist das bald so weit. In diesem Artikel möchte ich Dir erklären was das bedeutet und wie Du nun handeln solltest:

Weiterlesen »