Google Fonts lokal und DSGVO-konform einbinden
Im Herbst 2022 rollte erneut eine Abmahnwelle. Diesmal sind Internetseiten im Visier, die Google Fonts nutzen und diese direkt von den Google-Servern einbinden. Google Fonts sind im Webdesign sehr praktisch. Sie können sie auch benutzen. Allerdings sollten Sie sie lokal hosten, um sie DSGVO-konform in Ihrer Website zu verwenden.
Warum ist der Einsatz von Google-Fonts über die Einbindung von den Google-Servern problematisch?
Wenn Sie die Schriften auf diese Weise einbinden, lädt sich der Besucher Ihrer Website die Schriften von einem Google Server auf sein Endgerät herunter. Diese Server können beispielsweise auch in den USA stehen. Google erfasst dabei unter anderem Daten wie:
- die IP-Adresse des Nutzers
- den verwendeten Browser
- die Internetseite, die der Nutzer besucht
- das Betriebssystem des Nutzers
- Bildschirmauflösung und Spracheinstellungen
Mit den Daten lassen sich von Google Nutzerprofile erstellen. Dies gilt vor allem, wenn über den Nutzer bereits weitere Informationen gesammelt wurden.
Rechtlich gilt ein Teil der übermittelten Daten als persönliche Daten. Die Erfassung, Verarbeitung und Weitergabe dieser Daten sind nach geltendem Recht in Deutschland und in der EU nicht ohne die ausdrückliche Einwilligung des Nutzers gestattet. Zudem ist eine datenschutzkonforme Übertragung von persönlichen Daten in die USA derzeit umstritten. Ein entsprechendes Abkommen zum Datenschutz ist aktuell außer Kraft (Stand 11.2022).
Um Google Fonts möglichst datenschutzkonform zu verwenden, bleiben Ihnen nun zwei Optionen:
- Sie integrieren die Schriften über Google und holen sich vom Besucher hierfür die Einwilligung, zum Beispiel über ein Cookie Consent Tool. Damit verbunden ist jedoch nicht nur die Integration und korrekte (!) Einrichtung eines entsprechenden Tools sowie eine Aufklärung in Ihrer Datenschutzerklärung. Sie müssen auch einen Vertrag zur Datenverarbeitung mit Google abschließen und diesen auf aktuelle Rechtsmäßigkeit prüfen. Die rechtlichen Rahmenbedingungen hierfür können sich ändern und müssen ggf. immer mal wieder angepasst werden.
- Sie verzichten auf die (einfache) Einbindung über Google Server und hosten die Schriften selbst. Aus rechtlicher Sicht ist dies sicherlich der empfehlenswertere Weg. Er erfordert jedoch ein wenig technische Arbeit.
Anleitung: DSGVO-konforme Einbindung von Google Fonts über Ihren Webserver
1. Schriften von Google Fonts downloaden und vorbereiten
Die für Ihr Webdesign gewünschten Google Fonts können Sie unter https://fonts.google.com im Reiter Fonts filtern und herunterladen.
Hierfür wählen Sie einfach in der Vorschau mit einem Klick auf die Kachel die gewünschte Schriftart und klicken dann auf „Download family“.
Der Download stellt ein Zip-File bereit, welches beim Entpacken alle Schriftvarianten im Ordner „static“ enthält.
Um alle Browser zu unterstützen, können Sie die Schrift in verschiedenen Formaten einbinden. Google Fonts liefert nach dem Download die Schrift standardmäßig nur im ttf-Format zurück. Zu den empfohlenen Schriftformaten zählen eot, woff, woff2 und ggf. auch svg. Online gibt es etliche Konverter, welche die Schrift in die notwendigen anderen Formate überführen können.
Für Google Fonts bietet sich z. B. der google-webfonts-helper unter https://gwfh.mranftl.com/fonts an. Dieser generiert nicht nur alle notwendigen Schriftformate, sondern liefert auch gleich noch das @font-face CSS-Snippet mit!
Für Nicht-Google-Fonts empfiehlt sich z. B. der OTF Converter unter https://cloudconvert.com/otf-converter, der auch aus anderen Schriftformaten als nur OTF konvertiert.
2. Schriften bereitstellen und einbinden
Die heruntergeladenen Schriften sammeln Sie nun am besten in einem eigenen Ordner, z. B.: fonts. Hier können Sie später auch weitere Schriften hinzufügen.
Diesen Ordner legen Sie auf Ihrem eigenen Webspace bzw. Webserver in Ihren Theme- oder Template-Ordner. Falls Sie bei WordPress ein Child-Theme verwenden, dann packen Sie den Ordner dort hinein.
Nun müssen Sie die Schrift einbinden. Dies erfolgt im CSS über die @font-face Anweisung:
@font-face {
font-family: 'Ethereal-Thin';
src: url('../fonts/Ethereal-Thin.eot');
src: url('../fonts/Ethereal-Thin?#iefix') format('embedded-opentype'),
url('../fonts/Ethereal-Thin.woff2') format('woff2'),
url('../fonts/Ethereal-Thin.woff') format('woff');
font-weight: normal;
font-style: italic;
}
Im obigen Beispiel haben wir die Schrift „Ethereal-Thin“ eingebunden. Der URL-Parameter zeigt den relativen Pfad zur lokal hinterlegten Schrift. Im Beispiel navigieren wir also eine Ordnerebene nach oben, um von dort im Ordner „fonts“ die unterschiedlichen Formate der Schrift zu laden.
Geschafft! Die gewünschte Schrift ist eingebunden und kann für das Anzeigen Ihrer Website verwendet werden.
Wie erkenne ich, dass auf meiner Websites Google Fonts in nicht rechtskonformer Weise einsetzt werden?
Das oben beschriebene Vorgehen entfernt natürlich nicht automatisch bereits eingebundene externe Schriftaufrufe. Wenn Sie z. B. das Theme eines Drittanbieters oder externe Plugins einsetzen, sollten Sie unbedingt prüfen, ob noch Schriften von extern eingebunden werden!
Prüfen von Cookies und externen Aufrufen Ihrer Website mithilfe von Browser-Funktionen
Aufrufe von externen Ressourcen können Sie sich über die Entwicklungsumgebung Ihres Browsers anzeigen lassen. Diese wird manchmal auch Entwicklertools oder Konsole genannt.
In Chrome funktioniert das beispielsweise so:
Über die drei Punkte in der rechten oberen Ecke gehen Sie auf > Weitere Tools > Entwicklertools. Alternativ können Sie auch die Tastenkombination „STRG + Umschalttaste + i“ (Windows) bzw. „“Alt + Befehlstaste + i“ (Mac) verwenden.
Die Entwicklertools öffnen sich nun in einem Bereich Ihres Browserfensters, je nach gewählter Darstellungsoption z. B. ganz unten oder am rechten Rand.
In den Entwicklertools von Chrome wählen Sie den Reiter „Netzwerk“ und rufen anschließend Ihre Website auf. Falls Sie die Website bereits geöffnet haben, müssen Sie sie noch mal neu laden, damit die Netzwerkaufrufe protokolliert werden.
Sie sehen nun, welche Netzwerkverbindungen beim Aufruf Ihrer Website hergestellt werden. Wenn dies sehr viele sind, können Sie über die beiden Filter „Schriftart“ und „Anfragen von Drittanbietern“ die Anzeige auch eingrenzen.
Wie Sie in dem Beispiel oben sehen, werden hier zwei externe Schriften von fonts.gstatic.com (Google) geladen. Hinweis: Sollte bei Ihnen keine Spalte „Domain“ angezeigt werden, klicken Sie mit der rechten Maustaste oben in die Kopfzeile der Tabelle und setzen Sie noch ein Häkchen bei „Domain“.
Um herauszufinden, was in Ihrer Website die Aufrufe erzeugt, fahren Sie in der Spalte „Initiator“ mit der Maus über die jeweiligen Einträge.
In unserem Beispiel wird der Aufruf durch das Google ReCaptcha erzeugt.
Prüftools für Google Fonts im Internet
Wenn Sie nicht über die Konsole in Ihrem Browser prüfen möchten, gibt es inzwischen auch im Internet verschiedene Tools, die eine Überprüfung der Schrift-Einbindung sowie zu weiteren Aspekten zum Datenschutz anbieten. Einfach mal googeln. 😉
Einen schlanken Google-Fonts-Scanner stellt beispielsweise e-Recht24 unter der folgenden Adresse kostenfrei zur Verfügung: https://www.e-recht24.de/google-fonts-scanner
Die Konsole (hier Chrome-Entwicklertools) hat natürlich den Vorteil, dass Sie auch gleich nach der Ursache forschen können.
Externe Aufrufe lokalisieren und entfernen
Sie haben externe Aufrufe von Google Fonts gefunden? Dann geht es daran, die Quelle zu finden. Hierfür durchsuchen Sie das gesamte Projekt nach der entsprechenden URL oder nach den passenden Schlagwörtern.
Mögliche Fundorte sind Templates und Themes ebenso wie Erweiterungen oder Plugins.
Wenn Sie die Aufrufe beseitigt haben, sollten Sie es natürlich noch mal kontrollieren (siehe oben).
Besondere Probleme mit Google Fonts bei Erweiterungen und Plugins
Werden von externen Plugins Google Fonts geladen, ist es meist schwierig, wenn nicht gar unmöglich, die Einbindung zu unterbinden. Vielleicht gibt es ein anderes vergleichbares Plugin ohne Google Fonts? Oder Sie kontaktieren den Entwickler und weisen ihn auf das Problem mit dem europäischen Datenschutz hin. Manche Plugins bieten auch eine Option zur Deaktivierung der Schriftart.
Eine Alternative wäre natürlich der Hack des Plugins. Dies ist in der Regel jedoch nicht zu empfehlen. Bei einem der nächsten Plugin-Updates können Ihre Änderungen wieder überschrieben werden.
Dann verzichten Sie einfach darauf, das Plugin regelmäßig zu aktualisieren? Meist auch keine gute Idee! Früher oder später führt das zu Kompatibilitätsproblemen oder gar zu kritischen Sicherheitslücken.
Besonders achtsam sollten Sie sein, wenn Sie Google-Dienste auf Ihrer Website nutzen. Die meisten Google-Dienste binden Schriften direkt von den Google Servern ein, z. B. Google Maps und ReCaptcha.
Das Entfernen dieser Dienste stellt die einzige Möglichkeit dar, die Einbindung zu verhindern. Oder Sie arbeiten mit einem entsprechenden User-Consent. Die Rechtslage hier ist aber noch recht volatil.
Hinweis in eigener Sache / Disclaimer: Die rechtlichen Zusammenhänge haben wir nach bestem Wissen zusammengestellt. Sie stellen aber keine Rechtsberatung dar! Die Rechtslage kann sich zudem ändern. Alle Aussagen ohne Gewähr.
Verwandte Informationen:
Core Web Vitals – Google und die neue Page Experience
Wie kann ich eine WordPress Website einfach mit einem Passwort schützen?