WordPress Google Fonts

Google bietet eine riesige Auswahl an Schriftarten, mit denen Sie Ihre Website stilistisch aufpeppen können. Und nicht nur das: Google Fonts sind einfach herunterzuladen und im Handumdrehen im WordPress Backend eingebunden. Doch sofern Sie diese Fonts downloaden und über den Google-Server einbinden, schrillen alle Datenschutz-Glocken in der EU, denn die Schriften werden von eben diesem Google-Server nachgeladen. Das bedeutet: Dadurch werden unter anderem die jeweilige IP Adresse, der Browser und auch der Referrer an Google übertragen. Genau das verstößt gegen die DSGVO, da es a) im Hintergrund geschieht und b) die Nutzer diesem Vorgang nicht aktiv zustimmen oder ablehnen können.

Laden von Googleserver in der EU nicht datenschutzkonform

DSGVO, who? Alte Hasen kennen sie schon. Sofern Sie in die Arbeit mit Websites erst eintauchen wollen, wird Ihnen diese Abkürzung immer wieder begegnen. Mehr noch, sie wird ihr ständiger Begleiter und sie sollten sich die DSGVO zum besten Freund machen: Die Abkürzung steht für Datenschutzgrundverordnung und bündelt gesetzliche Regelungen, die dem Schutz der Daten von Internetusern dienen. Auf Websites wird dies seit den neuesten Bestimmungen mit dem Cookie-Hinweis geregelt. Dieser informiert die User über Daten, die bei dem Besuch erhoben werden und gibt ihnen die Möglichkeit, diese Datenverarbeitung zu akzeptieren oder abzulehnen. Sofern der User auf „ablehnen“ klickt, darf die Website keine Daten, wie IP Adressen, Verweildauer, Klickverhalten etc. speichern. Ohne Einwilligung geht nichts: Die Implementierung dieses Cookie-Hinweises ist verpflichtend und schützt Website-Betreiber vor rechtlichen Konsequenzen. Getreu dem Motto „der Cookie-Hinweis regelt“, gibt man den Usern die Möglichkeiten und ist durch deren aktiver Einwilligung auf der sicheren Seite – neben der Implementierung Ihrer Datenschutzerklärung.

Anders ist es bei der Verwendungen von Google Fonts. Diese werden automatisch über Google Server geladen, was in der EU nicht datenschutzkonform ist, da Google diese personenbezogenen Daten automatisch in die USA überträgt.

Datenübertragungen in die USA – problematisch und rechtswidrig

Die USA zählt laut EU-Definition zu Drittländern ohne angemessenes Datenschutzniveau. Hin und wieder wird die Drittland-Definition vor internationalen Gerichtshöfen gekippt, nur um diese Entscheidungen kurz darauf wieder zu revidieren. Der Hintergrund dieser Streitigkeiten liegt der US-Gesetzgebung, wie der Cloud Act, zugrunde, die es amerikanischen Behörden erlaubt, auf Daten zuzugreifen, die bei US-Unternehmen – wie Google – liegen. Und das auch dann, wenn diese Daten physisch außerhalb der USA gespeichert sind. Somit sind alle Daten, die an die USA übermittelt und von US-Unternehmen gespeichert werden, potenziell dem Zugriff von US-Behörden ausgesetzt. Ein Umstand, der zu 100% der Datenschutzgrundverordnung widerspricht, die sicherstellen soll, dass personenbezogene Daten in der EU geschützt sind.

Google Fonts trotzdem nutzen: lokal und daher im Einklang mit der DSGVO

Wer sich jetzt schon innerlich von seinen Lieblings-Fonts verabschiedet hat, den können wir beruhigen. Kopf hoch, denn es gibt eine datenschutzkonforme Option, alle Google Fonts lokal einzubinden und somit keine rechtlichen Konsequenzen zu fürchten. Dafür müssen Sie die Google Fonts herunterladen und lokal in WordPress auf dem eigenen Webserver hosten. Denn eines darf man nicht vergessen: Die Open Source Fonts von Google dürfen Sie auf jeder beliebigen Webseite verwenden, egal ob geschäftlich oder privat.

Google Fonts lokal hosten: Schritt-für-Schritt-Anleitung

Es bedarf einiger Schritte, Google Fonts lokal einzubinden oder zu hosten. Aber deshalb dürfen Sie nicht verzagen: Wir haben Ihnen im Folgenden eine Anleitung zusammengestellt, die Sie dabei unterstützt, Ihre Schriftarten erfolgreich DSGVO-konform einzubetten, ohne dass Sie auf Ihr präferiertes Design in WordPress verzichten müssen. Und vor allem, um Ihre User vor Zugriffen von Drittanbietern zu schützen und Ihre Privatsphäre sicherzustellen. Also los geht’s, kappen wir Ihre Verbindung zum Google Server!

1. Verwendete Google Fonts identifizieren

