Vor Zeiten der DSGVO war es gängige Praxis, dass WordPress-Themes einfach die praktischen Google Fonts verwendeten. Das ist heute nicht mehr zeitgemäß und sollte unbedingt vermieden werden.
Stattdessen sollten Fonts lokal installiert werden. Das ist nicht nur wegen der DSGVO ratsam, sondern bringt auch erhebliche Vorteile für die Performance deiner Webseite mit sich.
Mit dem GeneratePress WordPress-Theme ist das Einbinden lokaler Fonts einfach und schnell umsetzbar.
Rasch und komfortabel geht das im empfehlenswerten GeneratePress Premium Theme mit der neuen Local Font Library.
Aber auch das kostenlose GeneratePress Theme bietet eine entsprechende Möglichkeit, wenngleich hier etwas mehr Handarbeit notwendig ist.
In diesem Artikel erhältst du eine exakte Anleitung, wie du lokale Google Fonts in GeneratePress Premium* und GeneratePress einbinden kannst.
Lokale Google Fonts in GeneratePress Premium einbinden
Ab der GP Premium-Version 2.5.0 hast du Zugriff auf die neue Local Font Library, womit das Einbinden von lokalen Fonts zum Kinderspiel wird.
So aktivierst du die neue Font Library
Um die neue Font Library zu aktivieren, navigierst du in deinem WordPress Backend zu Design > GeneratePress und aktivierst das Modul „Font Library“.
Nach der Aktivierung siehst du einen Link, um die Schriftbibliothek zu öffnen. Außerdem erscheint ein Menüpunkt „Font Library“ unter dem Reiter „Design“, nachdem du die Seite aktualisiert hast.
Zu Beginn ist dieser Bereich leer, da noch keine Schriften installiert sind. Du hast nun die Wahl zwischen dem Installieren von Google-Schriften oder dem Hochladen eigener Schriften.
Google Fonts installieren
Wenn du eine Schrift direkt von Google installieren möchtest, navigiere zum Tab „Install Google Fonts“.
Das Installieren einer Google-Schrift erfordert eine einmalige Verbindung zur Google Fonts-Website, um die notwendigen Schriftdateien auf deinen Server herunterzuladen, sodass sie lokal bereitgestellt werden können.
Beim ersten Öffnen des Google Fonts-Tabs wirst du aufgefordert, diese Verbindung zu den Google-Servern zu erlauben.
Es ist wichtig zu wissen, dass die Kommunikation zwischen deinem Server und dem Google-Server nur beim Installieren einer bestimmten Schrift passiert. Es wird keine laufende Verbindung hergestellt.
Sobald die Erlaubnis erteilt ist, erhältst du Zugriff auf alle verfügbaren Google-Schriften.
Um eine Schrift zu installieren, klicke einfach auf die gewünschte und wähle die Varianten aus, die du installieren möchtest. An dieser Stelle solltest du nur Varianten auswählen, die du auch wirklich benötigst.
Nach der Installation erscheint die Schrift in deiner Schriftbibliothek.
Eigene Schriften hochladen
Wenn du eigene Schriftdateien zur Verfügung hast, kannst du sie direkt in die Bibliothek hochladen. Verwende dazu den Tab „Upload Custom Fonts“.
Nach dem Hochladen wird die Schrift in deiner Schriftbibliothek angezeigt.
Schriften verwalten
Installierte Schriften erscheinen im Tab „Font Library“. Wenn du auf eine Schrift klickst, siehst du alle verfügbaren Optionen.
- Font Status: Hier kannst du die Fonts aktivieren oder deaktivieren. Das Deaktivieren der Schrift lässt sie auf deinem Server, aber sie wird nicht im CSS im Frontend deiner Website eingebunden.
- Available Font Variants: Hier kannst du verschiedene Varianten der Schrift (z.B. fett oder kursiv) aktivieren oder deaktivieren oder sie von deinem Server löschen.
- Font Display: Die Einstellung font-display bestimmt, wie ein Schriftbild (font face) dargestellt wird in Abhängigkeit davon, ob und wann die Schrift heruntergeladen wird und einsatzbereit ist. Der Standardwert ist: auto. Mehr zur Verwendung der Font-Display-Eigenschaft erfährst du hier.
- Font Alias: Du kannst der Schrift einen anderen Namen geben, den du in deinem CSS referenzieren kannst.
- Font Familiy Fallback: Die Fallback-Font ist die Schriftart, die angezeigt wird, bevor die eigentliche Schriftart vom Browser heruntergeladen worden ist. Bei der Installation von Google wird dieses Feld automatisch mit der von Google empfohlenen Fallback-Schriftart ausgefüllt. Wenn du deine eigenen benutzerdefinierten Schriftarten installierst, musst du in diesem Feld die entsprechende Fallback-Schriftart eintragen.
- CSS Variable Suffix: Hier wird automatisch eine CSS-Variable eingetragen, wenn du eine Schriftart installierst. Diese Variable kann in deinem CSS referenziert werden, anstatt auf den Schriftnamen oder Alias zu verweisen. So kannst du den Alias oder die Schriftfamilie anpassen, ohne alle Verweise auf diese Schriftart in deinem Theme und deinen Blockeinstellungen aktualisieren zu müssen.
Prinzipiell musst du hier aber keine Einstellungen vornehmen und kannst deine installierte Schriftart direkt nach der Installation nutzen. Diese Optionen sind mehr als Feinjustierung zu verstehen.
Verwendung der Schriften
Nachdem du eine lokale Schriftart installiert hast, musst du sie nur noch deiner Webseite zuweisen.
Du findest deine lokalen Schriften im Abschnitt „Font Manager“ des Customizers unter dem Reiter „Typografie“.
Wähle hier einfach die gewünschte Schrift aus, und schon wird deine Website damit ausgestattet!
Lokale Google Fonts im kostenlosen GeneratePress Theme einbinden
Wenn du das kostenlose GeneratePress Theme nutzt, dann ist etwas mehr Handarbeit angesagt.
Mit meiner Anleitung hast du die Einbindung lokaler Google Fonts aber auch recht schnell erledigt.
1. Fonts herunterladen
Im ersten Schritt musst du zunächst deine gewünschten Fonts suchen uns herunterladen. Dazu empfehle ich dir dieses Tool, mit dem das einfach und schnell funktioniert.
Suche zunächst im Suchfeld oben rechts, welche Fonts du verwenden möchtest.
Wenn du dann auf den Font klickst, den du dir ausgesucht hast, gelangst du auf eine neue Seite, auf der du dir die Varianten für deinen Font aussuchen kannst.
Außerdem kannst du dir auf dieser Seite die benötigten Dateien herunterladen.
Wähle hier nur die Varianten, die du auch wirklich benötigst. Denn unnötiger Ballast kann sich negativ auf die Performance deiner Webseite auswirken.
Auf der genannten Seite siehst du nun, dass du im nächsten Schritt das css kopieren kannst. Wir überspringen diesen Schritt aber zunächst, und laden die benötigten Dateien herunter.
Nun erhältst du einen zip Ordner, den du auf deiner Festplatte entpacken musst.
Lasse die Google Font Helper Webseite aber offen, denn die brauchst du nachher noch.
2. Fonts hochladen
Nun musst du die eben heruntergeladenen und entpackten Dateien auf deinen Webserver laden. Am einfachsten ist es, wenn du dazu ein GeneratePress Child Theme nutzt.
Davon gehe ich in dieser Anleitung aus.
Denn dann kannst du die Dateien einfach per FTP in einen Ordner in dein Child Theme kopieren.
Es bietet sich zum Beispiel an, die Dateien in den folgenden Ordner des Child Themes zu kopieren:
3. Fonts in dein CSS einbinden
Nachdem die Fonts nun auf deinem Server liegen, musst du sie noch in dein CSS einbinden, damit der Browser sie finden kann.
Dazu gehst du noch einmal zurück zu der Google Font Helper Webseite, von der du Fonts heruntergeladen hast. Dort springst du zu Punkt 3, den wir vorhin übersprungen haben.
Unter dem ganze CSS befindet sich ein Feld, dass wie folgt beschriftet ist: Customize folder prefix (optional)
Hier trägst du nun einfach den kompletten Pfad zu dem Ordner ein, in den du die Fonts hochgeladen hast.
Wie du siehst, hat sich nun das CSS im grauen Kasten verändert und enthält die richtigen Pfade zu deinen Font Dateien.
Nun kopierst du den kompletten Inhalt des grauen Kastens und fügt ihn in die CSS Datei deines Child Themes ein. Speichern und hochladen nicht vergessen.
So, nun befinden sich die Fonts und das dazugehörige CSS also auf deinem Webserver. Wir sind also fast fertig. Aber noch nicht ganz.
4. Font in den Customizer einfügen
Im WordPress Customizer findest du unter Typografie und Seitenhintergrund (Body) eine lange Liste von Fonts, die du auswählen kannst. Hier sind auch alle Google Fonts aufgelistet, die von GeneratePress bereitsgestellt werden.
Wir wollen nun dafür sorgen, dass unser eben hochgeladene Font in dieser Liste auftaucht, damit wir ihn hier auswählen können.
Dazu musst du den folgenden Code in die functions.php Datei deines Child Themes einfügen.
Allerdings musst du darauf achten, dass der Name des Fonts exakt mit deinem heruntergeladenen Font übereinstimmt, wie er in deinem CSS unter font-family angeben ist (in diesem Beispiel: Open Sans).
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Open Sans';
return $fonts;
} );
Alternativ kannst du diesen Code aber auch über das Plugin Code Snippets einfügen, wenn dir das lieber ist.
Dieses Plugin ist sehr praktisch, wenn du Code einfügen möchtest, aber dazu keine Dateien editieren möchtest.
5. Font benutzen
Jetzt sind wir gleich fertig. Nun kannst du deinen neuen lokalen Font im Customizer unter dem Punkt Typografie unter System Fonts auswählen.
Achtung: Achte darauf, dass du nicht aus Versehen den Google Font auswählt. Denn dieser steht natürlich unter „Google Fonts“ weiterhin dieser Liste.
Das war es.
Wenn du alles richtig gemacht hast, verwendet dein GeneratePress WordPress Theme nun deinen lokalen Font und baut keine Verbindung mehr zu den Google Font Servern auf.
