google Fonts DSGVO-Konform lokal ins Theme einbinden

Der Artikel besteht aus 936 Wörtern. Geschätzte Lesezeit: 03:44 Minuten

In 4 Tagen, dem 25. Mai 2018, tritt die Datenschutzgrundverordnung endgültig in Kraft. Und wie bei vielen Gesetzen der EU üblich, ist in vielen Punkten noch nicht wirklich 100%ig klar, was zukünftig erlaubt oder verboten ist. Wie genau die Vorgaben jetzt umgesetzt bzw. angepasst werden müssen, damit man sie korrekt anwendet, werden erst die Gerichte festlegen müssen.

Zu den Punkten, bei denen nicht endgültig klar ist, ob der jetzige Zustand dann noch legal ist, gehören die google Fonts. Denn hier ist die Frage, ob man sie weiterhin über den google-Server beziehen darf, oder ob man sie Lokal auf dem Hostereigenen Server ablegen muss. google selbst sagt, das dort auf der Subdomain fonts.googleapis.com keine Daten gespeichert werden, da es sich um eine Cookielose Domain handelt. Somit wäre es erlaubt, die Schriftarten wie bisher über google zu beziehen.

Und selbst bei den Fachleuten ist man sich uneins. Je nach dem eigenen Standpunkt sagen die Experten, das man die Schriften weiterhin von google beziehen kann, bzw. das es zukünftig eben nicht mehr erlaubt sein wird, die Verbindung zum google-Server herzustellen.

Um also rechtlich möglichst auf der sicheren Seite zu sein, empfiehlt es sich, die Schriften auf den eigenen Server zu legen. Wie das funktioniert, darum soll es in diesem Artikel gehen. Als Beispiel dient hier das MH-Theme Magazine.

Menü-Schritt zum Typographie-Menü
Nach dem Klick auf Design klickt man auf Customizer. Es öffnet sich ein weiteres Menü mit dem Menüpunkt Theme-Optionen. Hier klickt man auf den Punkt Typographie

Im Menü Design gibt es hier einen Unterpunkt Customizer. Dieser enthält wiederum einen Unterpunkt Theme Optionen. Dort findet sich ein Menüpunkt Typographie. Er zeigt an, welche Schriftarten und -größen aktuell im Theme genutzt werden. Bei mir sind es Open Sans und Noto Sans in den Größen 300, 400,400italic, 600 und 700px.

Um nun diese google Fonts lokal zu speichern, geht man auf die Seite google webfonts helper. Dort wählt man oben links die entsprechende Schriftart aus und bekommt im Hauptfenster die Möglichkeit, den Zeichensatz sowie die Schriftstile auszuwählen. Als Zeichensatz lässt man in der Regel latin stehen. Dann sind die verwendeten Schriftstile auszuwählen.

Code in der style.css auf absoluten Pfad umstellen

Ist das geschehen, klickt man auf das grau unterlegte Feld Copy CSS. Mit der rechten Maustaste kopiert man diesen Code und fügt ihn dann am besten im Child-Theme-Ordner in die style.css ein.

Scrollt man dann etwas weiter herunter, gibt es einen Button, mit dem man die ganzen Schriftarten und -stile per zip-Datei auf den eigenen Rechner herunterladen kann. Hier entzippt man die Datei dann am besten in einen eigenen Ordner.

Bevor man die entpackten Dateien auf den Server hochlädt erstellt man hier im wp-content-Verzeichnis einen neuen Ordner namens Fonts und lädt die Files dorthinein.

Diese Schritte wiederholt man nun für alle Fonts, die im Theme aktuell verwendet werden.

Bevor man in einem letzten Schritt die Verbindung zum google-Server kappt, muss man noch einmal in der style.css Hand anlegen. Denn aus der relativen Pfadangabe '../fonts/niconne-v7-latin-regular.eot' muss eine absolute Angabe werden. Diese sieht dann wie folgt aus: https://domain/wp-content/fonts/niconne-v7-latin-regular.eot

Statt jetzt jeden Schriftstil händisch anzupassen (was bei manchen Themes sicher ausarten kann), kann man das auch mit Notepad++ in einem Schritt erledigen. Dazu einfach im Menüpunkt Suchen auf 'Suchen' klicken, hier dann auf Ersetzen. Dort gibt man für Suchen nach .. ein und für Ersetzen durch https://domain/fonts. Mit Klick auf alle Ersetzen hat man mit einem Schlag alle Pfade angepasst.

google-fonts auf dem eigenen Server laden
In der style.css muss der Code angepasst werden.

Bleibt, wie erwähnt, der letzte Schritt: Die Verbindung zum google-Server zu kappen.

Hier gibt es verschieden Möglichkeiten. Zum einen kann man ein weiteres Plugin installieren, z. B. Remove Google Fonts References, oder man bindet ein Code-Snippet ein. Das sieht wie folgt aus:

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);

Plugin auf Funktionalität kontrollieren

Bevor ihr die Verbindung kappt, ladet Eure Seite in einem privaten Fenster z. B. von Firefox. Dann könnt ihr anhand dessen, ob sich nach einem neuen Laden der Seite (z. B. mit F5) die Zeilen verschieben, feststellen, ob alles wie gewünscht funktioniert. Denn wenn aus drei Zeilen (Vorschau)Text plötzlich zwei werden oder in einer Zeile plötzlich mehr / weniger Text steht, dann wurde ein bestimmter Schriftstil nicht geladen, und der Browser greift auf die Systemschriftart des Besuchers zurück.

Wie ihr die Verbindung zum Server kappt, bleibt Euch überlassen. Es kann passieren, das das eingesetzte Plugin aus irgendwelchen Gründen den Dienst verweigert.

Vorher aber unbedingt den Cache leeren, um kein verfälschtes Ergebnis zu erhalten.

Wenn ihr vor dem Laden der Seite noch F12 drückt und auf Sources geht, sollte von fonts.googleapis.com nichts mehr zu sehen sein. Achtet aber auch darauf, ob in der style.css nicht noch eine Schriftart via @import geladen wird, die ihr noch nicht heruntergeladen habt. Ansonsten wird in diesem Fall die Schriftart vom System des Besuchers genommen - was in der Regel nicht gut ausschaut.

In der Regel können die Schriftarten und -stile frei verwendet werden. Die meisten google-Fonts unterliegen der SIL Open Font License, 1.1, ein paar andere unter liegen der Apache License, version 2.0.

Es wird vor allem nicht privaten Nutzern empfohlen, die Lizenzbedingungen genauer zu studieren.

Marcus
Über Marcus 707 Artikel
Ich freue mich über Deinen Besuch auf meinem Blog! Wenn Dir der Artikel gefallen hat, teile ihn doch mit anderen und hinterlasse Deine Meinung. Mehr über mich gibt es hier zu lesen

Hinterlasse jetzt einen Kommentar

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


CommentLuv - verlinke einen deiner Blog-Artikel