Wie kann ich Google Fonts lokal auf meinem Server hosten? Durch die DSGVO beschäftigen sich momentan sehr viele WP-Nutzer mit genau dieser Frage. Daher habe ich eine Anleitung geschrieben, wie Du die Google Webfonts lokal in WordPress nutzen kannst.

Google Fonts & DSGVO

Bei der Nutzung von Google Fonts wird bei jedem Aufruf Deiner Seite eine Verbindung zum Google Server hergestellt. Dabei wird unter anderem auch die IP-Adresse (personenbezogene Daten) des Nutzers an Google übermittelt. Ob weitere und welche Daten genau übertragen werden, weiß keiner so genau. In den Google FAQ gibt es bisher dazu leider keine wirklich hilfreichen Infos.

Legt man die DSGVO nun sehr streng aus, müsste man vom Nutzer eine Einwilligung zur Weitergabe seiner IP an Google einholen. Da die Verbindung zum Font-Server jedoch direkt beim Abruf erfolgt, ist das praktisch unmöglich. Aber vielleicht wird Google in nächster Zeit seinen Service anpassen, so dass er problemlos genutzt werden kann.

Bis dahin gibt es momentan 3 Möglichkeiten:

  • Du berufst Dich auf ein „berechtigtes Interesse“ (hübsches Design der Webseite) mit Verweis auf Art. 6 Abs. 1 lit. f DSGVO. Ob das rechtlich wirklich OK ist, kann ich als juristischer Laie natürlich nicht mit Sicherheit sagen.
  • Du verzichtest auf Webfonts und nutzt System-Schriften. Dieses Vorgehen teste ich gerade auf meinem Blog, aber hauptsächlich aus Performance-Gründen.
  • Du speicherst die Schriften lokal auf Deinem Server. Wie das funktioniert, erkläre ich Dir gleich Step by Step.

Welche Google Webfonts nutzt Du?

Bevor Du Deine Seite auf lokale Schriften umstellst, musst Du natürlich schauen, welche Fonts auf Deiner Seite genutzt werden.
Falls Du Dir da unsicher bist, kannst Du bei den meisten Themes in den Theme-Optionen nachschauen.
Alternativ kannst Du auch einen Blick in die Browser-Konsole werfen. Klingt sehr technisch, geht aber ganz einfach:

Du öffnest Deine Webseite in Chrome oder Firefox und drückst dann die F12-Taste (oder STRG+SHIFT+i). Im unteren Teil des Browser-Fensters erscheint dann die Browser-Konsole.
Hier wechselst Du in den Tab Network (Netzwerkanalyse) und ladest die Seite neu (F5). Nun hast Du einen guten Überblick, was alles auf Deiner Seite geladen wird.

Browser Konsole font check

Browser-Konsole: Welche Web Fonts werden geladen?

Am besten sortierst Du die ganzen Anfragen mit einem Klick auf Host und suchst dann nach fonts.googleapis.com.

In diesem Beispiel siehst Du nun, dass die Schrift Open Sans in den Varianten 400, 600 und 700 geladen wird. Und genau diese Fonts werde ich jetzt lokal in WordPress einbinden.

Google Webfonts lokal einbinden

Leider bietet der Google Font Service nur den direkten Download von ttf-dateien an. Möchte man Webfonts lokal hosten, benötigt man aber noch andere Schriftformate:

  • woff und woff2 für moderne Browser
  • ttf für Safari, Android und iOS
  • svg und eot für ältere Browser (z.B. IE 9, ältere iOS)

Zum Glück gibt es aber Seiten wie Fontsquirell (bietet nur woff-Formate an) oder google-webfonts-helper.com . Hier kannst Du ganz bequem nach Schriften suchen und sie in den benötigten Formaten downloaden.

Allerdings sollte man dabei auch die Lizenz der Schriften beachten. Man darf zwar Google Fonts frei verwenden, aber die Umwandlung in die Webfont-Formate (woff) kann zumindest bei der SIL-Lizenz problematisch sein. Sicherer sind hingegen Schriften, die unter der Apache Lizenz veröffentlicht sind. Eine Übersicht findest Du unter: fonts.google.com/attribution.

Google Webfont auswählen und downloaden

Zunächst öffnest Du die Seite google-webfonts-helper.herokuapp.com und tippst im Suchfeld oben links die gewünschte Schriftart ein. In diesem Fall ist es Open Sans sans-serif. Anschließend musst Du nur die aufgeführten 4 Punkte durchgehen.

