Google Fonts lokal einbinden

Das einbinden von Google Fonts auf dem Websitenserver hat mehrere Vorteile, wie z. B. eine verbesserte Leistung, und es schützt die Privatsphäre des Website-Besuchers, da keine IP-Adressen an Google weitergeleitet werden.

In diesem Artikel bespreche ich, wie man Google Fonts lokal mit dem Divi-Builder und einem Plugin lädt.

Was sind Google Fonts?

Google Fonts ist eine beliebte Open-Source-Bibliothek für Schriftarten, die auf Websiten benutzt werden können. Derzeit sind mehr als 1500 Schriftarten verfügbar, die du auf deiner Website verwenden kannst. Diese Schriftarten können direkt von den Google-Servern geladen oder lokal auf dem Website-Server gehostet werden.

Allerdings gibt es bei der Verwendung von Google Fonts, welche direkt von den Google-Servern geladen werden einige Nachteile. Das Herunterladen dieser Dateien verlängert nicht nur die Ladezeit der Website, sondern auch die IP-Adresse des Nutzers wird an Google weitergegeben. Zur Einhaltung der DSGVO-Regeln ist es wichtig, dies zu verhindern, und die Schriftarten lokal zu hosten, sodass zum Laden der Schriftarten keine Verbindung zu den Google-Servern hergestellt werden soll.

Wie prüft man ob die Website Fonts direkt von den Google Servern verwendet?
Eine einfache Möglichkeit, zu überprüfen, ob deine Website Schriftarten vom Google-Server lädt, besteht darin, sich den Quellcode anzusehen. Öffne dazu deine Website und fordere den Quellcode an. Klicke dazu mit der rechten Maustaste und wähle „Seitenquelltext anzeigen“.

Suche nun nach dem Text „fonts.googleapis.com“ oder nach dem Text „fonts.gstatic.com“. Wenn du mindestens einen dieser Texte finden, weisst du, dass die Website Google-Schriftarten von Google lädt. Du kannst es auch mit dem Plugin Local Google Fonts überprüfen, auf das ich weiter unten eingehen werde.

Wie lädt man Google-Schriftarten lokal?

Wenn deine Website die Schriftarten über Google lädt, ist es wichtig, dies anzupassen und die Schriftarten lokal an den Server, auf dem sich deine Website befindet, zu hosten. Das kann man auf verschiedene Arten machen. Ich zeige hier 2 Methoden.

Fonts im Divi Builder hochladen

Wenn du den Divi Builder verwendest, kannst du die Schriftarten auf relativ einfache Weise lokal einbinden. Dies hat jedoch den Nachteil, dass du nur otf oder ttf-Dateien, und keine woff-Dateien hochladen kannst. Diese otf oder ttf-Dateien sind weniger optimiert, daher ist die Datei etwas größer, aber ansonsten funktioniert diese Methode gut.

Lade zuerst die Google Fonts herunter. Gehe hierzu zur Google Fonts Website und selektiere die gewünschten Schriftarten. Klicke auf den „Download all“ Button, um die Schriftarten herunterzuladen, und entpacke die heruntergeladene ZIP-Datei.

Verwende im Editor den Divi Builder, und gehe zu den Einstellungen eines Modules mit Text. Klicke auf Design und gehe zu Text.

Klicke bei Text Schriftart auf hochladen.

Jetzt kannst du die gewünschte Schriftarten-Datei hochladen. Benenne es mit einem erkennbaren Namen, und verwende das Wort Lokal. De unterstützte Dateiformate sind ttf und otf. Vergesse nicht die Einstellungen zu speichern.

Gehe jetzt zu den Divi Theme Optionen > Allgemeines und deaktiviere „Verwenden Sie Google Fonts“.

Plugin Local Google Fonts verwenden

Eine weitere Möglichkeit die Schriftarten lokal zu hosten, ist die Verwendung eines Plugins. Es gibt mehrere, hier zeige ich, wie man lokale Google Fonts verwendet. Diese Methode hat das Vorteil, das woff2 Dateien verwendet werden.

Gehe zu den WordPress Einstellungen > Google Fonts. Man bekommt dann eine Übersicht über die gefundenen Schriftarten, und ob diese lokal oder von den Google-Servern geladen werden.

Klicke für die entsprechenden Fonts auf „Lokal hosten“, und klicke auf „Änderungen speichern“.

Wenn du Divi verwendest, solltest du „Verwenden Sie Google Fonts“ in den Theme-Optionen deaktivieren.

Und lösche den Cache, wenn ein Cache-Plugin verwendet wird.

Was tun wenn die Schriften noch immer von Google geladen werden?

Du hast also alle Schritte abgeschlossen und die Schriftarten sollten nun lokal gehostet werden. Wenn du dich jedoch den Quellcode ansiehst, findest du immer noch einen Link zu Google. Befolge dann die nächsten Schritte.

Lösche zunächst den Cache vom Server, und lösche anschließend den Browser Cache. Lade die Seite neu. Werden die Fonts jetzt lokal geladen?

Wenn die Fonts noch immer nicht lokal geladen werden, könnte es helfen verschiedene Plugins zu deaktivieren und wieder zu aktivieren.

Weiteres kann ich noch das Plugin Disable and Remove Google Fonts empfehlen. Dies macht genau was es sagt, und ab jetzt sollten die Schriftarten lokal eingebunden sein.

Externe Inhalte laden Google Fonts

Es könnte sein, dass deine Website externe Inhalte eingebunden hat, welche Google Fonts verwenden, wie z.B. Google Maps, oder Youtube Videos. Diese Fonts kannst du leider nicht lokal laden. Diese Inhalte werden generell nur mit Einverständnis des Besuchers über Cookie Consent eingeladen. Wenn du das verhindern möchtest, kannst du am besten alternative Systeme verwenden welche keine Google Fonts verwenden.

Fazit

Durch die lokale Einbindung von Google-Schriftarten wird die Website verbessert. Dies trägt nicht nur dazu bei, die Privatsphäre der Website-Besucher besser zu schützen, es trägt auch dazu bei, die Website ein wenig schneller zu machen.