WordPress, GeneratePress

Google Fonts lokal installieren, auf dem eigenen Web-Server

Lokal installierte Google Web Fonts reduzieren die Ladezeiten und sind für den Datenschutz nützlich. Eine Win-Win-Win-Situation. So geht's mit WordPress und - wer mag - mit GeneratePress oder GeneratePress Premium.

Google Fonts lokal: PageSpeed Insights Score
Google Fonts lokal gehostet: PageSpeed Insights Score

Diese Anleitung basiert auf der GeneratePress Dokumentation. Ergänzt um die eigene Erfahrung damit und einige wichtige Anmerkungen.

Die beschriebenen Methoden und Werkzeuge sind nicht auf GeneratePress oder GeneratePress Premium beschränkt.

Sie funktionieren für jede WordPress-Installation und jedes andere Theme ähnlich.

Update: Mit einer zusätzlichen Zeile im CSS, pro Font, lässt sich noch ein bisschen mehr Wumms herauskitzeln, wie hier beschrieben: Lokale Google Fonts optimieren

Google Fonts herunterladen

Google Fonts lokal: Helper Font-Familie
Im Google Webfonts Helper die gewünschte Font-Familie finden

Der Google Webfonts Helper von Mario Ranftl ist dafür ziemlich perfekt. Auf der Website

https://google-webfonts-helper.herokuapp.com/fonts

wählen wir links aus, welche Google Fonts wir benötigen. Oder geben ins Suchfeld z.B. „rob“ ein und erhalten eine Liste aller verfügbaren Varianten der Font-Familie Roboto.

Rechts davon stellen wir die Details ein, wegen Zeichensatz, gewünschten Schriftschnitten und Dateipfaden fürs CSS.

1. Zeichensatz auswählen

Default ist latin.

Das ist für Englisch perfekt. Aber auch für Deutsch mit den beliebten Umlauten ä, ö, ü und dem scharfen ß gibt es hier nichts zu tun.

Dann also gleich zur Geschmackssache:

2. Stile auswählen und Google Fonts herunterladen

Google Fonts lokal: Helper select styles
Im Webfonts Helper die gewünschten Styles für Download und CSS markieren

Wir haken blau, welche Schriftschnitte wir benötigen.

In meinem Beispiel zu Roboto alles ab Regular (Normal).

Und springen direkt zum blauen Download-Button, starten den Download und speichern das .zip-Archiv dort, wo wir es gleich wiederfinden.

CSS anpassen, kopieren, sichern

Jetzt kommen wir zum leider etwas verwirrenden Teil. Den CSS-Schnipsel, den das Online-Tool erzeugt und anzeigt, benötigen wir dringend. Aber:

Nicht.

Einfach.

So.

🙂

Denn: Das CSS definiert im Wesentlichen nur die Pfade zu den Google Font Dateien. Und die sind abhängig davon, in welchen Ordner wir diese Dateien auf den Web-Server hochladen.

Die WordPress-Methode

Wer den Upload im WordPress-Backend erledigen möchte, statt dafür mit einem FTP-Client zu hantieren, muss zuerst herausfinden, in welchem Unterordner die hochgeladenen Font-Dateien landen.

Ausserdem – und das ist der dicke Haken an dieser Methode:

WordPress verbietet den Upload bestimmter Dateitypen.

In der Original-Anleitung von GeneratePress wird empfohlen, temporär ein PHP Code-Snippet zu aktivieren, dass dieses Verbot umschifft.

Habe ich ausprobiert. Funktioniert bei mir perfekt. Bis auf .ttf Dateien.

Äh … ?!?!

Die FTP-Methode

Wer dann doch lieber – wie ich – einen FTP-Client, z.B. Filezilla benutzen möchte, kann den entscheidenden Pfad schon vorab selbst bestimmen, z.B.

../wp-content/uploads/fonts/

Die beiden Punkte am Anfang signalisieren: das ist ein relativer Pfad, direkt im Stammverzeichnis. Sollte für jede WordPress-Installation funktionieren.

Google Fonts lokal: Helper Folder Prefix
Der relative Pfad zum (neuen) Fonts-Ordner im Feld Folder Prefix

Diesen Pfad trage ich im Google Webfonts Helper im Feld

Customize folder prefix (optional)

ein. Darauf passt sich der grau hinterlegte CSS-Text automatisch an.

Google Fonts lokal: Helper copy CSS
Der CSS-Code im Google Webfonts Helper passt sich automatisch an

