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
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
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.
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.
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.
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.
Dem Fontmanager sagen wir: die Google Font Familie "Roboto" ist uns am liebsten.
Und.
Wichtig!
Nein!
Kein "Google Font"!
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.
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
