Schriften von Drittanbietern

Was geprüft

Gesucht werden im HTML Einbindungen von Schriftdiensten der Dienstliste, etwa Google Fonts (fonts.googleapis.com, fonts.gstatic.com), Adobe Fonts und Font Awesome Kits, als Stylesheet, Skript oder preconnect-Hinweis.

Wie relevant

Nur Information, ohne Wertung: Der Datenschutz-Indikator zählt nicht zum Gesamtwert. Er beschreibt technische Beobachtungen; welche Regeln gelten, hängt vom Einzelfall ab. Wird ein Dienst sofort eingebunden, erscheint er als „vermutlich beim Aufruf geladen“; ist er nur vorbereitet (type="text/plain" oder nur data-src, typisch für Einwilligungs-Blocker), erscheint er als „erst nach einer Interaktion“. Ob ein Einwilligungsbanner das sofortige Laden verhindert, ist ohne Browser nicht feststellbar.

Warum

Werden Schriften von einem fremden Server geladen, geht beim Seitenaufruf eine Anfrage mit der IP-Adresse des Besuchers an diesen Anbieter. Selbst gehostete Schriften vermeiden diese Anfrage. Ob daraus eine rechtliche Pflicht folgt, klären Sie mit Ihrer Rechtsberatung; öffentliche Leitfäden bieten z. B. die Industrie- und Handelskammern (IHK, Deutschland), die Wirtschaftskammer Österreich (WKO) und die Datenschutzbehörden.

Wie beheben

Laden Sie die Schriftdateien (WOFF2) herunter, legen Sie sie auf Ihren eigenen Server und binden Sie sie per @font-face ein. Entfernen Sie danach die alten Links und preconnect-Hinweise auf den Schriftdienst.

Nebenwirkung: Prüfen Sie die Lizenz der Schrift für das Selbst-Hosten. Fehlen einzelne Schriftschnitte oder Zeichensätze, weicht die Darstellung ab; vergleichen Sie die Seite vorher und nachher und prüfen Sie im Netzwerk-Tab, dass keine Anfrage mehr an den Dienst geht.

WordPress: Themes und Page-Builder laden Google Fonts oft selbst. Viele bieten eine Einstellung zum lokalen Laden; sonst helfen Plugins, die die Schriften lokal speichern. Prüfen Sie danach, ob ein weiteres Plugin die Schrift erneut einbindet.

Codebeispiel

HTML/CSS: Schrift selbst hosten

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
</style>

Weiterführende Quellen

• https://developers.google.com/fonts/docs/getting_started
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• https://www.datenschutzkonferenz-online.de/orientierungshilfen.html