1. Charsets
Hier kannst Du einfach die Standardeinstellung latin übernehmen. Wenn Du eine andere Sprache nutzen möchtest, kannst Du auch noch andere Zeichensätze hinzufügen.

2. Styles
Unter dem Punkt Styles wählst Du die benötigten Schriftschnitte aus. Also z.B. fett oder kursiv. Für dieses Beispiel nutze ich Open Sans in regular (400), 600 und 700.

3. CSS
Das Tool liefert Dir nun den CSS-Code für Deine Fontauswahl an.
In der Standard-Einstellung bekommst Du den Code für den besten Browser-Support. D.h. es werden alle Formate generiert.
Wenn Du nur aktuelle Browser unterstützen möchtest, kannst Du auf den Button Modern Browsers klicken. Dann werden nur noch die Formate woff und woff2 berücksichtigt.

CSS Font Anweisungen

CSS-Code für das Einbinden der Schriften

Den CSS-Code kannst Du einfach kopieren und z.B. in die CSS-Datei Deines Child Themes einfügen.

4. Download files
Im letzten Step kannst Du die Schrift mit allen ausgewählten Formaten als ZIP-Datei downloaden.
Das Archiv musst Du dann entpacken und anschließend auf Deinen Server hochladen. Dafür legst Du am besten einen eigenen Ordner (fonts) an und platzierst ihn z.B. im Child-Theme.

Webfonts downloaden

Download der Fonts mit dem Webfont Helper

Jetzt kann die Schrift Open Sans lokal in WordPress geladen werden. Aber leider wird noch eine Verbindung zum Font-Server hergestellt.

Google Webfonts in WordPress deaktivieren

Leider ist das Deaktivieren der Google Fonts bei vielen Themes ein Problem, da es hierfür meistens keine direkte Einstellmöglichkeit gibt.
Um die Fonts dennoch zu entfernen, gibt es verschiedene Möglichkeiten. Diese sind aber immer vom genutzten Theme abhängig:

Theme-Style per dequeue deaktivieren
Hierzu musst Du zunächst genau wissen, wie die Fonts vom Theme eingebunden werden. Erst dann kannst Du sie auch deaktivieren.
Beim aktuellen WordPress Theme Twenty Seventeen wäre es das folgendes Snippet:

function removeTwentySeventeenFonts() { 
wp_dequeue_style('twentyseventeen-fonts'); 
} 
add_action('wp_enqueue_scripts', 'removeTwentySeventeenFonts');

Diese Funktion kannst Du dann in die functions.php des Child-Themes oder in eine custom-functions kopieren.

Hinweis: vor Änderungen an der functions.php solltest du ein Backup machen

Für Autoptimize-Nutzer
Bei manchen Themes kann man die Fonts deaktivieren, indem man bei Autoptimize unter Extras den Punkt „Google Fonts entfernen“ auswählt.

Diverse Plugins
Es gibt einige Plugins, die unter anderem auch Google Fonts entfernen. In meinen Tests haben leider die wenigsten davon zuverlässig funktioniert. Auch wurden viele Plugins schon länger nicht mehr aktualisiert. Das einzige empfehlenswerte Plugin ist Clearfy.

Ich nutze folgendes Code-Snippet, das bisher sehr gut funktioniert:

function removeGoogleFonts(){
		global $wp_styles;
			$regex = '/fonts\.googleapis\.com\/css\?family/i';
			foreach($wp_styles->registered as $registered) {

				if( preg_match($regex, $registered->src) ) {
					wp_dequeue_style($registered->handle);
				}
			}
		}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);

Bisher konnte ich mit diesem Schnipsel schon in diversen Themes die Google Fonts deaktivieren. Erfolgreich getestet habe ich es z.B. mit den WordPress Standard Themes, Betheme, Divi, Herald, Brooklyn und einigen anderen WordPress Themes.

Nur bei Enfold funktioniert es nicht, da muss stattdessen dieses Snippet eingefügt werden:

function enfold_customization_switch_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}
add_action( 'init', 'enfold_customization_switch_fonts' );

Eigenes Font Plugin

