Google Fonts lokal einbinden & Datenschutz einhalten

Google Fonts sind eine beliebte Wahl, um Websites mit schönen und vielfältigen Schriftarten zu gestalten. Doch viele Website-Betreiber haben Bedenken hinsichtlich des Datenschutzes und das nicht zu Unrecht. In den letzten Jahren gab es im DACH-Raum eine regelrechte Flut von Abmahnungen an Website-Besitzer, da diese ihre Schriftarten nicht lokal eingebunden haben.

Warum muss ich Google Fonts lokal einbinden?

Der Hauptgrund dafür liegt darin, dass Google Fonts auf externen Servern gehostet werden. Wenn deine Website Google Fonts verwendet, wird beim Laden der Seite eine Verbindung zu den Servern von Google hergestellt, um die Schriftarten abzurufen. Dadurch werden Daten deiner Website-Besucher wie IP-Adressen und Browsing-Verhalten an Google übertragen. Dies kann zu Datenschutzbedenken führen, insbesondere wenn es um die Einhaltung von Datenschutzbestimmungen und die Speicherung personenbezogener Daten geht.

Eine datenschutzfreundliche Alternative besteht darin, dass du die Schriftarten, welche du auf deiner Website verwenden möchtest, lokal auf dem eigenen Server speicherst und von dort aus lädst. Indem die Schriftarten lokal gehostet werden, werden keine Verbindungen zu den Servern von Google mehr hergestellt und somit keine Nutzerdaten an Dritte übertragen. Dies gewährleistet ein höheres Maß an Datenschutz und ermöglicht es dir, die Kontrolle über die verwendeten Schriftarten zu behalten.

Die lokale Einbindung von Google Fonts bietet auch Vorteile in Bezug auf die Leistung und Ladezeit der Website. Da die Schriftarten vom eigenen Server geladen werden, entfällt die Abhängigkeit von externen Servern, was zu schnelleren Ladezeiten führt. Dies ist besonders wichtig, da eine langsame Website die Benutzererfahrung negativ beeinflussen kann.

Die Implementierung der lokalen Einbindung von Google Fonts erfordert etwas technische Kenntnisse und einige zusätzliche Schritte im Vergleich zur direkten Verwendung der Google-Server. Am besten ist es, wenn du die Google Fonts gleich zu Beginn installierst. Das dir hinterher größere Mühe.
Aber keine Sorge: wir geben dir im Folgenden eine Schritt-für-Schritt-Anleitung am Beispiel des beliebten WordPress-Themes «Divi von Elegant Themes» an die Hand.

Das Laden von Schriften über ein Cookie-Plugin?

Eine Möglichkeit, das Problem des Datenschutzes bei der Verwendung von Google Fonts zu umgehen, besteht darin, das Laden der Schriftarten über ein Cookie-Plugin zu regeln. Durch das Einholen der Zustimmung der Nutzer über ein Cookie-Banner kannst du sicherstellen, dass sie damit einverstanden sind, dass Daten an Google übertragen werden.

Diese Lösung hat aber einen entscheidenden Nachteil, weshalb wir diese Variante nicht empfehlen: Wenn ein Nutzer seine Zustimmung verweigert, werden nur die Schriftarten angezeigt, die auf dem jeweiligen Gerät bereits installiert oder frei verfügbar sind. Das bedeutet, dass die Auswahl an verfügbaren Schriftarten stark eingeschränkt ist und deine Website möglicherweise nicht so angezeigt wird, wie sie sollte und das komplette Design zerrissen wird.

Google Font im Divi Theme deaktivieren

Nachdem du deine Schriftart gewählt hast, geht es nun an die technische Seite. Als erstes musst du im Divi-Theme die Funktion «Google Schriftarten verwenden» deaktivieren. Diese Funktion findest du ebenfalls im Backend. Klicke links im Menü deines Backend auf «Divi» > «Theme-Optionen». Im Tab «Allgemeines» > «Allgemein» findest du etwas weiter unten die beiden Begriffe «Verwenden Sie Google Fonts» und «Untergruppen von Google Fonts».

Achte darauf, dass beide Buttons deaktiviert sind (Speichern nicht vergessen!). Wenn du dir dann deine Website anschaust, wirst du jetzt eine komplett neue Schriftart haben, und zwar eine der 5, die vom System standartmässig verwendet wird. Aber deine Schriftart hast du jetzt auch noch nicht hochgeladen. Dazu kommen wir im nächsten Punkt

Lade deine gewünschte Schriftart bei Google Fonts herunter

Nun gehst du zum Google-Fonts-Dienst und lädst dir die gewünschte Schriftart herunter. Du erhältst dann eine zip-Datei. Speichere sie ab und entpacke sie. Du hast dann sämtliche Schriftvariationen deiner gewünschten Schriftart in Form von TrueType-Schriftdateien in einem Ordner, welche du danach in deinem Divi-Theme hochladen kannst.

WP-config.php – eine kleine technische Anpassung

Würdest du diese Datei jetzt einfach hochladen, erhältst du die Fehlermeldung «Du bist leider nicht berechtigt, diesen Dateityp hochzuladen». Aus Sicherheitsgründen erlaubt WordPress das Hochladen bestimmter Dateitypen nicht, wie z.B. TTF oder OTF. Diese Sicherheitsschranke musst du jetzt kurzfristig ausschalten. Gehe dafür in den Dateimanager deines Hostings und such die Datei namens «wp-config.php». Bevor du diese Datei änderst, mach bitte eine Sicherheitskopie! Anschliessend beachtest du folgende Punkte:

• Öffne die wp-config.php-Datei
• Füge folgenden Code hinzu und zwar oberhalb der Zeile /*Das war’s, Schluss mit dem Bearbeiten! Viel Spass*/

/* erlaubt Uploads. Unbedingt wieder löschen!! */

define(‚ALLOW_UNFILTERED_UPLOADS‘, true);

• Speichere die wp-config.php-Datei (Das Fenster dazu kannst du offenlassen. Diese Änderung musst du nach dem Hochladen wieder rückgängig machen!)

Schriftarten hochladen

Nun ist es so weit und deiner neuen Schriftart auf deiner Website steht nichts mehr im Weg. Um deine Schrift hochzuladen, aktiviere den Divi Builder, öffne die Einstellung (Zahnrad) eines Textmoduls und geh auf den Tab «Design».
Klicke danach auf «Text» und öffne das Dropdown für «Text Schriftart».

Du kannst oben nun die aktuell verwendete Schriftart sehen, nach der Trennlinie folgen dann die Schriften, die bereits lokal installiert sind (und du siehst, dass sind – seit du die Funktion «Google Font verwenden» deaktiviert hast – nicht mehr so viele). Klicke nun auf den Button «Hochladen». Du kannst dabei immer nur eine Datei hochladen und nicht den gesamten Ordner.
Diesen Vorgang wiederholst du nun für alle Schriftarten, die du hochladen möchtest.

Testen

Speichere nun das Textmodul ab und teste, ob nun die von dir gewählte Schriftart angezeigt wird. Schau dir die Seite vielleicht auch noch in einem anderen Browser an oder teste die Schrift mit «What Font», wenn du das Gefühl hast, irgendetwas stimmt nicht.

WP-config.php – Anpassung rückgängig machen

Wenn du das Fenster deiner wp-config.php-Datei vorhin offengelassen hast, dann lösch einfach den Code, den du zuvor hinzugefügt hast und speichere die Datei wieder ab.