Datenschutz: Google Fonts in WordPress lokal hosten

Google-Fonts lokal zu hosten, anstatt von Google-Server zu laden, hat mehrere Vorteile. Der momentan wichtigste Grund ist der Datenschutz. Wer auf seiner Website die Schriften von Google-Servern und nicht aus dem eigenen Webspace lädt, verstößt gegen die DSGVO. Dies hat das Urteil des LG München noch einmal bestätigt.

Dass die Problematik ernst ist, kannst du daran erkennen, dass sogar WordPress.org bei der Erstellung von Themes empfiehlt, die Google-Schriften lokal zu hosten und nicht von externen Servern zu laden.

Im folgenden Blogartikel erfährst du, wie du auch in deiner WordPress-Installation die Google-Schriften lokal ablegen kannst.

Warum Google Fonts?

Die verwendete Schriftart verleiht einem Blog oder einer Website individuellen Charakter. Die Auswahl an Schriften, die auf den Betriebssystemen vorliegen, sind begrenzt.

Deshalb verwenden viele Themes zusätzliche Fonts, die typischerweise von den Google-Servern geladen werden. Das ist bequem und spart Arbeit. Zum einen hast du damit eine viel größere Auswahl an Schriften und du musstest dich um nichts Weiteres kümmern.

Doch das bereitet zugleich Datenschutzprobleme, weil dabei unter anderem die IP-Adressen an Google übertragen werden. Das verstößt gegen die DSGVO.

Die Herausforderung beim lokalen Hosten von Google Fonts ist allerdings, dass du deinem Theme – und womöglich sogar einigen Plugins – zunächst abgewöhnen musst, die Schriften von Google zu laden. Im Prinzip geht das auch ohne Einsatz eines Plugins, erfordert aber einiges an Verständnis für die Code-Ebene von WordPress. Um Google Fonts zu entfernen, ist daher ein Plugin die deutlich unkompliziertere Methode.

Benötigte Google Fonts identifizieren

Bevor du das Plugin aktivierst, solltest du zunächst ermitteln, welche Fonts du für den Blog benötigst. Dazu wirfst du einen Blick in den HTML-Quelltext einer beliebigen Unterseite deines Webprojekts. In den meisten Webbrowsern bekommst du den Quellcode einer Seite über die Tastenkombination Strg+U angezeigt.

Im Quellcode suchst Du nach fonts.googleapis.com und fonts.gstatic.com. In unserem Beispiel werden die beiden Fonts „Playfair“ und „Open Sans“ geladen:

Alternativ kannst du ein Browser-Addon wie den Font Finder installieren. Dieses Addon gibt es für Firefox und für Chrome und damit kannst du entweder komplette Unterseiten oder einzelne Abschnitte analysieren.

Nun weißt du, welche Schriften du benötigst und jetzt können wir mit dem nächsten Schritt fortfahren: als Nächstes müssen wir die Verweise zu Google entfernen.

Google Fonts aus Theme und Plugins entfernen

Um die Google Fonts aus dem Theme und den Plugins zu entfernen, kannst du das Plugin Disable and Remove Google Fonts einsetzen. Es kommt gänzlich ohne Optionen daher und verbannt einfach sämtliche Google Fonts aus deinem Blog.

Google Fonts und zugehörigen CSS-Code herunterladen

Im nächsten Schritt besorgst du dir die notwendigen Schriftarten, um sie dann lokal zu hosten. Ein enorm hilfreiches Tool dafür ist der Google Webfont Helper. Auf dieser Website stellst du dir nämlich passgenau zum Download zusammen, welche Schriften und Schriftschnitte du benötigst. Außerdem liefert dir das Werkzeug auch den passenden Code, um die Fonts in dein Child-Theme einzubinden.

Hinweis: Falls du noch kein Child-Theme hast, musst du das an dieser Stelle anlegen. Denn Veränderungen, die du direkt in deinem Theme vornimmst, verschwinden beim nächsten Update wieder. Deshalb ist auch für die lokale Einbindung der Google Fonts ein Child-Theme sehr sinnvoll.

Finde über das Suchformular die jeweilige Schrift. Damit die Schrift-Datei nicht zu groß wird, wählst du nun unter Select styles die Schriftschnitte aus, die dein Theme tatsächlich verwendet.

Um herauszufinden, welche das sind, wirfst Du einen Blick in die Datei style.css Deines Themes (und des Child-Themes, falls Du dort zusätzliche Google Fonts eingebunden haben solltest). Das Theme liegt im Verzeichnis /wp-content/themes/THEMNAME.

