Wenn Unternehmer über Datenschutz und juristische Dinge diskutieren, kristallisieren sich sich immer wieder sehr schnell zwei menschliche Grundeinstellungen heraus, die den persönlichen Umgang mit der sensiblen Thematik drastisch verdeutlicht. Die erste Variante: Ist mir egal. Oder die zweite, etwas elegantere Variante: Wie minimiere ich mein Risiko? Genau diese Frage kommt auch auf, wenn man als Webseitenbetreiber die Webfonts-Bibliothek Google Fonts einsetzt, um so einige schicke Schriftarten aus dem Silicon-Valley für ein ansprechendes Webdesign nutzen zu können.
Im Kontext der EU-DSGVO kommt zunehmend die Frage auf, welche Datenschutz-Maßnahmen von Webseiten-Betreibern getroffen werden können, um das Abmahnrisiko möglichst gering zu halten und unnötigen Verstößen gegen den Datenschutz aus dem Weg zu gehen. In meinem Beitrag zum WordPress-DSGVO Update habe ich bereits beschrieben, welche technischen Maßnahmen seitens WordPress bisher getroffen worden, um das beliebte CMS DSGVO-konform zu gestalten. Das betrifft aber nur technische Grundfunktionen und beispielsweise die Datenportabilität. Der Rest hängt – wie so oft – am Allerwertesten der Webseitenbetreiber.
In dieser Anleitung zeige ich dir, wie du das automatische Laden der Google Fonts deaktivieren kannst und stattdessen die Google Fonts lokal auf dem Webserver einbindest. Damit wird verhindert, dass ggf. eine IP-Adresse der aufrufenden Clients an Google übertragen wird. Und das haben unsere Datenschützer bekanntermaßen überhaupt nicht gerne.
Dieses Vorgehen funktioniert sowohl für WordPress-Webseiten, Online-Shops mit WooCommerce als auch jegliche anderen Content-Mangament-Systeme und Webseiten, die auf die Bibliothek der Google Fonts zurückgreifen. Der Einfachheit halber beschränke ich mich hier aber auf die DSGVO-konforme Einbindung der Google Webfonts in WordPress-Webseiten.
DSGVO-konform handeln und externe Google Fonts deaktivieren
Im modernen Webdesign hat es sich etabliert, externe Ressourcen wie Skripte, Stylesheets oder zum Teil auch Bilder und Medien wie Videos und Musik über externe Server oder sog. Content Delivery Networks (CDNs) in die Webseiten einzubinden und nur bei Bedarf dynamisch von anderen Servern nachzuladen, also wenn ein Client diese Ressource explizit abfragt. Das ist in den meisten Fällen natürlich der Webseiten-Benutzer mit „all“ seinen personenbezogenen Daten, wie IP-Adresse oder seiner Browser-Version.
Dieses Vorgehen schont nicht nur Speicherplatz und Ressourcen auf unserem eigenen Webserver, sondern macht die Auslieferung von statischen und dynamischen Ressourcen in den meisten Fällen auch deutlich schneller und performanter. Und performante Webseiten sind in Zeiten von Mobile Traffic, anspruchsvoller SEO und responsive Webdesign absolute Priorität.
Aus Sicht des Datenschutzes ist diese Entwicklung aber eher suboptimal. Schließlich wird durch das Hosting von Ressourcen in sog. CDNs (Content Delivery Networks) auch ein Request an externe Server übertragen, der möglicherweise eine IP-Adresse des anfragenden Clients enthält. Im Kontext der DSGVO ist das alles andere als erfreuend. Schließlich warten dort draußen viele Abmahnanwälte, Hobby-Datenschützer und unterlegene Web-Konkurrenten, die gerne jede noch so kleine rechtliche Grauzone für sinnlose und rechtlich unbegründete Abmahnungen nutzen.
Um das für die Zukunft zu verhindern, sollten wir die Verwendung extern gehosteter Google Fonts deaktivieren und die Google Fonts DSGVO-konform auf unserem eigenen Webserver einbinden.
Welche Google Fonts sind aktiviert?
Bevor wir das tun können, müssen wir zunächst einmal identifizieren, welche Google Webfonts unsere WordPress-Installation überhaupt benutzt. Die Einbindung und Nutzung der Google Fonts wird primär durch das von uns verwendete WordPress-Theme gesteuert.
In Abhängigkeit der verwendeten Schriftarten laden die meisten Themes die ausgewählten Google Schriften über eine Google-API von den externen Google-Servern, um sie dann über die Stylesheets im WordPress-Frontend einzubinden. Kontrollieren lässt sich das Ganze über die Webentwickler-Konsole, die bei gängigen Browsern wie Safari oder Chrome leicht über das Menü (Entwickler / Anzeigen / Darstellung etc.) aktiviert werden kann:
Beim Anklicken der CSS-Ressource fonts.googleapis.com öffnet sich die Ressourcen-Ansicht (je nach Browser auch „Sources“ oder „Inhalte“), die uns anzeigt, welche Google Fonts derzeit aktiviert sind und vom Google-Server geladen werden. In unserem Beispiel sind das zwei Google Fonts:
- Kameron
- Lato
Je nach Theme und verwendeter Schriftart können hier natürlich auch eine beliebige Anzahl an weiteren Schriftarten aufgeführt sein. Die meisten WordPress-Themes enthalten aber auch einen eigenen Design-Tab für die aktivierten Fonts, wie z.B. das Multi Purpose Theme Enfold unter Enfold ➞ Allgemeines Styling ➞ Schriften angezeigt werden können:
Ich empfehle allerdings, trotzdem den Weg über die Webkonsole zu gehen. In einigen Fällen kann es vorkommen, dass in Themes, Plugins, Templates oder Stylesheets bestimmte Google Fonts hart kodiert sind. Diese kleinen Ausreißer lassen sich dann nur über einen temporären Sherlock-Holmes-Modus identifizieren und ggf. vorzeitig eliminieren.
Benötigten Google Fonts herunterladen
Sobald wir die verwendeten Google Fonts identifiziert haben, können wir den nächsten Schritt anstoßen und rufen den Hilfsdienst https://google-webfonts-helper.herokuapp.com/ auf. Dort sind alle aktuellen Google Fonts für den Download im .ZIP-Archiv inkl. ihrer jeweiligen CSS-Style-Angaben gehostet.
Eine smarte Nutzung der Suchfunktion spuckt im Idealfall die ermittelten Fonts aus, in unserem Beispiel die Webfont „Lato“:
Über den Download-Button (4.) können wir die Google Font als ZIP herunterladen. Das Prozedere führen wir für alle Fonts aus, die wir im vorherigen Schritt identifiziert haben. Die CSS-Styles unter „3. Copy CSS“ werden gleich noch einmal relevant. Am besten lässt du den Browser-Tab einfach offen, damit du den Code im übernächsten Schritt kopieren kannst.
Google Fonts auf Webserver hochladen
Die geladenen ZIPs müssen wir nun auf unsere Webserver hochladen, genauer gesagt in ein quasi frei wählbares Verzeichnis, für das unser FTP-User lediglich die korrekten Rechte haben sollte. Default-mäßig eignet sich hier ein Verzeichnis „/fonts“ innerhalb unseres WordPress-Rootverzeichnisses. Das fonts-Verzeichnis kann einfach via Rechtsklick angelegt werden.
Im nächsten Schritt entpacken wir die Google Fonts irgendwo auf unserem Rechner und laden die betreffenden Dateien direkt in das eben angelegte Font-Verzeichnis, damit wir die Pfadangaben später nicht zu tief schachteln müssen.
Die style.css in WordPress anpassen
Damit wir die Google Fonts DSGVO-konform lokal auf unserem Webserver einbinden können, müssen wir noch einen weiteren Schritt erledigen. Zunächst ergänzen wir die style.css unseres WordPress-Themes um die nötigen Angaben zu jeder Google-Font, die wir im vorherigen Schritt heruntergeladen und auf unseren Webserver hochgeladen haben. Dazu eignet sich folgendes Vorgehen:
- Falls noch nicht getan: WordPress Child-Theme installieren
- Die style.css des Mother-Themes in das Child-Theme kopieren
- style.css des Child-Themes öffnen, z.B. via FTP-Client
- Die CSS-Styles aus dem vorherigen Schritt kopieren und in die style.css einfügen
Wichtig: Die Pfadangabe muss auf das Verzeichnis angepasst werden, das wir im vorherigen Schritt angelegt haben. Für das Beispiel würde die Pfadangabe „/fonts/“ funktionieren.
Wir kopieren die CSS-Styles unserer Beispiel-Font „Lato“:
/* kameron-regular - latin */
@font-face {
font-family: 'Kameron';
font-style: normal;
font-weight: 400;
src: url('/fonts/kameron-v8-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Kameron'),
url('/fonts/kameron-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/kameron-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/kameron-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/kameron-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/kameron-v8-latin-regular.svg#Kameron') format('svg'); /* Legacy iOS */
}
Und fügen die Angaben in die style.css unseres Child-Themes ein:
Nicht vergessen: Pfadangaben kontrollieren! Andernfalls funktioniert der nächste Schritt nicht korrekt. Zudem ist das Prozedere für alle verwendeten Google Fonts zu wiederholen.
Verbindung zu Google-Servern unterbrechen
Der ganze Aufwand macht natürlich nur dann Sinn, wenn wir die Verbindung zu den externen Google-Servern im Anschluss auch kappen. Andernfalls werden die sensiblen IP-Adressen trotzdem an Google übertragen. Wie das im Detail funktioniert, hängt allerdings sehr stark von der jeweiligen Implementierung der betreffenden Webseite ab.
Während bei WordPress-Webseiten die Themes oder Plugins für die Verwendung von Bibliotheken wie den Google Fonts zuständig sind, kann das bei Apps oder individuell implementierten Webseiten ganz anders aussehen. Da ich hier nicht alle Fälle abdecken kann, zeige ich das nur beispielhaft anhand einer gängigen WordPress-Implementierung.
Problem: Wie die Deaktivierung von Google Fonts im Einzelfall funktioniert, hängt sehr stark von der jeweiligen Implementation im Theme ab. Einige Themes haben die Einbettung von Webfonts sehr sauber programmiert, was die Deaktivierung über einfache Filter sehr einfach macht. Andere Themes sehen das Ganze etwas anders und haben zum Teil die Google Webfonts-APIs hart im Header des Themes einkodiert. Das macht die Deaktivierung der Google Webfonts mühsam und langwierig.
Wie auch immer. Schauen wir uns einmal drei Lösungsansätze an, mit denen sich die Google Webfonts deaktivieren lassen.
Google Fonts in Enfold deaktivieren
Das weit verbreitete Premium-Theme Enfold ist in Sachen Support und Datenschutz in vielen Fällen sehr nahe am Zahn der (europäisch geprägten) Zeit. Deshalb ist das Deaktivieren der Google Fonts im Theme Enfold ziemlich einfach gehalten.
In einem der letzten Updates vom 4. Juni 2018 hat das Enfold-Team einen neuen Filter für das intern genutzte Avia-Framework hinzugefügt, mit dem der externe Abruf der Google Fonts komplett deaktiviert werden kann:
add_filter( 'avf_output_google_webfonts_script', 'my_output_google_webfonts_script', 10, 1 );
function my_output_google_webfonts_script( $activate )
{
return false;
}
Dieser Filter wird entsprechend in der functions.php des Enfold Child Themes untergebracht. Nach einem Speichern und Upload der functions.php zurück in das Theme-Verzeichnis sieht der implementierte Filter in etwa so aus:
Ist das geschehen, sollten die extern geladenen Google Fonts vollständig deaktiviert sein. Falls du ein anderes WordPress-Theme nutzt, kannst du natürlich auch einen simplen Workaround via Plugin nutzen.
Alternativ lassen sich über das Import/Export-Menü von Enfold auch die jeweiligen Google Fonts als einzelnes ZIP-Archiv hochladen. Wenn wir das für jede verwendete Schriftart tun und im Child Theme alle Komponenten auf die lokalen Fonts umstellen, wird der Aufruf der Webfont-API idealerweise direkt gecancelt:
Google Fonts via functions.php deaktivieren
Wenn du Glück hast, lässt sich die Webfont-API einfach über die functions.php deines Child-Themes deaktivieren. Dann reicht ein simples Dequeue-Snippet, das für die meisten WordPress-Themes verfügbar ist. Hier beispielhaft für die Themes Storefront und Twenty Seventeen (Backup nicht vergessen!):
Enqueue für WordPress Theme Storefront
function storefront_remove_google_fonts() {
wp_dequeue_style( 'storefront-fonts' );
}
add_action( 'wp_enqueue_scripts', 'storefront_remove_google_fonts' );
Enqueue für WordPress Theme Twenty Seventeen
function removeTwentySeventeenFonts() {
wp_dequeue_style('twentyseventeen-fonts');
}
add_action('wp_enqueue_scripts', 'removeTwentySeventeenFonts');
Die etwas härte Methode liegt im Dequeue durch reguläre Ausdrücke (regex). Damit werden alle Styles dequeued, die hier in irgendeiner Form den Ausdruck /fonts\.googleapis\.com\/css\?family/i enthalten. In der Praxis ist das sicherlich die radikalste Variante, funktioniert aber ausgesprochen gut.
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);
Allerdings kann es dann vorkommen, dass einzelne Schriften damit vollständig aus dem Rendering unserer WordPress-Webseite verschwinden. Logisch – wenn wir die den API-Call nicht lokalisieren konnte, konnten wir die Fonts ja auch nicht sauber via style.css ersetzen. In diesem Fall greift dann eine Fallback-Lösung, die meistens durch die jeweiligen System-Schriftarten wie Arial, Helvetica oder Times New Roman aufgefangen werden.
Google Fonts mit Plugin deaktivieren
Wie einfach sich externe Google Fonts deaktivieren lassen, hängt in erster Linie von der Implementation des Themes ab. Ist diese nicht bekannt, kann ein kleiner Workaround via Plugin (möglicherweise) Abhilfe schaffen. Inzwischen gibt es eine Vielzahl an Plugins, die genau das zu tun verspricht: Deaktivierung der Google Fonts.
Normalerweise würde ich hier jetzt ein smartes Stück Code vorstellen, das diese Aufgabe zuverlässig erledigt. Aber weil sich auch Plugins gerne mal ändern, nicht mehr aktualisierst oder von der NSA aus dem Verkehr gezogen werden, schaust du am besten selber im WordPress Plugin Store vorbei und suchst dir eine vielversprechende Variante aus! Ausreichend Auswahl gibt es ja.
Beachte jedoch, dass längst nicht jedes Plugin mit allen Themes und WordPress-Versionen kompatibel ist. Im Zweifelsfall solltest du vor umfangreichen Änderungen ein WordPress-Backup anlegen, damit im Fall der Fälle ein funktionsfähiger Zustand wiederhergestellt werden kann. Als Faustregel gilt ja auch hier: Je aktueller ein Plugin ist, desto besser.
Unter Umständen kann es auch sein, dass überhaupt keines der getestet Plugins bei dir funktioniert. Dann wird die Webfont-API möglicherweise an anderer Stelle implementiert sein, die du nicht über die simple Zuschaltung eines Plugins deaktivieren kannst. Unser WordPress-Support steht dir bei Fragen und Problemen gerne zur Verfügung.
Prüfen: Deaktivieren der Google Fonts erfolgreich?
Vertrauen ist gut, Kontrolle ist besser. Was im Zweifelsfall für den Ehepartner, die Mitarbeiter oder den Bankberater gilt, kann für Datenschutzmaßnahmen nicht verkehrt sein. Deshalb kontrollieren wir über den gleichen Weg, über den wir auch die verwendeten Fonts herausgefunden haben, ob die identifizierten Fonts nun nicht mehr extern über die Google-API bezogen werden. Dazu navigieren wir wieder in unsere Webkonsole / Ressourcen:
In dem Beispiel ist gut zu sehen, wie die Google Fonts nun lokal als .woff-Ressource geladen und eingebunden werden. Mit der Suchfunktion in den Ressourcen lässt sich verifizieren, dass keine Google Fonts mehr von externen Servern geladen werden.
In einigen Fällen kann es sein, dass bei der Verwendung von Google Maps direkt über die Google-Maps API weitere Google-Fonts geladen werden. Hier kann ggf. ein zusätzlicher Workaround nötig werden.
Font-Bibliothek Font Awesome lokal einbinden
Wo wir gerade schon bei Fonts sind. Wer Google Fonts nutzt, ist von der Nutzung weiterer Font-Bibliotheken in den meisten Fällen nicht weit entfernt. Ein beliebtes Beispiel sind ist die frei verfügbare Font-Awesome-Bibliothek, die auf vielen WordPress-Webseiten, Online-Shops oder auch in vielen Mobile Apps zum Einsatz kommt.
Prinzipiell läuft die Einbettung weiter Bibliotheken nicht anders ab, als es bei Google Web Fonts der Fall ist. Die auf externen Servern (CDNs) gehosteten Bibliotheken werden jeweils dynamisch in den Ressourcen der Webseite verlinkt und dann beim Aufruf durch Clients von den CDNs abgerufen.
Damit ist Font Awesome aber nicht weniger kritisch im Hinblick auf die DSGVO. Schließlich wird bei der Einbettung der Fonts auch eine IP-Adresse an die CDNs übertragen. Es ist also ratsam, Font Awesome DSGVO-konform lokal auf dem Webserver zu hosten. Font Awesome bietet dazu eine geeignete Anleitung für das lokale Hosting, mit der sich die Fonts einfach auf dem Webserver hochladen und via Website-Header einbetten lassen.
[sibwp_form id=2]
