Google Fonts in WordPress lokal hosten

Google Fonts in WordPress lokal hosten

Google-Fonts lokal zu hosten statt vom Google-Server zu laden, hat mehrere Vorzüge, vor allem aber etwas mehr Datenschutz für Deine User. Der Workshop zeigt, wie Du die Schriftarten von Google in Deinem eigenen Webspace bereitstellst – und wie Du einige damit verbundene Probleme aus dem Weg räumst.

Die verwendete Schriftart verleiht einem Blog Charakter und macht es optisch individueller. Deshalb verwenden die meisten Themes besondere Fonts, die typischerweise von den Google-Fonts-Servern geladen werden. Das ist bequem, denn Google stellt diese Schriftarten kostenlos bereit.

Doch das bereitet zugleich Datenschutzprobleme, weil dabei zumindest die IP-Adressen Deiner User an Google übertragen werden. Die Lösung: Google Fonts lokal hosten.

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

Google Fonts aus Theme und Plugins entfernen

Gute Dienste leistet hier das Plugin Disable and Remove Google Fonts. Es kommt gänzlich ohne Optionen daher und verbannt einfach sämtliche Google Fonts aus Deinem Blog. Nachteile entstehen dadurch keine.

Plugin „Disable and Remove Google Fonts“

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-Quellcode eines beliebigen Beitrags Deines Blogs. 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

Nun weißt Du, welche Fonts Du benötigst und kannst das Plugin aktivieren.

Google Fonts und zugehörigen CSS-Code herunterladen

Im nächsten Schritt besorgst Du Dir die weiterhin gewünschten Schriftarten, um sie dann lokal zu hosten. Ein enorm hilfreiches Tool ist dafür 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 Tool 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 Themen 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 den 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 Deinem 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, das 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.

Schlagworte: , ,

Teilen

  1. 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