Da ich aktuell recht viele Webseiten auf lokale Fonts umstelle, habe ich mir dazu ein eigenes Funktionalitäten-Plugin gebastelt. So muss ich nicht immer in den verschiedenen Themes nach den Styles suchen, sondern muss nur die Fonts austauschen und die CSS-Datei anpassen.
Außerdem bleibt der Code auch erhalten, falls das WordPress Theme eines Tages ausgewechselt wird.

Bevor ich auf den Code eingehe, hier kurz die Ordner-Struktur:

Plugin-Order Fonts-lokal:
darin die Plugin-Datei local-fonts.php
Unterordner css:
mit der Datei local-fonts-style.css
Unterordner fonts:
enthält die Schriften

Ordnerstruktur Font Plugin

Aufbau des Plugins

Den Aufbau der Plugin-Datei habe ich aus meinem Tutorial übernommen. Natürlich kannst Du hier die Angaben durch Deine eigenen ersetzen.

Hinweis: vor Änderungen an der functions.php oder dem Testen von eigenen Plugins solltest du ein Backup machen

Hier also der Plugin-Header:

<?php
/*
Plugin Name: Fonts lokal einbinden
Plugin URI: https://www.webtimiser.de/webfonts-lokal-in-wordpress
Description: Fonts lokal in WordPress nutzen und Verbindung zu 
Google Fonts deaktivieren
Author: Sonia Rieder
Author URI: https://www.webtimiser.de
Version: 1.0
*/

/* Verbiete den direkten Zugriff auf die Plugin-Datei */
if ( ! defined( 'ABSPATH' ) ) exit;

/* Nach dieser Zeile den Code einfügen*/

Als nächstes wird die CSS-Datei für die Fonts eingebunden:

function add_fonts() {
	wp_register_style('local-fonts', plugin_dir_url( __FILE__ ) . 'css/local-fonts-style.css');
	wp_enqueue_style('local-fonts');

}
add_action('wp_enqueue_scripts', 'add_fonts',1);

Dadurch wird das Stylesheet local-fonts-style.css in WordPress geladen. In diese Datei kopiere ich genau die @font-face Anweisungen, die der Webfont helper unter Punkt 3 angezeigt hat.

Fonts entfernen

Hier füge ich das oben beschriebene Snippet ein und beende den Code:

function removeGoogleFonts(){
		global $wp_styles;
			$regex = '/fonts\.googleapis\.com\/css\?family/i';
			foreach($wp_styles->registered as $registered) {

				if( preg_match($regex, $registered->src) ) {
					wp_dequeue_style($registered->handle);
				}
			}
		}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);
/* Nach dieser Zeile KEINEN Code mehr einfügen*/
?>

Nun kann ich den gesamten Ordner per FTP auf meine Webseite in den Ordner wp-content/plugins/ übertragen. Anschließend muss ich nur noch das Plugin aktivieren und kurz prüfen, ob alles funktioniert.

Alternativ kann man auch den Ordner in ein ZIP-Archiv packen und das Plugin wie gewohnt installieren. Also im Dashboard unter > Plugins > installieren > Plugin hochladen.

Die Tutorial-Dateien kannst Du gerne als Vorlage nutzen und frei anpassen.

Die Tutorial-Dateien kannst Du gerne als Vorlage nutzen und frei anpassen.

Wie hat Dir dieser Beitrag gefallen? 1 Star2 Stars3 Stars4 Stars5 Stars (24 Bewertungen, Ø: 4,96 von 5)
Loading...

Fazit:

Schon vor dem DSGVO-Hype haben sich viele WordPress-Nutzer Gedanken über die Vor- und Nachteile der Nutzung von Google Webfonts gemacht. Aber hauptsächlich aus Page-Speed-Gründen. Denn jede externe Verbindung verursacht zusätzliche Requests, die sich häufig negativ auf die Performance der Seite auswirken.
Wenn man die Fonts lokal in WordPress nutzt, entfallen einige Anfragen und die Seite könnte unter Umständen dadurch etwas schneller werden. Bei meinen Tests waren die Seiten ohne Google Fonts im Schnitt ca. 100 – 200 ms schneller.
Allerdings performt ein günstiges Shared Hosting mit den lokalen Fonts nicht unbedingt besser als ein Google Server.
Wer die Ladezeit der Fonts verbessern möchte und beim Design Abstriche machen kann, sollte mal einen Versuch mit System-Fonts wagen. Dabei gibt es dann auch keine Lizenz- und Datenschutzprobleme.