HIER GEHT'S LOS

Google Fonts DSGVO-konform verwenden

tl;dr: Österreichische Unternehmen erhalten derzeit vermehrt E-Mails, in denen sie zur Zahlung von 100€ oder 190€ Schadensersatz aufgefordert werden. Angeblicher Grund dafür ist ein DSGVO-Verstoß bei der Verwendung von Google Fonts auf der Website. In unserem Blogartikel verraten wir dir, was die Hintergründe hinter diesem Schreiben sind und wie du am besten bei der DSGVO-konformen Einbindung von Webfonts vorgehst.

Lesezeit: ca. 12 Minuten
Letztes Update: 28. Juli 2022

Die WKO warnt vor Abmahnungen

Die WKO bereits darüber informiert, dass derzeit ein Unterlassungsschreiben inklusive Auskunftsbegehren eines Rechtsanwalts aus Niederösterreich im Umlauf ist. Dieses Schreiben fordert eine Zahlung über € 190 und Auskunft zur angeblich nicht korrekten Verwendung von Google Fonts. Die WKO selber bietet ihren Mitgliedern Unterstützung durch die hauseigenen Rechtsexperten an.

Auch andere deutschsprachige Experten für Themen rund um Datenschutz und Rechtstexte, wie z.B. die IT-Recht Kanzlei aus München, warnen vor solchen Abmahnungen. Im Netz kursieren bereits mehrere Vorlagen für so genannte Formschreiben, auf welchen diese Abmahnungen basieren.

Daher solltest du einer DSGVO-konformen Verwendung von Google Fonts bzw. Webfonts definitiv Augenmerk schenken. Am besten, du gehst auf Nummer sicher und bietest überhaupt keine Angriffsfläche für Abmahnungen, Schadenersatzforderungen oder Strafen. Dazu ist es notwendig, dass du eine DSGVO-optimierte Einbindung von Google Fonts auf deiner Website sicher stellst.

Was sind Google Fonts?

Google (Web) Fonts sind bei Webentwicklern beliebte und vor allem sehr nützliche Schriftarten, welche seit 2010 direkt und kostenfrei von Google zur Verfügung gestellt werden. Ursprünglich hat Google diese Fonts entwickelt und angeboten, um das vorherrschende Problem proprietärer Schriftarten zu umgehen, welche im Web manchmal nicht fehlerfrei dargestellt werden konnten.

Google Fonts

Google Fonts können auf einer Website dynamisch oder statisch eingebunden werden. Die dynamische Methode ist einfacher und wird über die sogenannte CSS API vorgenommen. Mit einem simplen Codeschnipsel kann die gesamte Bandbreite der verfügbaren Google-Schriftarten dann auf deiner Website verwendet werden – ganz ohne irgendeine Registrierung oder großen technischen Aufwand. Dazu musst du auf fonts.google.com eine Schriftart auswählen und anschließend auf “Select” klicken.

Google Fonts Roboto einbinden

Eine Einbindung über HTML (“<link>”) sollte so früh wie möglich im <head> Bereich deiner Website erfolgen. Der Code sieht in diesem Beispiel folgendermaßen aus:

<head>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” rel=”stylesheet”>
</head>

Besser ist jedoch die Einbindung über CSS mit Hilfe der @import Variante. Hier musst du den nachfolgenden Code am Anfang deines CSS Stylesheets einbinden.

<style>
@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);
</style>

Doch egal ob du auf deiner Website bisher die <link> oder @import Methode verwendet hast – genau diese dynamischen Einbindungs-Methoden werden jetzt zum Problem.

Webfonts und die DSGVO

Gleich vorweg – du kannst Google Fonts oder auch andere Webfonts (z.B. von Adobe) nach wie vor verwenden. Du musst also auf deiner Website nicht alles umreißen oder neugestalten.

Grundsätzlich gilt, dass auf einer Website vor der Einwilligung in die Nutzung von Cookies keine Elemente geladen werden dürfen, für welche der Nutzer laut DSGVO seine ausdrückliche Einwilligung erklären muss. Die Zustimmung für den Einsatz jeglicher Art von Cookies und Trackern, die personenbezogene Daten von Usern einholen und verarbeiten, muss demnach vorhanden sein. Das gilt beispielsweise für Webanalyse mit Google Analytics, die Einbindung einer Landkarte aus Google Maps, das Meta Pixel (ehem. Facebook Pixel), sowie auch für Google Fonts, wenn diese dynamisch vom Google Server (mit der <link> oder @import Variante) geladen werden.

Webfonts und personenbezogene Daten