Durchsuche die gesamte style.css nacheinander nach dem Namen des Fonts – also zum Beispiel »Playfair« – und prüfe, ob es Definitionen für die Eigenschaft font-weight gibt. In unserem Beispiel finden wir lediglich den Wert 400 für die bei Überschriften eingesetzten Schrift Playfair und 600 für Open Sans, die sowohl für kleinere Überschriften als auch den sonstigen Text zum Einsatz kommt.

Da Fairplay auch kursiv genutzt wird, wie wir bei Betrachtung des Designs unseres Blogs feststellen können, wählen wir also die Styles regular (entspricht 400) und italic aus.

Unter Punkt 4. Download files lädst Du Dir nun die Schrift-Dateien herunter. Außerdem kopierst Du Dir den Code aus dem grau hinterlegten Kasten unter Punkt 3. Copy CSS in einen Text-Editor zur späteren Verwendung.

Genauso verfährst Du bei den weiteren gegebenenfalls identifizierten Fonts, in unserem Beispiel also Open Sans. Hier benötigen wir ebenfalls die Schriftschnitte regular und italic als Standard sowie entsprechend der Suchergebnisse in der style.css zusätzlich den etwas fetteren Schnitt 600 sowie die italic-Version dazu.

Wenn Du keinen großen Wert auf perfekte Typographie legst, kannst Du übrigens  die italic-Schriftschnitte weglassen. Zwar ergeben die bei Kursivschrift ein etwas schöneres Schriftbild, benötigen aber durch die zusätzlichen Daten auch mehr Zeit zum Herunterladen in den Browser des Users. Fehlt der italic-Schriftschnitt, stellt der Browser kursiv markierte Textstellen einfach schräg, statt den expliziten Schriftschnitt dafür zu verwenden.

Schrift-Dateien ins Child-Theme kopieren

Nun entpackst du die Zip-Dateien mit den Schriftarten, die Du eben heruntergeladen hast und lädst alle enthaltenen Dateien – außer den Zip-Dateien – per FTP in den gegebenenfalls neu erstellten Ordner /fonts/ imThemes-Verzeichnisses, also typischerweise zum Beispiel /wp-content/themes/fonts/

Alternativ kannst du die Fonts natürlich auch an eine andere Stelle, beispielsweise als Unterverzeichnis in deinen Child-Theme-Ordner legen. Dann musst du lediglich die Dateipfade in dem CSS-Code anpassen, den du im nächsten Schritt in deine style.css kopierst.

Abschließend fügst du in die style.css-Datei deines Child-Themes den CSS-Code ein, den du zuvor zu den Fonts beim Google Webfont Helper kopiert hast. Nun sollten die Fonts, die anfangs noch von Google-Servern geladen wurden, direkt aus deinem Webspace kommen.

Komplette Plugin-Lösung

Falls du dir die Mühe ersparen möchtest, die lokalen Fonts manuell einzubinden, kannst du auch auf ein Plugin zurückgreifen, welches den kompletten Prozess für dich übernimmt. OMGF | Host Google Fonts Locally entfernt nämlich nicht nur Google Fonts, sondern ersetzt sie auch weitgehend automatisch durch lokal gehostete Varianten.

Für den Dauereinsatz ist allerdings die kostenpflichtige Pro-Version (ab 29 Euro) sinnvoll. Die Pro-Version bringt außerdem einige zusätzliche Funktionen mit, die vor allem die Performance beim Laden der Schriftarten weiter optimiert.

Bedenke bitte, dass die Wege, um Google Fonts auch unabsichtlich einzuschleusen, vielfältig sind. Daher können weder die manuellen, noch die Plugin-Lösungen alle Szenarien abdecken. Bei weit über 10.000 Themes und über 60.000 Plugins ist das auch nicht möglich. Der Entwickler des OMGF-Plugins listet einige Problemfälle auf. Daher musst du die Implementierung der Lösungen hinterher gut kontrollieren und dich nicht ungeprüft auf die Lösungen verlassen.

Hinweis zu Homepage-Baukasten: In diesem Artikel haben wir Lösungen für eine WordPress-Website besprochen. Falls du dich fragen solltest, wie du die Google-Schriften im Homepage-Baukasten lokal hosten sollst: Das ist nicht notwendig. Die im HPBK verwendeten Google Fonts nutzen einen zwischengeschalteten Server, einen sogenannten Proxyserver. Dadurch werden Daten wie die IP-Adresse von Besuchern nicht an Google übertragen, sondern durch die Daten des Proxyservers ersetzt.

Du willst auch direkt mit WordPress durchstarten?

Bisherige Autoren: Franz Neumeier, Vladimir Simović.

Photo by Alexander Andrews on Unsplash