Abschliessend irgendwo auf den Text mit dem CSS-Code klicken, um ihn vollständig zu kopieren und – am besten – erst mal in einer lokalen Textdatei sichern.

Wir kommen darauf zurück …

Die .zip-Datei entpacken und hochladen

Na? Das eben heruntergeladene .zip-Archiv mit den gewünschten Google Fonts wieder gefunden? 🙂

Dann die .zip-Datei einfach wie üblich in einen Ordner auspacken. In meinem Beispiel ist es der Ordner namens roboto-v29-latin im Downloads-Ordner.

Jetzt starten wir den FTP-Client unseres Vertrauens. Für mich ist das Filezilla. Und stellen damit die FTP-Verbindung zu unserem Web-Server her.

Als Quelle links klicke ich mich zu dem Ordner mit dem entpackten Font-Archiv durch.

Als Ziel rechts empfiehlt sich der Uploads-Ordner:

/wp-content/uploads/

Dort erstelle ich wie geplant einen Unterordner namens fonts:

/wp-content/uploads/fonts/

Dann wähle ich links alle Dateien aus und ziehe sie nach rechts in den neuen Fonts-Ordner. Damit sind die Google Fonts auf unserem Web-Server schon „online“. Aber noch nicht ins CSS unserer Website eingebunden.

Das erledigen wir jetzt.

Design > Customizer > Zusätzliches CSS

Egal, ob die WordPress-Methode funktioniert hat oder wir doch den FTP-Client benutzt haben. Am Ende landen wir alle im vertrauten WordPress-Backend. Unter

Design > Customizer > Zusätzliches CSS

gehen wir z.B. ans Ende der bisher schon hinzugefügten CSS-Statements, fügen dort den vorhin kopierten CSS-Code ein und klicken auf Veröffentlichen.

Google Fonts lokal: zusaetzliches css
Den kopierten CSS-Code in WordPress als Zusätzliches CSS einfügen

Ab jetzt kommt es auf das installierte WordPress-Theme an.

In meinem Fall ist es GeneratePress 3.1.0 mit dem Premium Plugin 2.1.1

Warum GeneratePress? Mehr dazu hier: Das macht dieses Theme gut.

GeneratePress Premium

Mit dem Update auf die Theme-Version 3.1 wurde für GeneratePress Premium das Typography-System umgestellt. Was bisher unter

Design > GeneratePress 

als Modul „Typographie“ einzeln aktivier- und deaktivierbar war, verschwindet an dieser Stelle. Dafür taucht unter

Design > Customizer > Typographie

ein neuer Font- und Typographie-Manager auf. Hier sind endlich 🙂 alle wichtigen Font-Einstellungen kompakt und übersichtlich erreichbar.

Google Fonts lokal: GeneratePress Font Manager
Im GeneratePress Font Manager die Einstellungen der Font-Familie ändern

Dem Fontmanager sagen wir: die Google Font Familie „Roboto“ ist uns am liebsten.

Und.

Wichtig!

Nein!

Kein „Google Font“!

Google Fonts lokal: GeneratePress Font Manager, Google Font ausschalten
Im Font-Manager für die nun lokal gehosteten Fonts „Google Font“ deaktivieren

Diesen Schalter legen wir um, damit diese Font-Familie ab sofort nicht mehr über’s Web bei Google abgeholt werden, sondern von der lokalen Platte unseres Webservers.

Und: wie überprüfen wir das Ganze?

Na, z.B. mit Google PageSpeed Insights.

Datenschutz ist gut.

Aber Geschwindigkeit beim Seitenaufbau ist auf jeden Fall noch besser und lässt sich sogar messen.

Google Fonts lokal: PageSpeed Insights Labdaten
Die PageSpeed Insights Labdaten zum eingangs gezeigten Score

Zur eigenen Begeisterung, aber vor allem zur Begeisterung der künftigen Millionen von Besucherinnen und Besuchern: alles im grünen Bereich 🙂

Quellen

GeneratePress Anleitung für lokal installierte Google Fonts

Webfonts-Helper Tool zum Herunterladen von Google Fonts und CSS

Autor von generateCLICKS, Gründer und Chef der Web-Agentur whkmedia. Wenn Wolfram sich nicht mit Websites und YouTube-Kanälen beschäftigt, ist er mit seiner Frau im Multivan unterwegs oder auf der Suche nach einem Espresso und einer knusprigen Laugenbrezel.