Datenschutz: Google Fonts in WordPress lokal hosten

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:

Suche im Quellcode nach geladenen Google Fonts

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.

Analyse eines Abschnitts im Addon Font Finder
Analyse eines Abschnitts im Addon Font Finder. Neben der Schrift-Familie wird eine Reihe an weiteren Schrift-relevanten Informationen ausgegeben.

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.

Das WordPress-Plugin Disable and Remove Google Fonts

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.

Eine der beiden gesuchten Schriften in unserem Beispiel: Playfair

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.

Download der Font-Dateien und der benötigte CSS-Code zum Einbinden

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.

Plugin „OMGF | Host Google Fonts Locally“

Für den Dauereinsatz ist allerdings die kostenpflichtige Pro-Version (ab 29 Euro) sinnvoll. Denn in der kostenfreien Basisversion sind beispielsweise die Schrift-Dateien teils deutlich größer als die manuell von Google Webfont Helper heruntergeladenen, was für den User längere Ladezeiten bedeutet. Die Pro-Version bringt außerdem einige zusätzliche Funktionen mit, die vor allem die Performance beim Laden der Schriftarten weiter optimiert.

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, ist die Antwort kurz und einfach. Beim Homepage-Baukasten werden die Fonts von vorneherein lokal gehostet.

Du willst auch direkt mit WordPress durchstarten?

Zu den WordPress-Paketen

Bisherige Autoren: Franz Neumeier, Vladimir Simović.

Photo by Alexander Andrews on Unsplash

Schlagworte: , , , ,

Teilen

  1. Avatar

    Carsten Poll sagte am

    So, ich bins nochmal,
    also wenn die Links zu fonts.googleapis hart in die header.php gecoded sind, kann das ja auch nix werden. Hat sich also erledigt meine Frage;-)

    Antworten
    • Vladimir Simović

      Vladimir Simović sagte am

      Hallo Carsten,

      vielen Dank für deine Frage und auch für deine Antwort. 😀 Ich denke, dieses Problem könnten einige haben, deswegen finde ich es dennoch hilfreich.

      Viele Grüße
      Vladimir

      Antworten
  2. Avatar

    Carsten Poll sagte am

    Hallo Herr Neumeier,
    erstmal danke für den ausführlichen Artikel. Ich bin genau nach der Anleitung verfahren (mit dem ersten Plugin), stelle aber fest, dass im Quellcode nach wie vor zu fonts.googleapis verlinkt wird.
    Alleine die Aktivierung des Plugins sollte doch das Laden der externen Recourcen unterbinden oder?

    Freue mich auf kleines Feedback, LG Carsten

    Antworten
  3. Avatar

    E. Peter sagte am

    Herzlichen Dank für diesen Beitrag. „Selbst Google empfiehlt dieses Vorgehen inzwischen.“ Könnte ich dafür eine Quelle haben? Einige Kunden sträuben sich noch das umzusetzen, da ja meist Einbußen in der Lade-Geschwindigkeit zu befürchten sind.

    Antworten
    • Avatar

      Franz Neumeier sagte am

      Hallo Herr Peter,

      um ehrlich zu sein: Ich finde die Quelle dazu nicht mehr, auch wenn ich mir sicher bin, das bei Googles John Mueller gelesen zu habe. Entsprechend habe ich auch den Text oben geändert.

      Dennoch gibt es gute Gründe, die Fonts lokal zu hosten. Vor allem benötigt man für den Einsatz der Google Fonts, wenn nicht lokal gehostet, die Cookie-Zustimmung der User. Kommt die nicht, wird der Font nicht geladen und vom Browser durch einen anderen Font ersetzt, was die Optik einer Website erheblich verändern kann. Hinzu kommt, dass Sie natürlich bei lokal gehosteten Fonts präziser steuern können, welche Font-Schnitte geladen werden, den Cache-HTTP-Header auf einen längeren als den bei Google üblichen, relativ kurzen Wert zu setzen und auch die CSS-Datei zum Laden der Fonts minifizieren bzw. den Code dazu in die vorhandene style.css integrieren können, statt die separate, nicht minifizierte Datei von Google zu laden. Auch wenn das in Hinblick auf die tatsächliche Performance wenig Unterschied macht, wirkt sich beispielsweise eine nicht minifizierte Datei negativ auf den Perforemance-Score bei Yslow oder Page Speed Insight aus, was manchen ja oft wichtiger ist als die tatsächliche Peformance.

      Letztlich hängt es vor allem von der Zahl der geladenen Fonts ab, ob sich durch das lokale Hosten ein kleiner Performance-Nachteil ergibt: Je mehr Fonts geladen werden müssen, desto eher ist das Laden aus dem Google-CDN sinnvoll. Bei nur ein oder zwei Fonts ist der Performance-Gewinn, falls überhaupt vorhanden (siehe oben bzgl. kleiner Vorteile durch beim selbst Hosten), verschwindend gering. Unter normalen Bedingungen dürfte die Performance-Frage bei den Fonts zu vernachlässigen sein, wenn der Kunde nicht gerade in einem SEO-mäßig extrem stark umkämpften Bereich unterwegs ist, wo es auch noch auf Tausendstel Sekunden ankommt.

      Herzliche Grüße
      Franz Neumeier

      Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen