Ganz besonders im Rahmen der DSGVO möchte so mach ein Blogger von Google Webfonts auf lokale Fonts umsteigen.
Denn wenn die verwendeten Fonts lokal gespeichert werden, also innerhalb deiner WordPress Installation, muss der Browser keine externe Verbindung zu den Google Servern aufbauen, welche die Fonts zuvor ausgeliefert haben.
Wenn du GeneratePress Premium verwendest, dann kannst du lokale Webfonts relativ leicht lokal einbinden.
Du hast noch kein GeneratePress Premium? Dann schaue es dir hier mal an.
Das geht wie folgt:
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.
