Wie du Google Fonts bei Divi lokal einbinden kannst
Aus datenschutzrechtlichen Gründen macht es Sinn, dass du deine Schriftarten lokal auf dem Server installierst. Wie das geht, zeigen wir dir hier beim Divi-Theme.
Google Fonts & Datenschutz
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 Mass 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össere 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 der 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.
Welche Schriftart soll ich wählen?
Der Dienst von Google Font bietet über 900 verschiedene Schriftarten an. Die beliebtesten und häufig verwendeten Schriftarten haben wir dir in unserem Artikel «Die 15 beliebtesten Google Fonts» aufgelistet.
Wenn du prüfen möchtest, welche Schriftart deine Website aktuell verwendet, kannst du das im WordPress-Backend im «Customizer» nachschauen. Klick dazu im Backend links auf «Design» – «Customizer», «Allgemeine Einstellungen» und «Typographie». Im Feld «Schriftart Kopfzeile» und «Haupt-Schriftart» wird dir angegeben, welche Schriftart du aktuell verwendest. Steht dort der Begriff «Default Theme Font» ist dies die Schriftart «Open Sans», da diese vom Divi-Theme automatisch verwendet wird. Möchtest du also die gleiche Schriftart beibehalten, denn lade dir bei Google Fonts einfach die Schriftart «Open Sans» herunter.
Eine weitere Möglichkeit, die aktuelle Schriftart zu testen, geht bequem mit der Google Chrome-Erweiterung «What Font». Wenn du diese Erweiterung installiert hast, kannst du auf jeder Website prüfen, welche Schriftart in welcher Grösse und in welchem Gewicht verwendet wurde.
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.
Fazit
Google Fonts lokal einbinden & Datenschutz einhalten – Mit diesen einfachen Schritten ist es dir möglich, sämtliche Google Fonts auf deinem Server lokal einzubinden und so den Datenschutz zu befolgen. Viel Spass!
Weitere Beiträge, die dich interessieren könnten
Die 15 beliebtesten Schriftarten im Webdesign
Die beliebtesten Schriftarten und Google Fonts im Web? Wir haben dir die 15 Lieblingsschriftarten in einem Artikel zusammengestellt, inkl. Download-Möglichkeit bei Google Fonts.
Die 10 beliebtesten WordPress Themes
Du erstellst eine neue Webseite und suchst nach dem perfekten WordPress Theme? In diesem Artikel präsentieren wir dir die 10 beliebtesten WordPress Themes.
WordPress Themes – Kostenlos oder Premium?
Auf der Suche nach dem perfekten WordPress Theme für deine Website? Wir zeigen dir die Vor- und Nachteile von kostenlosen, resp. Premium-Themes.