Google Fonts sind eine grosse Bereicherung für WordPress Websites. Und wer das beliebte Divi Theme nutzt, kann diese kinderleicht auf der eigenen Website nutzen. Google Fonts geben aber auch immer wieder Anlass zu Diskussionen im Zusammenhang mit der DSGVO. Wer auf Nummer sicher gehen will, kann die benötigten Google Fonts lokal einbinden in Divi. Wie man das in nur 5 Schritten schafft, zeigt dieser Beitrag.
1. Herausfinden, welche Schriften auf der Website verwendet werden
Am besten funktioniert das Auslesen der auf der Website verwendeten Schriftarten mit den Entwicklertools des Browsers. Dazu öffnen Sie Ihre Website am besten im Inkognitomodus.
Im Chrome Browser wählen Sie unter “weitere Tools” die Entwicklertools aus. Im Firefox Browser wählen Sie unter “weitere Werkzeuge” die Werkzeuge für Web–Entwickler aus. Es öffnet sich ein Fenster. Wählen Sie den Reiter Netzwerkanalyse (Network) aus und anschliessend Schriften (Fonts).
Laden Sie die Website neu, erst dann werden die Einträge geladen. In den Einträgen sehen sie nun, welche Schriftart die Website lädt und von wo sie diese bezieht.
Um den Namen der Schriftart zu erfahren, müssen Sie mit der Maus über die Zeichenkombination in der Spalte Datei / Name fahren. Dann wird die URL mit dem Namen der Schrift ersichtlich.
Sie sieht beispielsweise so aus:
https://fonts.gstatic.com/s/opensans/v34/xxxxx.woff2
In diesem Beispiel ist die Schrift Open Sans eingebunden. Sprich Sie können den Namen nach der Zeichenkombination /s/ ablesen. Diese wird über Google geladen. Das sehen Sie an der URL: https://fonts.gstatic.com
Die Schriften, welche auf der Website verwendet werden, können Sie alternativ ebenso in den Divi Theme-Einstellungen einsehen. Bitte beachten Sie, dass Sie unter Umständen auf unterschiedlichen Seiten unterschiedliche Schiften nutzen, ohne dass diese in den Theme-Einstellungen ersichtlich sind.
2. Benötigte Google Fonts herunterladen
Nachdem Sie alle Schriften herausgelesen haben, können Sie diese nun bei Google herunterladen. Besuchen Sie dazu die folgende Seite: https://fonts.google.com/
Hier suchen Sie nun die benötigte Schrift und wählen sie mit einem Klick aus. Sie werden auf die Seite der Schrift weitergeleitet.
Oben rechts klicken Sie nun auf “Download Family”. Es wird eine ZIP-Datei heruntergeladen. Als nächstes entpacken Sie die ZIP-Datei auf Ihrem Computer. Nun haben Sie die Schriftarten heruntergeladen.
Tipp: Falls Sie die Gelegenheit nutzen wollen, um die Schriften auf Ihrer Website zu ändern, hier finden eine Beitrag dazu, wie man die passende Schrift in den Google Fonts für die eigene Website findet.
3. Upload von Schriften in Divi ermöglichen mit dem Plugin Divi Toolbox
Bevor die Schriftart auf Ihrer Website hochgeladen werden kann, müssen Sie einstellen, dass Sie Schrift-Dateien hochladen können. Denn WordPress hat standardgemäss den Upload von Fontfiles deaktiviert. In Divi geht das am einfachsten mit dem Plugin Divi Toolbox.
Loggen Sie sich auf Ihrer Website ein und wählen Sie im Dashboard unter Divi > Divi Toolbox aus. Im Reiter Admin können Sie über einen Schieberegler, den Upload von TTF und OTF Files erlauben.
Tipp: Nach dem Upload kann der Schieberegler wieder zurückgestellt werden:
Speichern Sie die Einstellungen.
4. Schriften in Divi hochladen und die Google Fonts deaktivieren
Jetzt können Sie die Schriften hochladen. Wählen Sie dazu im Dashboard “Seiten” aus und klicken Sie auf eine Seite, die Text enthält. Klicken Sie anschliessend auf das Zahnrad eines Textmodules:
Im sich öffnenden Fenster wählen Sie den Reiter “Design” aus und klicken anschliessend auf den Abschnitt Text. Klicken Sie auf das Feld unterhalb von “Text Font”:
Im sich öffnenden Fenster klicken Sie auf Upload / Hochladen. Laden Sie hier die entpackte Schrift-Datei hoch und benennen Sie sie mit dem Schriftnamen und setzen Sie das Häkchen in der Box “All”. Klicken Sie auf Upload. Nun ist die Datei lokal gespeichert.
Um sicherzustellen, dass keine Schriften mehr remote und stattdessen lokal geladen werden, müssen Sie dies in den Einstellungen deaktivieren.
Wählen Sie dazu im Dashboard Divi > Theme Options aus. Im Reiter Allgemein / General deaktivieren Sie die folgenden zwei Optionen:
Speichern Sie die Einstellungen. Damit sind die Google Fonts deaktiviert.
5. Testen
Um sicherzustellen, dass keine Google Fonts mehr geladen werden, sollten Sie, wie im ersten Schritt gezeigt, mit den Entwicklertools prüfen, welche Schriftarten die Website lädt. Nun sollte überall eine Datei angegeben sein. Zudem sollte unter Domain / Host die eigene URL angegeben sein. Dies kann beispielsweise so aussehen:
Dies bedeutet, dass die Schrift nun lokal bei Ihnen gespeichert ist und somit nicht über Google abgerufen werden muss. Wichtiger Hinweis: Wer ein Caching Plugin nutzt, sollte zuvor den Cache leeren.
Fazit: Google Fonts DSGVO-konform in Divi einbinden
Derzeit soll es eine Abmahnwelle geben. Einmal mehr werden damit insbesondere kleine Unternehmen in Angst und Schrecken versetzt. Aus diesem Grund stelle ich hier eine einfache Lösung für das beliebte Theme Divi vor, die die meisten Website-Besitzer:innen in Eigenregie umsetzen können. Denn bis der Hype vorbei ist, ist eine lokale Einbindung der Google Fonts wahrscheinlich sinnvoll. Wer bereits ein Abmahnschreiben erhalten hat, sollte sich professionell beraten lassen und nicht blindlings zahlen.
Hier finden Sie einige rechtliche Erläuterungen zum Thema sowie einen Scanner, mit dem Sie etwas einfacher als mit den Entwickler-Tools prüfen können, wie allfällig verwendete Google Fonts geladen werden:
https://www.e-recht24.de/google-fonts-scanner