Die Funktionalität dieser häufigen Website-Elemente ist davon abhängig, dass personenbezogene Daten (z.B. die User-IP-Adresse, das Gerät, demografische Daten, etc.) an die Server der jeweiligen Betreiber der Dienste gesendet werden. Bei Google und Meta (Facebook) befinden sich diese Server größtenteils in den USA, wo die Datenschutzrichtlinien nicht den europäischen Anforderungen entsprechen.

Verstöße gegen die DSGVO durch unzureichende Konfiguration der Tracker oder des Cookie Consents können zu Abmahnungen und Geldstrafen führen. Dies gilt nicht nur für Server in den USA, sondern auch für solche, die sich in Drittländern ohne sogenannten Angemessenheitsbeschluss (Art. 45 DSGVO) befinden.

Webfonts und Consent Management Tools

Die Verwendung von Google-Diensten ist allerdings mithilfe des richtigen, aber sehr komplexen Consent Managements trotzdem auch in der EU möglich. Jedoch entstehen auch im Falle einer korrekten Consent-Lösung bei der dynamischen Einbindung der Schriftarten visuelle Probleme. Denn so müssten die Google Fonts theoretisch nach der Zustimmung zur Nutzung nachgeladen werden. Davor bzw. wenn der User der Nutzung nicht zustimmt, muss die Website dann ohne Google Fonts auskommen – für das Design im Bezug auf das Corporate Design und die Usability natürlich eine Katastrophe. Eine Lösung über eine (Cookie) Consent Lösung drängt sich im Fall der Webfonts also nicht wirklich auf. Es gibt jedoch eine Alternative.

Google Fonts statisch und lokal einbinden

Die EU-DSGVO stößt sich bei Google Fonts daran, dass beim Laden der Schriftarten Benutzerdaten an US-Server übertragen werden. Dies kann aber relativ einfach umgangen werden, indem die entsprechenden Schriftarten anstelle der Anbindung über die Google Fonts API auf dem lokalen Server abgelegt und von dort geladen werden. Praktischerweise bietet Google alle websicheren Schriften auch zum Download an.

Download Google Fonts

So muss für das Laden der Schriftarten nicht auf die Zustimmung der Nutzer gewartet werden, da Nutzerdaten gar nicht erst in die USA übertragen bzw. Fonts von amerikanischen Google-Servern geladen werden. Dies gilt natürlich nur, sofern sich der Server deiner Website in der EU befindet. Wenn das der Fall ist, verwendest du Google Web Fonts DSGVO-konform.

Tipp: prüfen, ob Google Fonts richtig verwendet werden

Bevor du irgendwelche Maßnahmen zu Google Fonts ergreifst, solltest du zuerst überprüfen, ob diese überhaupt notwendig sind. Vielleicht möchtest du aber auch selber herausfinden, ob eine Website, welche du als Nutzer besuchst, Webfonts DSGVO-konform eingebunden sind. Mit der nachfolgenden Anleitung überprüfst du die Verwendung der Schriftarten:

Schritt 1: Auf einer Website mit Rechtsklick + Untersuchen die Entwicklertools öffnen.

Schritt 2: Unter Netzwerk den Button Schriftarten auswählen und mit STRG+R oder F5 die Seite neu laden.

Check Google Fonts

In diesem Fall ist die Schriftart Flexo auf demselben Server wie unsere Website selbst abgelegt (bei Flexo handelt es sich nicht um eine Google Font, sondern um eine Webfont von einem anderen Anbieter). Die Implementierung ist also korrekt.

Der nächste Screenshot zeigt einen Fall, wo sehr wohl Google Fonts über die Fonts API geladen werden. Man erkennt es an der Anfrage-URL, welche entweder fonts.gstatic.com oder fonts.googleapis.com ist. Damit diese Website nicht gegen die DSGVO verstößt, müssen die Webfonts lokal eingebunden werden.

Google Fonts gstatic

Über den Reiter Quellcode in der Konsole können solche Schriftarten ebenfalls ausfindig gemacht werden:

Chrome Schriftarten

Sollte sich herausstellen, dass deine Website entweder gar keine Webfonts nutzt, oder diese sowieso schon lokal auf dem Server der Website abgelegt sind, dann sind keine weiteren Schritte mehr erforderlich und du kannst durchatmen. Falls aber nun doch eine Schriftart über die Google-Server geladen wird, dann empfehlen wir dringend die Umstellung auf lokal abgelegte und geladene Schriftarten.

Tipp: Google Fonts Checker verwenden

Alternativ (und wesentlich schneller) kannst du den Google-Fonts-Checker von sicher3.de zur Überprüfung verwenden.

Google Fonts Checker

Einbindung von Google Fonts auf dem lokalen Server

