Anleitung: Google Fonts lokal nutzen

anleitung google fonts lokal einbinden

Viele WordPress Themes nutzen den Service von Google Fonts, um euch für die Websites eine große Auswahl an verschiedenen Schriften anzubieten. Das ist sehr komfortabel. Aber es bestand schon seit längerem der Verdacht, dass das Laden der Schriften von der Google-Fonts-Plattform datenschutzwidrig sein müsste.

Leider hat das LG München am 20.01.2022 (Az. 3 O 17493/20) diesen Verdacht bestätigt und entschieden, dass eine Einbindung von Google Fonts, trotz Berufung auf ein berechtigtes Interesse, datenschutzwidrig ist, da bei dem Abruf der Google Fonts die IP-Adresse der Besucher*innen an Google weitergegeben wird.

Das bedeutet, dass ihr Google-Fonts-Einbindungen ab sofort blockieren und durch eine lokale Einbindung der Fonts ersetzen solltet. Wie das gelingt, zeige ich euch.

Was sind Google Fonts?

Google Fonts ist ein Dienst von Google, der über 1.300 verschiedene Schriftarten zu freien Verwendung bereitstellt. Dabei gibt es die Option, die Schrift beim Aufruf der Website über den Server von Google zu laden. Das ist sehr bequem. Leider wird bei diesem Aufruf eben auch die IP-Adresse der Besucher*innen mitgesendet.

Aber es besteht auch die Möglichkeit, Google Fonts lokal auf dem eigenen Server zu speichern und von da zu laden. Damit ist die Kommunikation zum Google-Server abgeschnitten und ihr seid beim Datenschutz auf der sicheren Seite.

Woher werden die Schriften geladen?

Aber wie erkennt ihr, ob und welche Schriften von wo geladen werden? Direkt im Browser! Mit einem Rechtsklick auf eine Textstelle eurer Website öffnet sich ein Kontextmenü. Dort gibt es einen Punkt „Untersuchen“ oder ähnlich (die genaue Bezeichnung variiert von Browser zu Browser). Und mit diesem Punkt gelangt ihr in den technischen Unterbau.

Im folgenden Video seht ihr die Untersuchung im Chrome Browser. Dort sucht ihr den Reiter „Netzwerk“ und ladet die Website ein erneutes Mal. Ihr seht nun die Ressource der Schriften. In meinem Fall ist es ein lokaler Ordner auf meinem Server. Steht dort aber als Ressource fonts.googleapis.com oder fonts.gstatic.com, so solltet ihr handeln.

Google Fonts blockieren

Da das Problem nicht nur für uns durch die DSGVO relevant ist, sondern auch die Performance sich durch das lokale Laden verbessert, haben viele Themes und Plugins bereits Google-Fonts-Blocker eingebaut. Also schaut am besten als erstes, ob euer Theme dies vielleicht schon kann.

Per Theme

Im Theme Astra könnt ihr im Customizer unter dem Punkt Leistung die Google Fonts auf lokal laden umstellen. Fertig. So werden sie in einem extra Ordner auf dem Server gespeichert und von diesem Ort lokal ausgespielt.

Das Theme Neve verfügt über eine ähnliche Option nur in der Pro-Version. Dort findet ihr die Einstellungen im Neve Pro-Plugin unter Performance.

Per Plugin

Viele Caching-Plugins stellen ebenfalls aus Performance-Gründen Google Fonts auf lokal um. Solltet ihr eins verwenden, so schaut am besten einmal in die Einstellungen, ob das nicht auch schon eine Einstellung dazu vorhanden ist.

Caching-PluginLokale Einbindung Google Fonts
W3 Total Cachenein
Autoptimizeja
WP Rocketnein

Solltet ihr keine Möglichkeit im Theme und in den bestehenden Plugins gefunden haben, so gibt es noch den Borlabs Font Blocker oder Optimize My Google Fonts. Diese Plugins blockieren die Google Fonts, so dass jegliche Verbindung zum Google-Fonts-Server unterbunden wird.

Per functions.php

Es ist möglich, die Verbindung zum Google-Fonts-Server auch per Snippet in der functions.php zu unterbinden. Leider ist das von Theme zu Theme sehr individuell und muss mühsam erforscht werden. Am einfachsten ist da der Weg über den Theme-Support.

Google Fonts lokal laden

Je nachdem wie ihr die Verbindung gekappt habt, werden die Fonts nun schon lokal geladen. Am besten jetzt einmal testen. Habt ihr die Verbindung manuell getrennt, dann müsst ihr noch die Schriften auf den eigenen Server bereit stellen.

Per Plugin

Für alle, die sich bei CSS und Child Theme nicht sicher sind, gibt es gute und einfache Plugin-Lösungen wie z.B. Custom Fonts.

Per style.css

Ihr benötigt zuerst die entsprechenden Schriften, die ihr per FTP auf den Server ladet. Die Schriftpakete bekommt ihr am einfachsten über den Google Webfont Helper: https://google-webfonts-helper.herokuapp.com/fonts

Dort findet ihr zur jeweiligen Schrift auch gleich den passenden CSS-Code für euer Child Theme.

Anleitung: Google Fonts lokal nutzen 1
Google Webfont Helper für die Schriftart „Atkinson Hyperlegible“

Nochmals überprüfen

Ganz wichtig zum Schluss: nochmals prüfen. Werden die Schriften jetzt korrekt vom eigenen Server geladen?

Troubleshooting

Habt ihr eine besonders hartnäckige Google-Schrift? Oder einen anderen Tipp, wie die lokale Einbindung gelingt. Schreibt mir gern einen Kommentar.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht.