Wie du Google Fonts auf deiner Website einsetzt
Sicherlich hast du schon von der neusten DSGVO-Abmahnwelle gehört: Webfonts sind das neue Böse. Erst recht wenn man sie von Google bezieht. So zumindest das gängige Narrativ. Lass mich doch etwas Licht ins Technische bringen:
Was ist eigentlich passiert?
Ein Urteil des Landgerichts München vom Januar 2022 hat etwas losgetreten, dass es jetzt ziemlich einfach macht Webseiten, die Google Fonts über Google einbinden, abzumahnen.
Wo entsteht dabei das Datenschutzproblem?
Wenn deine Website von Google direkt Fonts bezieht, wird beim Aufruf deiner Website auch etwas von Google Fonts aufgerufen. Bei diesem Aufruf wird die IP-Adresse deines Besuchers übermittelt – da deine Webseite den Browser deines Nutzers auffordert eine Schrift von Google-Fonts zu laden. Da (wie übrigens bei jedem Request im Web) die IP-Adresse übermittelt wird, kann Google den Nutzer identifizieren, es nutzen sehr viele Webseiten Google Fonts in dieser Art und darüber lässt sich bei Google ein Nutzerprofil ermitteln. Das macht die IP zur Personenbezogene Daten und die Tatsache, dass das ohne Zustimmung des Nutzer erfordert zu einem Datenschutzvorfall nach DSGVO.
Warum macht mein Web-Entwickler das so?
Es war über die Jahre hinweg Best-Practice: Es lädt schneller, kommt bei deinen Nutzern konsistent an, egal wie alt deren Browser sind – und es ging ehrlich gesagt super einfach. Das macht’s zum No-Brainer – wäre da jetzt nicht dieses Urteil.
Und hier die des Problems
Es muss vermieden werden Google Fonts von Google zu laden. Oder du holst dir das Opt-In deines Website Besuchers. Da finde ich persönlich die Fonts auf dem eigenen Server (a.k.a Selbstgehostet) sehr viel einfacher.
Google Fonts selbst hosten
Ich habe oben im Bild ein Open-Source-Tool gezeigt, dass die nächsten Schritte enorm vereinfacht.
Die Schritte sind wie folgt:
- Genutzte Google Fonts ermitteln
- Im Google Fonts Helper entsprechende Fonts mit verwendeten Schriftschnitten eintragen
- Schriften vom Tool herunterladen und via SFTP o.Ä. auf deinem Server mit entsprechenden Pfad (zB. /fonts/) ablegen.
- In deinem CSS @font-faces definieren
- Fertig. Kein Stress mehr mit IPs an Dritt-Anbieter durch’s Fonts laden.
Das, was du später im CSS hinzufügst, sollte in etwa so aussehen:
/* arima-regular - latin */
@font-face {
font-family: 'Arima';
font-style: normal;
font-weight: 400;
src: url('../fonts/arima-v1-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/arima-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/arima-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/arima-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/arima-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/arima-v1-latin-regular.svg#Arima') format('svg'); /* Legacy iOS */
}Wieder ein Schritt näher zur Datenschutz-Konformen Website!
Wie du siehst ist die Anpassung überschaulich und am Ende schützt du die Besucher deine Website ein bisschen mehr. Das learning für mich: Es zeigt dass man beim Entwickeln stets den Datenschutz im Hinterkopf behalten sollte. Etwas scheinbar banales (wie hier der Request zu einer externen Resource) kann schnell zur Identifizierung deines Nutzers führen und damit zu einem Problem werden.