Google Fonts lokal einbinden – Anleitung für WordPress

Was sind Google Fonts?

Bei Google Fonts handelt es sich um (Web-)Schriftarten, die von Google kostenlos zur Verfügung gestellt werden.

Warum sind Google Fonts aus Sicht des Datenschutzes bedenklich?

Die Verwendung der Google Fonts an sich ist erst einmal vollkommen unbedenklich. Problematisch wird es dann, wenn die Google Fonts auf der Webseite so eingebettet werden, dass sie direkt von den Google Servern geladen werden. Denn dann wird die IP-Adresse des Nutzers beim Aufruf der Webseite an Google weitergegeben. Da die IP-Adresse zu den personenbezogenen Daten zählt, verstößt diese Art der Einbindung gegen die in Deutschland geltende Datenschutzgrundverordnung (DSGVO). Da sich viele Webseitenbetreiber dessen nicht bewusst waren, gab es eine massive Abmahnwelle, wodurch das Thema in den letzten Monaten stark an Bedeutung gewonnen hat.

Um Google Fonts abmahnsicher nutzen zu können, müssen Webmaster die Schrift lokal auf ihrem Server einbinden. Wie du das in WordPress machst, zeige ich dir in diesem Beitrag.

Woher weiß ich, ob die Google Fonts auf meiner Webseite datenschutzkonform eingebunden sind?

Ob die Einbindung der Google Fonts auf deiner Webseite die Richtlinien der DSGVO erfüllt, kannst du mit dem kostenlosen Google Fonts Checker von CCM19 testen.

Du kannst aber auch über einen Browser wie Google Chrome prüfen, ob die Google Fonts extern geladen werden. Öffne hierfür Google Chrome und drücke die Taste F12.

Handlungsbedarf besteht dann, wenn du nun in der sich öffnenden Konsole eine oder mehrere der folgenden URLs entdeckst:

https://fonts.gstatic.com/
https://fonts.googleapis.com/

So bindest du in WordPress Google Fonts lokal ein (mit Plugin)

Die Verwendung eines Plugins ist die einfachste Lösung, um Google Fonts automatisch lokal auf deinem Server einzubinden. Die beste Erfahrung habe ich mit folgenden Plugins gemacht:

Schritt für Schritt Anleitung

OMGF

Logge dich mit deinen Zugangsdaten im Dashboard deiner WordPress-Webseite ein.
Klicke links im Menü auf den Punkt „Plugins“ und dann auf „Installieren“. Trage rechts in das Suchfeld den Namen des Plugins ein (in diesem Fall OMGF).
Installiere und aktiviere das Plugin.
Nach der Aktivierung des Plugins erscheint unter „Einstellungen“ ein neuer Menüpunkt „Optimize Google Fonts“. Klicke auf den Menüpunkt, scrolle runter und klicke nun einfach auf „Speichern & Optimieren“.
Die Google Fonts sollten nun lokal geladen werden. Überprüfe sicherheitshalber mit dem zuvor erwähnten Tool von CCM19, ob die lokale Einbindung erfolgreich war.

Disable and Remove Google Fonts

Logge dich mit deinen Zugangsdaten im Dashboard deiner WordPress-Webseite ein.
Klicke links im Menü auf den Punkt „Plugins“ und dann auf „Installieren“. Trage rechts in das Suchfeld den Namen des Plugins ein (in diesem Fall Disable and Remove Google Fonts).
Installiere und aktiviere das Plugin.
Nun musst du nichts mehr tun. Das Plugin übernimmt die lokale Einbindung nach der Aktivierung automatisch für dich. Überprüfe sicherheitshalber mithilfe von CCM19, ob die lokale Einbindung erfolgreich war.

Local Google Fonts

