Google Fonts lokal einbinden: so geht es DSGVO-konform

Warum das wichtig ist

Bei der üblichen Einbindung per <link> auf fonts.googleapis.com holt der Browser jedes Besuchers die Schrift direkt bei Google ab. Dabei erfährt Google die IP-Adresse, und niemand hat den Besucher vorher gefragt.

Das Landgericht München I hat am 20. Januar 2022 entschieden (Az. 3 O 17493/20), dass diese dynamische Einbindung gegen die DSGVO verstößt. Der Kläger bekam 100 Euro Schadensersatz, der Betreiber musste die Weitergabe unterlassen. Entscheidend war für das Gericht, dass es für die Weitergabe keinen Grund gab: Die Schriften lassen sich genauso gut vom eigenen Server laden.

Danach rollte eine Abmahnwelle. Viele Betreiber bekamen Schreiben mit Zahlungsforderungen, gegen die Verantwortlichen einer solchen Welle wurde später sogar strafrechtlich ermittelt. Das macht die externe Einbindung nicht rechtmäßig. Es zeigt nur, wie leicht sie sich von außen finden lässt.

Seit Juli 2023 ist Google unter dem EU-US Data Privacy Framework zertifiziert. Das entschärft die Frage der Übermittlung in die USA, ändert aber nichts am Kern des Urteils. Ein angenehmer Nebeneffekt der Umstellung: Die Seite braucht keine zusätzliche Verbindung zu Google-Servern und lädt oft schneller.

Zur Einordnung: Das ist eine allgemeine Information, keine Rechtsberatung. Das Münchner Urteil ist die Entscheidung eines Landgerichts im Einzelfall. Wenn du bereits ein Schreiben bekommen hast, lass es von einem Anwalt prüfen, bevor du zahlst oder etwas unterschreibst.

So prüfst du es selbst

Mit dem kostenlosen Check von checkfrei suchst du automatisch nach Verweisen auf fonts.googleapis.com und fonts.gstatic.com. Ein Treffer ist ein Fehler. Weil checkfrei nur den ersten Aufruf der geprüften Seite ohne Klick auswertet, zeigt ein Test im Browser mehr, etwa Schriften, die ein Skript erst später oder nur auf Unterseiten nachlädt. So gehst du vor:

1. 01Rechtsklick auf die Seite, Seitenquelltext anzeigen, dann mit Strg+F nach fonts.googleapis und fonts.gstatic suchen.
2. 02Gründlicher: Entwicklertools öffnen (F12), Reiter Netzwerk, Seite neu laden und nach fonts.g filtern. Hier siehst du auch Schriften, die erst über eine CSS-Datei nachgeladen werden.
3. 03Wiederhol das auf einigen Unterseiten, vor allem auf solchen mit Slider, Formular oder Karte.

So behebst du es

Die Verweise kommen meist aus dem Theme, aus Page Buildern wie Elementor oder Divi, aus Plugins oder aus einem @import in einer CSS-Datei. Die Lösung ist immer dieselbe: Schriftdateien herunterladen, auf den eigenen Server legen und per @font-face einbinden.

Am bequemsten geht das mit dem google-webfonts-helper, der dir die Dateien im WOFF2-Format und das passende CSS zusammenstellt. Lizenzrechtlich ist das kein Problem, Google Fonts stehen unter offenen Lizenzen wie der SIL Open Font License.

/* Datei liegt auf deinem Server unter /fonts/ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Typische Fehler

• ·Das Haupt-Stylesheet ist umgestellt, aber ein Plugin lädt weiter eine zweite Schrift von Google.
• ·Der preconnect auf fonts.gstatic.com ist stehen geblieben. Er baut die Verbindung zu Google trotzdem auf.
• ·Wechsel zu einem anderen externen Schriftendienst. Bunny Fonts ist datenschutzfreundlicher als Google, die IP-Adresse geht aber trotzdem an einen Dritten. Selbst hosten ist die sauberste Lösung.
• ·Eingebettete Google-Karten oder YouTube-Videos laden ebenfalls Schriften von Google. Das ist dann ein Fall für eingebettete Fremddienste.