Jetzt, nachdem du überprüft hast und herausgefunden hast, dass deine Schriftarten vom Google Server geladen werden, musst du einige Dinge auf deinem Server bzw. in deinem CMS anpassen. Die lokale/manuelle Einbindung der Google Fonts ist zwar nicht schwierig, allerdings sind ein Zugriff auf den Server der Website über (s)FTP sowie etwas Wissen über die technische Beschaffenheit des Backends der Website bzw. des Website-CMS notwendig.

Schritt 1: Google Web Fonts identifizieren und downloaden

Falls auf deiner Website tatsächlich noch Webfonts von den Google-Servern geladen werden, dann folgt im ersten Schritt die Identifikation der betroffenen Schriftarten und im nächsten Schritt der Download dieser Schriftarten. Zur Identifikation der Schriftarten kannst du die gleiche Vorgehensweise wie zur Überprüfung (siehe oben) verwenden.

Um dabei die richtigen Files zu erhalten, gibt es zwei Varianten:

Zum einen kannst du dies direkt bei fonts.google.com erledigen. Die erhaltenen Dateien müssen dann aber noch mit Hilfe eines Converters in das Format Woff2 überführt werden. Woff steht übrigens für “Web Open Font Format”.

Der einfachere Weg ist es jedoch, die benötigten Schriftarten über dieses praktische Web Fonts Helper Tool von Mario Ranftl zu beziehen.

Web Fonts Helper Tool

Schritt 2: Font-Dateien und CSS hinterlegen

Die Woff2-Dateien musst du anschließend über dein (s)FTP-Programm wie z.B. FileZilla auf das passende Verzeichnis auf deinem Webserver hinterlegen. Am besten du legst ein neues Verzeichnis namens “fonts” an. Wenn du dieses direkt im Hauptverzeichnis (also unter public_html) anlegst, dann kannst du im Web Fonts Helper Tool den voreingestellten Pfad /fonts/ unverändert lassen.

Folder Fonts FTP

Wenn du die Schriftarten aber beispielsweise in den Ordner deines Child-Themes legst, dann musst du dieses Verzeichnis dementsprechend anpassen. In diesem Fall auf beispielsweise /wp-content/themes/name-des-child-themes/fonts/.

Anschließend kopierst du das benötigte CSS aus “Copy CSS” und wählst dabei die Methode “Best Support” aus. So stellst du sicher, dass auch ältere Browser die Schriftarten richtig darstellen können. Anschließend hinterlegst du dieses kopierte CSS entweder in das style.css File deines Child-Themes oder alternativ in das zusätzliche CSS. Auf einer WordPress-Seite findest du diese Option unter Design > Customizer > Zusätzliches CSS. Wenn du beispielsweise die Schriftart Roboto einbinden willst, würde das Codeschnipsel ungefähr so aussehen:

Roboto Webfonts

Schritt 3: Fonts über CSS verwenden

Nun kannst du die lokal abgelegten Google Web Fonts ganz regulär verwenden. Das könnte dann in etwa so aussehen:

body {
  font-family: “Roboto”;
}

Wichtig: die bestehende CSS-Datei muss nicht bearbeitet werden, wenn du weiterhin die gleichen Schriftarten verwendest wie zuvor und die Einbindung in der Custom CSS vorgenommen wurde.

Schritt 4: Verbindung zum Web Fonts-Server kappen

Abschließend musst du noch sicherstellen, dass auch die dynamische Verbindung zu den Servern von Google Fonts aufgelöst wird. Wenn du die Webfonts zuvor über ein WordPress-Plugin eingebunden hattest, dann ist es ausreichend, das entsprechende Plugin zu deaktivieren und/oder zu löschen. Falls die Webfonts aber beispielsweise über ein WordPress-Template eingebunden sind, dann können die entsprechenden Einstellungen in den Theme-Optionen im Bereich Schriftarten getroffen werden.

Schritt 4.1: Plugin “Disable and Remove Google Fonts” für WordPress

Bei WordPress gibt es mit dem Plugin “Disable and Remove Google Fonts” außerdem auch ein Plugin, welches wir selber schon erfolgreich gestestet haben und das auf Basis der bisherigen Bewertungen (Stand: 27. Juli 2022) von unserer Seite für die Verwendung empfohlen werden kann.

Disable and Remove Google Fonts

Umsetzung durch MONOBUNT

Zugegeben, die Implementierung von lokal ladenden Google Fonts bzw. Webfonts ist nicht ganz ohne. Wenn du daher auf Nummer sicher gehen und die Google Fonts auf deiner Website DSGVO-optimiert und ladezeit-technisch optimiert umgesetzt haben willst, dann melde gerne dich bei uns. Wir unterstützen dich, damit du Zeit und Nerven sparen kannst!

Zum Kontaktformular | MONOBUNT anrufen

Archive

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Bürozeiten:
MO-DO 08:00 – 17:00 Uhr
FR 08:00 – 12:00 Uhr