Allen voran ist es wichtig, die genutzten Google Fonts auf Ihrer WordPress Website zu identifizieren, um herauszufinden, welche Fonts Sie genau für Ihre Website nutzen. Das ist vor allem wichtig, wenn Sie Ihre Website von einem Dritten erstellt haben lassen und somit nicht selbst wissen, welche Schriftarten verwendet worden sind. Ihnen stehen für die Identifizierung zwei Möglichkeiten zur Verfügung.

Via plugin

Eine Option, um Ihre Google Fonts zu identifizieren, ist die Verwendung des WordPress Plugins OMGF. Was wie ein neuartiger Ausdruck klingen mag, ist die Kurzform von „Optimize my Google Fonts“. Sie können es sich im Plugin-Verzeichnis ganz einfach kostenlos herunterladen. OMGF durchsucht anschließend Ihre Webseite automatisch nach Google Fonts, die von externen Servern geladen werden, und bietet direkt an, diese Fonts lokal zu hosten.

Via Quellcode

Mit einem Schritt in die etwas tiefere Materie Ihres Themes, lassen sich Google Fonts auch im HTML-Quelltext identifizieren. Öffnen Sie dafür Ihre Website im Front End und wählen Sie die Tastenkombination Strg + U. Es öffnet sich ein kleines Fenster mit dem gesamten Quellcode. In diesem müssen Sie nach fonts.googleapis.com und font.gstatic.com suchen. Sofern Sie diese gefunden haben, wird in genau der gleichen Zeile auch die entsprechende Schrift ausgewiesen.

In den Einstellungen der verwendeten Themes

Zurück hinter die Kulissen Ihrer WordPress Website: Auch in den Einstellungen Ihres verwendeten Themes können Sie Google Fonts identifizieren. Klicken Sie dafür in Ihrem Dashboard auf Design und darunter auf Customizer oder gehen Sie zu Theme Optionen. In beiden Varianten müssen Sie nun nach dem Abschnitt Typography oder Schriften suchen. Sofern Google Fonts geladen werden, stolpern Sie häufig über Font Dateien wie Roboto oder Lato.

Die dritte Variante wäre der Weg im WordPress Backend über Design zum Theme-Editor. Unter dieser Option lässt sich auch in Dateien wie functions.php oder in CSS-Dateien wie style.css nach fonts.googleapis.com suchen. Somit wird Ihnen auch genau die Google Fonts angezeigt, die das Theme lädt.

2. Google Fonts aus Plugins und Themes entfernen

So, nun haben Sie den Überblick, wie viele und vor allem welche Google Fonts in Ihrem Theme zu finden sind. Auf zu Schritt 2: Raus damit! Und das ohne Programmierer spielen zu müssen, denn technische Unterstützung ist zur Stelle: Das WordPress Plugin Disable and Remove Google Fonts hilft Ihnen dabei, die Schriften zu entfernen. Laden Sie das Plugin einfach herunter und lassen Sie es durchlaufen. Das Plugin löscht sämtliche Google Fonts von Ihrer WordPress Website, ohne, dass Sie selbst weitere Schritte unternehmen müssen. Die Basis für einen Neustart ist geschaffen!

Kontrolle mit der Entwicklungskonsole

Aber natürlich gilt: Vertrauen ist gut, Kontrolle ist besser! So sollten Sie nach der Nutzung des Plugins noch einmal gegenchecken, ob alle Google Fonts entfernt worden sind. Und das geht am besten in der Entwicklungskonsole. Gehen Sie in Ihrem WordPress Dashboard unter Design auf Customizer und wählen Sie dort ebenfalls die Tastenkombination Strg + U. Folgend öffnet sich die Entwicklungskonsole, indem sich alle Fonts einsehen lassen.

3. Benötigte Google Fonts herunterladen

Sie haben Ihre WordPress Website nun technisch vom Google Server getrennt, nun geht es daran, Ihren Fontstyle wiederherzustellen – schließlich möchten Sie künftig nicht die System Fonts Ihres Themes nutzen. Dafür laden Sie sich Ihre benötigten Schriften von Google Fonts direkt von der offiziellen Website herunter. Oder Sie nutzen das Tool Google Webfont Helper!

Styles auswählen oder ganze „Family“ herunterladen

Sie haben beim Download die Möglichkeit, einzelne Styles wie Regular, Kursiv oder Fett der jeweiligen Fonts oder die gesamte Font-Family herunterzuladen. Es empfiehlt sich dabei, nur die einzelnen Styles der Google Fonts zu einem Download-Paket zusammenzuschnüren, da sonst die Gefahr besteht, dass die Schrift-Dateien zu groß sind und unnötig viel Platz auf Ihrem Server einnehmen.

Mit Ihren Notizen zu den Google Fonts, die Sie vorher in Ihrem style.css identifiziert haben, können Sie ganz einfach im Suchformular nach genau dieser Font suchen und sie direkt herunterladen.