Logge dich mit deinen Zugangsdaten im Dashboard deiner WordPress-Webseite ein.
Klicke links im Menü auf den Punkt „Plugins“ und dann auf „Installieren“. Trage rechts in das Suchfeld den Namen des Plugins ein (in diesem Fall Local Google Fonts).
Installiere und aktiviere das Plugin.
Klicke links im WordPress Menü auf „Einstellungen“ und dann auf „Google Fonts“.
Klicke auf den Button „Lokal hosten“.
Falls du ein Cache-Plugin benutzt, leere nun sicherheitshalber den Cache.
Überprüfe mithilfe eines Google Font Checkers, ob die lokale Einbindung erfolgreich war.

Die Google Fonts werden trotzdem noch extern geladen – was nun?

Je nach verwendetem Theme kann die Einbindung der Google Fonts recht hartnäckig sein. Wenn die lokale Einbindung mit einem der empfohlenen Plugins nicht geklappt hat, dann probiere nacheinander die anderen Plugins aus. Manchmal hilft es auch, eine Kombination aus zwei Plugins zu verwenden. Was in deinem Fall hilft, musst du ausprobieren.

Manchmal musst du die lokale Einbindung der Google Fonts zusätzlich auch in deinem Theme aktivieren bzw. die Verwendung von Google Fonts ausschalten. Klicke dich hier durch die Theme-Optionen und überprüfe, ob es eine entsprechende Einstellung gibt.

Oft kommt es vor, dass Webseitenbetreiber andere externe Dienste auf ihrer Webseite laden, die wiederum Google Fonts verwenden. Da die Google Fonts von den externen Ressourcen geladen werden, kannst du diese auch nicht lokal auf deinem Server einbinden. Aus diesem Grund ist die Verwendung einiger externer Dienste aus Sicht der DSGVO kritisch und sollte möglichst vermieden werden. Zu diesen Diensten gehören zum Beispiel:

Google Maps
Google ReCaptcha
YouTube-Videos
Instagram Feeds
Facebook
Google Ads

Solange du diese Dienste auf deiner Webseite verwendest, läufst du ständig Gefahr, abgemahnt zu werden. Deswegen solltest du möglichst Alternativen einsetzen, wenn du nicht ganz darauf verzichten möchtest. Als Alternative zu Google ReCaptcha kannst du beispielsweise Honeypot oder Friendly Captcha setzen. Als Alternative zu YouTube eignet sich Vimeo.

Wenn du auf bestimmte Dienste nicht verzichten möchtest oder kannst, dann solltest du sie zumindest über Borlabs Cookie sperren, sobald ein Nutzer die Cookies ablehnt. Zusätzlich dazu solltest du auch die Verbindung zum Google-Server in Borlabs hinterlegen. Auf der Webseite von Borlabs gibt es eine gute Anleitung, wie du das Laden der Google Fonts steuern kannst.

Kannst du nicht genau lokalisieren, von welchem Dienst die Google Fonts geladen werden, dann deaktiviere nach und nach deine Plugins und überprüfe jedes Mal, ob die Google Fonts immer noch extern geladen werden. Verschwinden die Google Fonts, nachdem du ein bestimmtes Plugin deaktiviert hast, dann solltest du auf das Plugin möglichst verzichten oder in den Einstellungen überprüfen, ob du die Google Fonts deaktivieren kannst.

Meine Schriften werden nicht mehr richtig dargestellt

Manchmal kommt es vor, dass unter Verwendung der oben genannten Plugins deine Schriften nicht mehr richtig dargestellt werden. Wenn das Problem auch nach dem Leeren des Caches bestehen bleibst, musst du leider mit CSS noch etwas nachhelfen.

Gehe hierfür im WordPress Dashboard auf „Design“, „Customizer“ und dann auf „Zusätzliches CSS“.

Gebe für die Überschriften nun folgende Zeilen ein:

h1, h2, h3, h4, h5, h6 {

font-family: “ *trage hier den Namen deiner verwendeten Schriftart ein* „;

}

Für den Fließtext, Verlinkungen und Auflistungen gebe folgendes ein:

p, a, span, ul, li {

font-family: “ *trage hier den Namen der gewünschten Schrift ein*“;

}

Klicke auf „Veröffentlichen“. Nun sollten deine Schriften wieder korrekt dargestellt werden.