Das WordPress Theme GeneratePress lädt normalerweise Google Fonts automatisch von den Google Servern. Da mit dem Abrufen der Dateien jedoch die IP-Adresse übertragen wird, kann dies im Hinblick auf die DSGVO problematisch sein.
Wenn du Google Fonts daher Kombination mit dem GeneratePress Theme lokal nutzen möchtest kann dir nachfolgendes Tutorial weiterhelfen.
Laden der Schriften von Google unterbinden
In den Anleitungen von GeneratePress sowie in vielen Blog- und Forums-Beiträgen findet man oft den Hinweis, dass man die Nutzung von Google Fonts komplett deaktivieren kann und stattdessen eigene Schriftarten hinzufügen kann.
Gerade aber das einfache Auswählen von Schriftarten im Customizer habe ich gerade während des Design-Prozesses als angenehm empfunden. Ich empfehle daher eine andere Vorgehensweise, da beim „normalerweise“ vorgeschlagenen Vorgehen alle Schriften auf basis der selbst hinzugefügten Schriften neu ausgewählt werden müssen, was relativ unkomfortabel ist.
Einfacher gestaltet es sich, wenn man das Design zunächst komplett fertig baut, alle Schriften wie gewohnt auswählt und die Seiten gestaltet. Ist der Design-Prozess abgeschlossen und stehen alle Schriftarten fest, dann werden die gewählten Schriften einfach „umgebogen“ – und nicht von Google, sondern lokal geladen. Dazu muss der nachfolgend beschriebene Filter genutzt werden, der sinnvollerweise in einem eigenen Child Theme eingefügt werden sollte:
add_filter( 'generate_typography_google_fonts', function($fonts) {
return "";
});
Dieser Filter bewirkt, dass GeneratePress mitgeteilt wird, dass keine Schriften von Google Fonts geladen werden sollen. Die Schriften lassen sich trotz dessen schnell und einfach via Customizer setzen.
Schrift-Dateien laden und CSS generieren
Der nächste Schritt besteht darin, die gewünschten Schrift-Dateien herunterzuladen und den erforderlichen CSS-Code zu generieren. Beides ist auf der Seite Google Webfonts Helper einfach möglich. Wähle einfach die gewünschte Schriftart in den gewünschten Varianten (fett, kursiv, …) aus, wähle „Modern Browsers“ und setze als Verzeichnis ./fonts.
Bereitstellen der lokalen Dateien
Anschließend musst du die die Schrift-Dateien herunterladen und im Verzeichnis des Child Themes im Unterordner fonts ablegen.
Zusätzlich muss der generierte CSS-Code an den Anfang der Datei style.css im Child Theme eingefügt werden. Exemplarisch für Fira Mono sieht das für das font-weight von 400 wie folgt aus:
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
src: local('Fira Mono Regular'), local('FiraMono-Regular'),
url('../fonts/fira-mono-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/fira-mono-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
Um die Performance zu optimieren habe ich noch font-display: swap; hinzugefügt.
Gutenberg
Gutenberg, der Block-Editor von WordPress, nutzt ebenfalls die im Customizer ausgewählten Schriften. Da wir per Filter jedoch unterbunden haben, dass die Schriften geladen werden sollen, müssen wir das nun noch für Gutenberg nachreichen. Dies können wir über eine eigene CSS-Datei für Gutenberg erreichen. Diese nennen wir editor-style.css. Damit Gutenberg diese Datei lädt, muss folgender Eintrag im Child Theme hinzugefügt werden:
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_style( 'custom-css', get_theme_file_uri( '/editor-style.css' ), false );
} );
Nun sollte das lokale Laden der Schriften funktionieren. Teste dies zur Sicherheit beispielsweise per Chrome Developer Tools, indem du dir im Netzwerk-Tab das Laden aller Dateien anzeigen lässt. Hier kannst du als Zusatzspalte die Domain einblenden lassen. Hat alles korrekt funktioniert, werden die Schriftdateien von der lokalen Adresse und nicht von Google geladen.