Google Fonts lokal einbinden in WordPress – einfach & schnell mit Plugins

Falls das Thema Google Fonts dir noch nicht so viel sagt, hier eine kleine Einordnung:

Google Fonts sind eine Sammlung von Schriften (sog. Fonts), die von Google kostenlos zur Verfügung gestellt werden, um Schriften im Web darstellen zu können. Google Fonts sind im Web sehr verbreitet. Fast jede Website nutzt diese Fonts, da nur wenige Websitebetreiber lizenzpflichtige Schriften verwenden. Für nahezu jede monetäre Schrift gibt es bei Google ein kostenloses Pendant. Super, oder?

Und woher kommt jetzt diese Abmahnwelle?

Grundsätzlich spricht überhaupt nichts dagegen für seine Website Google Fonts zu nutzen – man muss sie nur datenschutzkonform einbinden und hier liegt das Problem:

In der Regel werden die Fonts nicht nur von Google zur Verfügung gestellt, sondern auch über den Google Server in Webseiten und Software eingebunden. Es besteht zwar auch die Möglichkeit, die Google Fonts herunterzuladen und lokal (direkt und ohne Google Server) einzubinden, dies wird jedoch häufig nicht gemacht. Die Integration direkt über Google ist deutlich schneller und die Website Performance besser, weil weniger Dateien ausgetauscht werden müssen. Am Ende sieht der Website-Besucher keinen optischen Unterschied, wie die Fonts eingebunden wurden.

Warum sind nicht lokal eingebundene Google Fonts ein Problem?

Sind die Google Fonts nicht lokal eingebunden, werden sie über den Google Server abgerufen. Dabei wird die dynamische IP-Adresse des Nutzers an Google übermittelt. So einer Übermittlung muss aber gemäß DSGVO aktiv vorher zugestimmt werden. Und hier haben wir den Salat: Wie soll eine Zustimmung erfolgen, wenn die Website bereits für die Erteilung dieser besagten Zustimmung aufgerufen werden muss? Eine unerlaubte Verbindung zum Google wird bereits zu diesem Zeitpunkt hergestellt.

Ist meine Website betroffen?

Sehr wahrscheinlich ja. Denn aufgrund der weiten Verbreitung von Google Fonts ist fast jeder Nutzer bzw. Webseitenbetreiber betroffen. Standardmäßig sind in Themes und WordPress-Installationen Google Fonts vorinstalliert. Aber auch über eingebundene Plugins können Google-Schriften geladen werden.

Wie kann ich überprüfen, ob meine Website Fonts über den Google Server lädt?

Überprüfung per Fonts-Checker

Der schnellste Weg dies herauszufinden besteht darin, seine Website über den folgenden Link kostenlos auf Google Fonts prüfen zu lassen:

Zum Google Fonts Checker

Achtung: Das Tool überprüft nur die eine hinterlegte Seite. Um wirklich sicher zu sein, musst du jede Seite (Unterseite) einzeln überprüfen. Vergiss nicht Seiten wo z.B. Kontaktformulare, Google Maps oder Videos eingebunden sind. Auch Seiten mit iFrames, die nicht von Google zur Verfügung gestellt werden, solltest du unbedingt prüfen.

Google Fonts überprüfen über die Entwicklertools

Eine weitere Möglichkeit ist die Überprüfung der Fonts mittels Entwicklertools (hier am Beispiel vom Chrome Browser)

So gelangst du zu den Entwicklertools:

Es gibt drei Möglichkeiten, die Entwicklertools zu öffnen:

1. Klicke mit der rechten Maustaste auf eine Seite und wähle „Element untersuchen“ aus.
2. Wähle Anzeigen > Entwickler > Entwicklertools aus.
3. Verwende die Tastenkombination „Alt + Befehlstaste + I“.

In den Entwicklertools klickst du nun auf den Reiter „Netzwerk„. Aktualisiere deine Website, damit du siehst, was alles geladen wird. In der oberen Leiste aktivierst du den Filter „Fonts“. Jetzt zeigt dir Chrome alle Schriftarten an, die geladen werden.

Wenn du mit der Maus über die Schrift fährst, siehst du den Pfad der Schrift. Dieser Pfad sollte deine Website sein und nicht Google 😉

Wie binde ich Google Fonts lokal ein?

Google Fonts können auch ohne Hilfe eines Plugins manuell eingebunden werden. Dazu benötigt man aber ein paar grundlegende Kenntnisse bzgl. Website-Aufbau und Programmierung. Zuerst müssen die Fonts bei Google heruntergeladen und lokal via FTP auf den Website-Server hochgeladen werden. Dann müssen die Stylesheets entsprechend angepasst werden, sodass jetzt auf die lokale Font-Datei verwiesen wird und nicht mehr auf den Google Server. Wem diese Schritte jetzt nur Bahnhof sagen: es gibt auch eine Alternative für WordPress-Seiten: Plugins!

Im Folgenden wollen wir euch zwei Plugins vorstellen, die wir selber nutzen und aus unserer Sicht gut funktionieren. Wir nutzen diese beiden Plugins gerne in Kombination. Das eine sorgt dafür, dass die Fonts lokal geladen werden, das andere unterbindet das Laden von Google Fonts (damit sich z. B. durch Updates keine neuen Fonts einschleichen).

1. Plugin zum Einbinden von Google Fonts > Local Google Fonts
2. Plugin zum Unterbinden von Google Fonts > Disable and Remove Google Fonts

Beide Plugins sind kostenlos.

Local Google Fonts – so funktioniert das Plugin

Local Google Fonts – häufige Fragen

Plugin: Disable and Remove Google Fonts

Dieses Plugin ist in seiner Anwendung sogar noch einfacher. Du musst ein nur installieren und aktiveren. Das war es auch schon.

Die richtige Einbindung von YouTube und Google Maps

Nach der Installation beider Plugins solltest du deine Website nochmal auf Google Fonts checken. Oft verstecken sich in Kontaktformularen (beim ReCaptcha), bei Google Maps oder allgemein beim Einbinden von YouTube-Videos Google Fonts. Häufig lassen sich diese Fonts nur schwer entfernen. Tritt das Problem bei einem Kontaktformular mit ReCaptcha auf, empfiehlt es sich, ein anderes ReCaptcha Tool einzusetzen. Bei Videos und Maps kannst du auch einfach anstatt des iFrames einen Screenshot einbinden, und diesen dann auf den Maps-Eintrag oder das Video verlinken. Solltest du viele Videos auf deiner Website eingebunden haben, dann lohnt sich der Einsetz eines kostenpflichtigen Cookie Banners, wie der Borlab Cookie-Banner der grundsätzlich externe Inhalte blockiert und somit auch keine weiteren Schriften laden zulässt.

Wenn du noch Hilfe beim Einbau von Google Fonts benötigst, stehen unsere Mitarbeitenden von WebMen dir gerne beratend zur Seite > info@webmen.de oder unter 0421 2434940.