Google Fonts und DSGVO: lokal einbinden

Was beim Einbinden von Google Fonts passiert

Der Standardweg, eine Google-Schrift zu nutzen, ist eine Zeile im Kopf der Seite, die ein Stylesheet von Google einbindet. Dieses Stylesheet verweist wiederum auf die eigentlichen Schriftdateien. Der Browser holt also nacheinander zwei Dinge von Google, bevor die erste Zeile Text gezeichnet wird.

Bei beiden Verbindungen erfährt Google die IP-Adresse des Besuchers, die aufgerufene Seite als Referrer und die üblichen Browser-Header. Dazu kommt oft ein preconnect-Hinweis im Kopf, der den Browser anweist, die Verbindung schon vor dem eigentlichen Abruf aufzubauen. Auch dieser Hinweis allein erzeugt eine Verbindung zu Google, selbst wenn danach keine Schrift geladen wird.

Warum ein Cookie-Banner hier nichts ändert

Ein Consent-Tool blockiert Skripte. Es hält Google Analytics, den Meta-Pixel oder ein YouTube-Video zurück, bis jemand zustimmt. Schriften werden aber nicht per Skript geladen, sondern per Stylesheet, und der Browser holt sie, bevor das Banner überhaupt gezeichnet ist. Kein gängiges Consent-Tool greift an dieser Stelle ein.

Die Messung bestätigt das. Auf Websites mit erkanntem Cookie-Banner laden 25,4 % ihre Schriften vor der Einwilligung extern, auf Seiten ohne Banner 26,1 %. Der Unterschied ist Rauschen. Wer glaubt, mit dem Banner sei das Thema erledigt, irrt auf jeder vierten Seite.

Daraus folgt auch: Eine Einwilligung für Schriften ist praktisch nicht umsetzbar, ohne die Seite umzubauen. Die Lösung ist keine Einwilligung, sondern das Weglassen der Verbindung.

Rechtslage: das Münchner Urteil und was daraus folgt

Im Januar 2022 hat das Landgericht München I einem Besucher 100 Euro Schadensersatz zugesprochen, weil eine Website Google Fonts per Link von Google geladen und dabei seine IP-Adresse übertragen hatte (Urteil vom 20.01.2022, Az. 3 O 17493/20). Das Gericht stützte sich darauf, dass die dynamische IP-Adresse ein personenbezogenes Datum ist und dass der Betreiber die Schriften genauso gut lokal hätte einbinden können. Damit fehlte nach Auffassung des Gerichts ein berechtigtes Interesse an der externen Einbindung.

Das Urteil ist eine erstinstanzliche Entscheidung und keine bindende Regel für andere Gerichte. Es zeigt aber das Argument, das trägt: Wenn eine datensparsame Alternative technisch trivial ist, lässt sich die Verbindung schlecht rechtfertigen. Auf die Abmahnwelle, die das Urteil auslöste, folgten Ermittlungen gegen Beteiligte. Das ändert nichts an der Sachlage, dass der Weg ohne Verbindung der unproblematische ist.

Google Fonts lokal einbinden: Schritt für Schritt

Die Schriften stehen überwiegend unter der SIL Open Font License oder der Apache-Lizenz. Beide erlauben ausdrücklich, die Dateien herunterzuladen und auf dem eigenen Server auszuliefern. Prüfen Sie die Lizenz der einzelnen Schrift auf der Seite von Google Fonts.

1. Dateien beschaffen

Laden Sie die Schrift auf der Seite von Google Fonts herunter oder nutzen Sie einen Dienst wie den google-webfonts-helper, der fertige woff2-Dateien samt CSS liefert. Für Projekte mit Paketverwaltung gibt es die Schriften auch als npm-Pakete bei Fontsource. Sie brauchen nur die Schnitte, die Sie wirklich verwenden, und in der Regel nur das Format woff2.

2. Auf den Server legen und deklarieren

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700.woff2') format('woff2');
}

3. Die Verbindung zu Google entfernen

Diese Zeilen müssen aus dem Kopf der Seite verschwinden:

<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=Inter:wght@400;700&display=swap"
      rel="stylesheet">

Ebenso @import url('https://fonts.googleapis.com/...') in Stylesheets. Ein preconnect auf Google ohne anschließenden Abruf ist weiterhin eine Verbindung.

4. Die wichtigste Datei vorladen

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font"
      type="font/woff2" crossorigin>

Das hält die Ladezeit der Seite konstant oder verbessert sie, weil der Umweg über zwei fremde Hosts mit eigenem Verbindungsaufbau entfällt.

Wo sich externe Schriften nach der Umstellung verstecken

Die Umstellung im eigenen Stylesheet ist der leichte Teil. Die Messung zeigt regelmäßig, dass danach noch Verbindungen übrig sind.

