Google Fonts — consent fix

Beim Laden von Schriftarten sendet Google Fonts sofort die IP-Adresse Ihres Besuchers an die Server von Google. Im Jahr 2022 urteilte das Landgericht München (LG München I), dass eine IP-Adresse personenbezogene Daten darstellt. Da diese Daten übermittelt werden, bevor der Besucher über Ihren Cookie-Banner seine Einwilligung gegeben hat, verstößt Ihre Website gegen die DSGVO.

Warum Google Fonts zu früh geladen wird

Google Fonts werden fast nie über den Google Tag Manager geladen. Stattdessen sind sie meist direkt als <link>-Tag im Quellcode Ihrer Website platziert oder tief in einem Stylesheet über eine CSS-@import-Regel versteckt. Sobald der Browser den Code liest, ruft er die Schriftart direkt bei Google ab.

Die Lösung: Google Fonts lokal hosten (Beste Lösung)

Die schnellste und robusteste Lösung erfordert überhaupt keinen Cookie-Banner und keine Einwilligungslogik: Hosten Sie die Schriftarten selbst. Wenn die Schriftarten auf Ihrem eigenen Server liegen, stellt der Browser des Besuchers keine Verbindung zu Google her, und das Datenschutzproblem ist sofort gelöst.

Schritt 1: Schriftarten herunterladen

1. Besuchen Sie das Tool Google Webfonts Helper.
2. Suchen Sie nach der Schriftart, die Ihre Website verwendet (z. B. Roboto oder Open Sans).
3. Wählen Sie die benötigten Schriftschnitte (Weights) aus.
4. Laden Sie die .zip-Datei mit den WOFF2-Dateien herunter.

Schritt 2: Schriftarten auf Ihren Server hochladen

1. Entpacken Sie die .zip-Datei.
2. Laden Sie die Schriftart-Dateien per FTP (oder über den Dateimanager Ihres Hostings/CMS) in einen Ordner auf Ihrem Server hoch, z. B. /fonts/.

Schritt 3: CSS anpassen

Ersetzen Sie das Google Fonts <link>-Tag oder die @import-Regel durch das vom Webfonts Helper bereitgestellte CSS.

1. Entfernen Sie den ursprünglichen Google Fonts-Link aus Ihrem HTML oder Stylesheet. Beispiele für das, was Sie entfernen müssen:

   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
   

   Oder in Ihrem CSS:

   @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
   

2. Fügen Sie das neue CSS zu Ihrem eigenen Stylesheet hinzu. Stellen Sie sicher, dass der Dateipfad zu den Schriftarten korrekt ist.
3. Fügen Sie font-display: swap; in die CSS-Regel ein, um unsichtbaren Text während des Ladevorgangs zu vermeiden.

Alternative Lösung (über GTM)

Wenn Sie die Schriftarten absolut nicht lokal hosten können, müssen Sie diese über den Google Tag Manager als Custom HTML Tag laden. Stellen Sie sicher, dass dieses Tag einen Ausnahme-Trigger hat, bei dem Consent State — functionality_storage auf denied gesetzt ist. Achtung: @import-Regeln in CSS-Dateien umgehen den GTM vollständig und müssen trotzdem manuell entfernt werden.

Überprüfung

Verlassen Sie sich nicht darauf, wie die Schriftart optisch aussieht. Verwenden Sie den Network-Tab Ihres Browsers.

1. Öffnen Sie Ihre Website in einem Inkognito-Fenster.
2. Ignorieren Sie den Cookie-Banner.
3. Öffnen Sie die Entwicklertools (F12) und navigieren Sie zum Network-Tab.
4. Suchen Sie nach fonts.googleapis.com. Es dürfen absolut keine Dateien von dieser Domain geladen werden.

Sind Sie unsicher, ob die Anpassung funktioniert hat, oder möchten Sie ausschließen, dass andere Skripte noch Daten leaken? Führen Sie einen kostenlosen Scan mit ConsentChecker.eu durch, um sofortige Gewissheit zu erhalten.

Quellen

• Urteil des LG München I zu Google Fonts (Januar 2022)
• Google Webfonts Helper