TL;DR
Über die Google-API geladene Google Fonts übertragen die IP-Adresse jedes Besuchers automatisch an die Server von Google, ohne vorherige Einwilligung. Die IP-Adresse ist nach der DSGVO ein personenbezogenes Datum, sodass diese Übermittlung eine nicht konforme Datenverarbeitung darstellt. Im Januar 2022 entschied das Landgericht München, dass eine Website mit extern geladenen Google Fonts gegen die DSGVO verstößt. Die Lösung: Hosten Sie die Schriftarten in Webflow selbst, indem Sie sie als Custom Fonts hochladen. Damit entfallen sämtliche Anfragen an die Server von Google.
Warum verursachen Google Fonts ein DSGVO-Problem?
Die Google Fonts API funktioniert ganz einfach: Lädt ein Browser eine Seite, die eine bei Google gehostete Schriftart verwendet, sendet er eine HTTP-Anfrage an die Server von Google (fonts.googleapis.com). Diese Anfrage enthält automatisch die IP-Adresse des Besuchers.
Google gibt an, diese IP-Adressen zu erfassen und für Analysezwecke zu nutzen. Der Gerichtshof der Europäischen Union hat im Breyer-Urteil (Rechtssache C-582/14) bestätigt, dass IP-Adressen personenbezogene Daten sind. Die DSGVO verlangt daher eine Rechtsgrundlage für diese Verarbeitung.
Ein berechtigtes Interesse lässt sich hier nicht geltend machen, denn das Selbsthosten der Schriftarten ist eine einfache technische Alternative, die jede Datenübermittlung vermeidet. Das Münchner Gericht hat dies im Januar 2022 bestätigt: Der Websitebetreiber hätte die Schriftarten lokal hosten und so eine zusätzliche Datenverarbeitung vermeiden können.
Was die Rechtsprechung sagt
Im Januar 2022 entschied das Landgericht München, dass eine Website, die Google Fonts über die Google-API einbindet, gegen die DSGVO verstößt. Nach Ansicht des Gerichts verletzte die Übermittlung der IP-Adresse des Besuchers an Google ohne vorherige Einwilligung das Recht auf informationelle Selbstbestimmung. Der Betreiber wurde zu 100 Euro Schadensersatz verurteilt, doch die Tragweite dieses Präzedenzfalls ist erheblich.
Seit diesem Urteil wurden in Deutschland Tausende Abmahnungen an Websitebetreiber verschickt, die extern geladene Google Fonts verwenden. Auch andere Datenschutzbehörden in Europa, insbesondere in Österreich, haben ähnliche Positionen bezogen.
In Frankreich hat die CNIL bislang keine spezifische Entscheidung zu Google Fonts veröffentlicht. Ihre Linie zu Datenübermittlungen an Server Dritter ohne Einwilligung deckt sich jedoch mit der Position des Münchner Gerichts. Eine Website, die IP-Adressen ohne Rechtsgrundlage an Google überträgt, trägt dasselbe Risiko.
Deckt ein Cookie-Banner Google Fonts ab?
Nein, ein Cookie-Banner löst das Google-Fonts-Problem nicht, wenn die Schriftarten über die Google-API geladen werden. Google Fonts setzen zwar keine Cookies, lösen aber eine Übermittlung personenbezogener Daten (der IP-Adresse) aus, sobald die Seite lädt.
Diese Übermittlung erfolgt vor jeder Interaktion des Nutzers mit dem Consent-Banner. Technisch werden die Anfragen an fonts.googleapis.com beim Rendern der Seite ausgelöst, also gleichzeitig mit der Anzeige des Banners. Der Nutzer hatte noch keine Gelegenheit, seine Einwilligung zu erteilen oder zu verweigern.
Selbst wenn Sie das Laden der Google Fonts bis zur Einwilligung blockieren würden (was in Webflow technisch aufwendig ist), entstünde ein Darstellungsproblem: Die Seite würde zunächst mit Ersatzschriften gerendert und sich nach der Einwilligung verschieben. Das Selbsthosten bleibt die einzige saubere Lösung. Mehr zu konformen Bannern erfahren Sie in unserem Leitfaden zum DSGVO-Cookie-Banner.
So erkennen Sie, ob Ihre Webflow-Website Google Fonts extern lädt
Die zuverlässigste Methode ist die Prüfung der Netzwerkanfragen im Browser. So gehen Sie in Chrome vor.
Schritt 1: Entwicklertools öffnen
Rufen Sie Ihre veröffentlichte Website auf, klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“. Wechseln Sie zum Tab „Netzwerk“.
Schritt 2: Anfragen filtern
Laden Sie die Seite neu und filtern Sie nach „fonts.googleapis.com“ oder „fonts.gstatic.com“. Erscheinen Anfragen, lädt Ihre Website Schriftarten von den Servern von Google.
Schritt 3: Quellcode prüfen
Sie können auch den Seitenquelltext anzeigen (Strg+U) und nach „webfont.js“ oder „fonts.googleapis.com“ suchen. Finden sich diese Verweise, ist das externe Laden bestätigt. Webflow weist in seiner eigenen Dokumentation darauf hin, dass die Google-Fonts-Integration die Google Fonts API nutzt und möglicherweise nicht DSGVO-konform ist. Sie können außerdem den FlowConsent-Scanner für ein vollständiges Audit Ihrer Website nutzen.
So hosten Sie Google Fonts in Webflow selbst
Durch das Selbsthosten entfallen alle Anfragen an die Server von Google. Die Schriftdateien liegen auf den Servern von Webflow, und es werden keine Daten an Dritte übermittelt.
Schritt 1: Schriftarten herunterladen
Rufen Sie Google Fonts (fonts.google.com) auf, wählen Sie Ihre Schriftart aus und laden Sie die Dateien herunter. Bevorzugen Sie das Format WOFF2 für optimale Ladezeiten. Alternativ können Sie den Google Webfonts Helper verwenden, der die Dateien samt passendem CSS direkt erzeugt.
Schritt 2: Schriftarten in Webflow hochladen
Öffnen Sie in Webflow die Site Settings und dann den Tab „Fonts“. Klicken Sie unter „Custom Fonts“ auf „Upload“. Laden Sie Ihre WOFF- oder WOFF2-Dateien hoch und benennen Sie jede Variante eindeutig (zum Beispiel „Inter Local“, „Inter Local Bold“).
Schritt 3: Schriftarten im Designer ersetzen
Öffnen Sie den Webflow Designer, ermitteln Sie jede CSS-Klasse, die die Google-Schrift verwendet, und ersetzen Sie sie durch die hochgeladene Custom-Version. Prüfen Sie alle Breakpoints: Manche Schriftarten werden womöglich nur in der Mobil- oder Tablet-Ansicht verwendet.
Schritt 4: Google-Fonts-Anbindung entfernen
Kehren Sie zu den Site Settings zurück, Tab „Fonts“, Bereich „Google Fonts“. Löschen Sie jede hinzugefügte Google-Schrift. Veröffentlichen Sie die Website und prüfen Sie anschließend erneut mit den Entwicklertools, dass keine Anfragen mehr an die Server von Google gehen.
Häufige Falle: die Standardschriften von Webflow
Webflow bindet im Designer standardmäßig einige Google Fonts ein (Lato, Varela, Open Sans usw.). Verwendet Ihre Website eine dieser Schriftarten, kann sie auch nach dem Löschen in den Einstellungen weiterhin von Google geladen werden. Die Lösung: Laden Sie dieselbe Schriftart als Custom Font hoch und ersetzen Sie alle Vorkommen im Designer. Einen vollständigen Leitfaden zum Cookie- und Einwilligungsmanagement auf Webflow finden Sie in unserem Fachartikel zum Thema.
Häufige Fehler (und wie Sie sie vermeiden)
Annehmen, es gehe nur um Cookies. Google Fonts setzen keine Cookies, übertragen aber die IP-Adresse. Das Problem fällt unter die Regeln zur Übermittlung personenbezogener Daten, nicht unter die ePrivacy-Richtlinie zu Trackern.
Die Schriftart in den Einstellungen löschen, ohne die CSS-Klassen zu ersetzen. Wenn Sie eine Google-Schrift löschen, ohne die Klassen zu ersetzen, die sie verwenden, greift Webflow auf eine Ersatzschrift zurück. Ermitteln und ersetzen Sie alle Vorkommen, bevor Sie löschen.
Über Custom-Code-Embeds geladene Schriftarten vergessen. Manche Templates oder Komponenten von Drittanbietern binden Google Fonts über Link-Tags im Custom Code ein. Prüfen Sie Head Code und Body Code in den Website- und Seiteneinstellungen.
Schriftarten aus eingebetteten Drittanbieterdiensten ignorieren. Ein Chat-Widget, ein externes Formular oder ein Embed kann selbst Google Fonts laden. Das Audit sollte sich nicht auf Ihre eigenen Webflow-Einstellungen beschränken.
Nach dem Veröffentlichen nicht testen. Testen Sie immer auf der veröffentlichten Website, nicht im Designer. Der Webflow Designer und die veröffentlichte Website können sich beim Laden externer Ressourcen unterschiedlich verhalten.
Checkliste: Google Fonts auf Webflow korrigieren
- Öffnen Sie die Entwicklertools des Browsers auf Ihrer veröffentlichten Website und prüfen Sie, ob Anfragen an fonts.googleapis.com oder fonts.gstatic.com gehen.
- Ermitteln Sie alle im Webflow Designer verwendeten Google Fonts (Quellcode prüfen, nach webfont.js suchen).
- Laden Sie die entsprechenden Schriftdateien im Format WOFF2 von Google Fonts oder dem Google Webfonts Helper herunter.
- Laden Sie die Schriftarten als Custom Fonts in den Site Settings, Tab „Fonts“, hoch.
- Ersetzen Sie im Designer jedes Vorkommen der Google-Schrift durch die Custom-Version, in allen Breakpoints.
- Prüfen Sie den Custom Code (Head Code, Body Code, Seitenebene) und entfernen Sie jeden Link zu fonts.googleapis.com.
- Löschen Sie die Google Fonts in den Site Settings, Bereich „Google Fonts“.
- Veröffentlichen Sie die Website und testen Sie erneut mit den Entwicklertools.
- Prüfen Sie, dass eingebettete Drittanbieterdienste (Chat, Formulare, Widgets) nicht selbst Google Fonts laden.
- Dokumentieren Sie die Korrektur in Ihrer DSGVO-Dokumentation.
Fazit
Die Nutzung von Google Fonts über die Google-API auf einer Webflow-Website ist eine DSGVO-Lücke, die die meisten Agenturen übersehen. Die Lösung ist einfach, schnell umgesetzt und verbessert oft sogar die Performance der Website. Wenn Sie alle Tracker und Datenübermittlungen auf Ihrer Website ermitteln möchten, einschließlich externer Schriftarten, starten Sie einen kostenlosen Scan mit FlowConsent.