• Theme-Einstellungen. Viele Themes lassen die Schriftauswahl in den Optionen und laden Google Fonts selbst, unabhängig vom Stylesheet.
• Page-Builder. Builder bringen eigene Schriftlisten mit und binden die gewählten Schriften beim Rendern ein. Manche haben eine Option für lokales Laden, die nicht standardmäßig aktiv ist.
• Plugins. Formulare, Slider, Kalender und Cookie-Banner bringen eigene Stylesheets mit, in denen Google Fonts per Import stehen.
• Icon-Schriften. Material Icons und ähnliche Symbolschriften werden oft ebenfalls von Google geladen.
• Eingebettete Widgets. Karten (Google Maps), Videos (YouTube) und Bewertungs-Widgets laden ihre eigenen Schriften, auch wenn Ihre Seite keine externe Schrift mehr nutzt.
• Tag-Manager. Ein Tag kann Stylesheets nachladen, die in keiner Vorlage stehen.
• Cache und Optimierer. Ein Plugin, das Stylesheets bündelt, kann ältere Stände mit Google-Verweis ausliefern. Cache leeren und neu messen.

Adobe Fonts und andere Schriftdienste

In der Messung stehen neben Google Fonts auch Adobe Fonts (use.typekit.net): 66.328 Websites laden sie vor der Einwilligung. Das Prinzip ist dasselbe, die Lösung ist es nicht. Adobe Fonts ist ein Abonnement-Dienst, dessen Schriften nach den Lizenzbedingungen nur über Adobe ausgeliefert werden dürfen. Lokales Hosting ist dort nicht vorgesehen. Wer die Verbindung vermeiden will, wählt eine Schrift mit offener Lizenz oder erwirbt eine Lizenz für Selbst-Hosting bei einer Schriftgießerei.

Plattformen und Baukästen

Wie viele Seiten betroffen sind, hängt stark vom System ab. In unserer Messung laden vor der Einwilligung extern: Squarespace 63,7 %, Webflow 51,9 %, WordPress 36,2 %, Shopify 26,2 %, Wix 10,6 %, TYPO3 8,6 %. Auf Baukasten-Plattformen ist Ihr Handlungsspielraum kleiner. Dort bleibt oft nur, eine Schrift zu wählen, die die Plattform selbst ausliefert, oder eigene Schriftdateien hochzuladen, soweit die Plattform das erlaubt. Bei WordPress, TYPO3 und Shopify lässt sich lokales Hosting umsetzen, bei WordPress auch mit einem Plugin, das die Dateien herunterlädt und die Verweise umschreibt.

Datenschutzerklärung

Wer Google Fonts lokal hostet, braucht in der Datenschutzerklärung keinen Abschnitt zu Google Fonts mehr, weil keine Verbindung zu Google besteht. Verweisen Sie stattdessen auf die lokal eingebundenen Schriften, wenn Sie die Transparenz erhöhen möchten. Löschen Sie den alten Abschnitt nicht, solange noch Verbindungen bestehen. Er soll zur Wirklichkeit passen, nicht zur Absicht.

Für Agenturen: ein Standard für alle Kundenprojekte

1. Schriften lokal als Projektstandard. Im Starter-Theme liegen die Dateien im Repository, nicht auf einem fremden Server.
2. Eine Prüfung im Relaunch. Ein Scan der fertigen Seite in einem frischen Browser, bevor der Kunde sie sieht. Verbindungen zu fonts.googleapis.com oder fonts.gstatic.com sind ein Prüfpunkt.
3. Bestand abarbeiten. Kundenseiten aus den Jahren vor 2022 laden Schriften fast immer extern. Eine Liste aller Mandanten mit Treffer ist die Aufgabenliste für einen Nachmittag.
4. Wiederholte Messung. Plugins und Theme-Updates bringen Verbindungen zurück.

Complianty legt für extern geladene Schriften ein eigenes To-Do mit der Priorität Wichtig an, dessen Lösung das lokale Hosting ist, getrennt von den Tracking-Befunden.

So prüfen Sie das Ergebnis

1. Seite in einem privaten Fenster öffnen, Entwicklerwerkzeuge und Reiter Netzwerk öffnen, dann neu laden.
2. Das Cookie-Banner nicht bedienen.
3. Nach fonts.googleapis, fonts.gstatic und typekit filtern. Es darf kein Treffer erscheinen.
4. Im Reiter Schriften prüfen, dass die Dateien von Ihrer eigenen Domain kommen.
5. Im Quelltext nach fonts.g suchen, um Verweise zu finden, die nur in bestimmten Zuständen laden.
6. Jede Unterseitenvorlage prüfen, nicht nur die Startseite: Blog, Shop, Kontakt, Kasse.