Format anpassen und Fonts hochladen

Egal, welchen Weg Sie wählen: Alle Google Fonts laden Sie automatisch als TrueType-Schriftartendateien .tff herunter. Leider ist es jedoch nicht möglich, die Schriften in diesem Format auf Ihrem Server hochzuladen. Deshalb müssen Sie das Format entweder in .woff, .woff2 oder .eot konvertieren. Hier kommt wieder der Google Web Fonts Helper zum Einsatz. Über den kleinen Helfer können Sie alle gewünschten Schriftarten im passenden Font-Format downloaden.

Sobald Sie die Fonts inklusive CSS-Code heruntergeladen sind, können Sie die Dateien auf den FTP-Server Ihrer Website laden. Achten Sie dabei darauf, die Schriften in einem Unterverzeichnis Ihres Child Themes mit dem Titel /fonts abzulegen oder im regulären fonts-Verzeichnis unter /wp-content/themes/fonts.

4. Google Fonts im Child Theme installieren

Last but not least, müssen Sie die auf Ihrem Server hochgeladenen Fonts in Ihrem WordPress Child Theme installieren. Leider reicht der Upload auf dem FTP Server nicht aus: So sind die Schriften zwar physisch auf dem Server verfügbar, aber weder WordPress oder der Browser wissen, dass die Fonts existieren oder wie sie diese verwenden sollen.

Somit müssen die Schriften für die Erkennung und Zuordnung installiert werden – und das nicht etwa im Parent Theme, sondern im Child Theme. Installieren Sie die Schriften nur im Parent Theme und nehmen somit Änderungen im style.css vor, werden diese bei einem Update überschrieben. Eine Installation im Child Theme schützt Sie somit davor, dass Ihre Anpassungen verloren gehen.

Bei der Installation Ihrer Google Fonts stehen Ihnen zwei Varianten zur Verfügung.

CSS herunterladen

Beim Download Ihrer Google Fonts können Sie auch das entsprechende CSS generieren. Dieser CSS-Code, den Sie auch aus dem Google Webfont Helper kopieren können, lässt sich dann in die style.css-Datei einfügen.

Dabei sollten Sie darauf achten, sicherzustellen, dass Sie den richtigen Zielpfad für die Schriftartendateien haben.

Dateipfade im CSS ersetzen und Childtheme aktualisieren

Nach der Implementierung des CSS-Codes müssen Sie in der CSS-Datei Ihres WordPress Child Themes den Schriften die gewünschten Elemente zuordnen.

Anschließend ist es wichtig, dass Sie das Child Theme aktualisieren. Ist dieser Schritt abgeschlossen, sollten Sie auch hier nochmals kontrollieren, ob die Google Fonts nun wirklich lokal eingebunden sind. Dafür lässt sich das Plugin Remover Google Fonts References installieren, welches noch vorhandene Google Fonts detektiert, nachdem Sie Ihren Cache gelöscht und das Plugin durchlaufen lassen haben.

Alternativ können Sie Ihre Website auch einer Überprüfung durch den Google Fonts Checker der Seite www.sicher3.de unterziehen. Geben Sie dafür einfach die URL Ihrer Website in den Checker ein, klicken Sie auf „überprüfen“ und warten Sie auf das Ergebnis.

Vorsicht bei Google Maps

Hach, es könnte alles so schön sein: Ihr Cookie-Hinweis läuft einwandfrei, Ihre Google Fonts sind lokal in WordPress eingebunden und die lästige Verbindung zum Google Server ist passé. Doch was ist das?! Da guckt doch schelmisch Google Maps um die Ecke!

Ja, Sie haben richtig gelesen – Google lässt sich nicht ganz so leicht ausbooten und hat bei seiner Applikation Maps noch ein kleines „Geschenk“ eingebaut, über das sich die DSGVO nicht freuen wird: Sofern Sie also Google Maps eingebunden haben, könnten Sie Probleme mit dem Datenschutz bekommen.

Grund dafür ist die Schrift Roboto, die standesgemäß für die Präsentationen in Google Maps genutzt werden und – Überraschung – vom Google Server geladen wird. Aber Gott sei Dank gibt es auch hierfür eine Lösung. Zwar lässt sich diese eine Google Font nicht lokal in WordPress einbinden, aber im Handumdrehen freundlich zur Tür hinaus begleitet werden. Wie? Indem Sie die Datei /js/norobotofontbymaps.js im entsprechenden Verzeichnis des Child Themes erstellen und folgenden Code in die Date übernehmen:

¡var head = document.getElementsByTagName('head')[0];//Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href &&
newElement.href.indexOf('//Fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};

Zuguterletzt fügen Sie den folgenden Code in die php Ihres Child-Themes ein:


/*Prevent roboto Fonts loaded by google Maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps',
$child_theem_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script ('norobotofontbymaps');