Google Fonts lokal einbinden: Die sichere Anleitung für 2026

Auf einen Blick

Google Fonts lokal einzubinden schützt dich vor Abmahnungen und Bußgeldern, weil die Schriftarten dann direkt von deinem Server geladen werden, ohne IP-Adressen an Google zu übertragen. Das LG München I hat am 20.01.2022 (Az. 3 O 17493/20) klargestellt: Wer Google Fonts ohne Einwilligung der Besucher einbindet, verstößt gegen die DSGVO und schuldet 100 Euro Schadensersatz pro betroffener Person. Diese Anleitung zeigt dir, wie du das in 15 Minuten dauerhaft löst.

Warum ist Google Fonts extern ein DSGVO-Problem?

Wenn du Google Fonts über den Standard-Weg einbindest, wird beim ersten Seitenaufruf eine Anfrage direkt an Googles Server geschickt. Dabei überträgt dein Browser automatisch die IP-Adresse deines Besuchers an Google. IP-Adressen sind nach Art. 4 Nr. 1 DSGVO personenbezogene Daten.

Das Problem: Deine Besucher haben in diese Übertragung nicht eingewilligt. Google erhält Daten über das Surfverhalten von Millionen Menschen, ohne dass diese es wissen oder zugestimmt haben.

Das LG München I hat genau das am 20. Januar 2022 für rechtswidrig erklärt (Az. 3 O 17493/20). Der Kläger hatte auf einer Website festgestellt, dass Google Fonts extern geladen wurden, und klagte erfolgreich auf 100 Euro Schadensersatz. Das klingt nach wenig. Aber die Kanzlei, die hinter dieser Abmahnwelle stand, verschickte 2022 und 2023 über 100.000 Abmahnbriefe an Website-Betreiber.

Was das für dich bedeutet:

  • Aktives Risiko, solange du Google Fonts extern lädst
  • Kein Opt-in in einem Cookie-Banner schützt dich (Fonts werden beim ersten Aufruf geladen, bevor jemand klicken kann)
  • Die Lösung ist technisch einfach und kostenlos

Schritt 1: Prüfen, ob deine Website betroffen ist

Bevor du etwas änderst, prüfe, ob deine Website überhaupt Google Fonts extern lädt. Das geht in drei Minuten:

Methode 1: DevTools Network-Tab

  1. Öffne deine Website in Chrome oder Firefox
  2. Drücke F12 (DevTools öffnen)
  3. Wechsle zum Tab "Netzwerk" (Network)
  4. Lade die Seite neu (F5)
  5. Filtere nach "fonts.googleapis.com" oder "fonts.gstatic.com"
  6. Siehst du Treffer? Dann lädst du Fonts extern.

Methode 2: Seitenquelltext

  1. Rechtsklick auf deine Website
  2. "Seitenquelltext anzeigen"
  3. Suche nach "fonts.googleapis.com" (Strg+F)
  4. Jeder Treffer ist ein externes Font-Request

Nutze auch unseren kostenlosen DSGVO-Check, der externe Font-Anfragen automatisch erkennt.

Du willst eine Website, die wirklich Kunden bringt?

KI WebSichtbar entdecken

Schritt 2: Fonts herunterladen mit Google Webfonts Helper

Das praktischste Tool zum Herunterladen von Google Fonts ist der Google Webfonts Helper (verfügbar unter google-webfonts-helper.herokuapp.com). Das Tool generiert dir die fertigen CSS-Regeln und stellt die Font-Dateien zum Download bereit.

Vorgehen:

  1. Suche deine gewünschte Schrift (z. B. "Open Sans")
  2. Wähle die benötigten Schriftschnitte (Regular 400, Bold 700 reichen meist)
  3. Wähle "Modern Browsers" für woff2-Format (bester Kompromiss aus Kompatibilität und Dateigröße)
  4. Kopiere den generierten CSS-Code
  5. Lade die Zip-Datei mit den Schriftdateien herunter

Alternative direkt von Google Fonts:

  1. Öffne fonts.google.com
  2. Wähle deine Schrift aus
  3. Klicke "Get font" und dann "Download all"
  4. Du erhältst .ttf-Dateien, die du mit dem Tool fontsquirrel.com/tools/webfont-generator in woff2 konvertieren kannst

woff2 ist Pflicht: Das Format ist bis zu 30 % kleiner als woff und wird von allen modernen Browsern unterstützt.

Schritt 3: Fonts in dein Projekt einbinden

Erstelle einen Ordner /fonts/ in deinem Website-Verzeichnis und lege die heruntergeladenen Dateien dort ab.

Beispiel für Open Sans (Regular + Bold):

/fonts/
  open-sans-v40-latin-regular.woff2
  open-sans-v40-latin-700.woff2

CSS einbinden:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-v40-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/open-sans-v40-latin-700.woff2') format('woff2');
}

Wichtig: font-display: swap sorgt dafür, dass der Text sofort mit einer Fallback-Schrift angezeigt wird, während die eigentliche Font lädt. Das verbessert den Lighthouse-Score (FCP) spürbar.

Den bisherigen <link> auf googleapis.com im <head> deiner HTML-Datei musst du vollständig entfernen. Er wird jetzt nicht mehr gebraucht.

Schritt 4: Prüfen, ob es funktioniert hat

Öffne wieder die DevTools (F12) und prüfe im Network-Tab:

  • Siehst du Requests an "fonts.googleapis.com" oder "fonts.gstatic.com"? Dann hast du noch einen alten Link übersehen.
  • Siehst du stattdessen Requests auf "/fonts/deine-datei.woff2"? Perfekt, Fonts laufen jetzt lokal.

Zweite Prüfung: Öffne den kostenlosen DSGVO-Check und gib deine URL ein. Das Tool meldet externe Font-Anfragen separat aus.

Was ist mit anderen externen Ressourcen?

Google Fonts ist das bekannteste Problem, aber nicht das einzige. Dieselbe Logik gilt für alle externen Ressourcen, die ohne Einwilligung geladen werden:

Font Awesome über CDN: Wenn du Font Awesome über cdnjs.cloudflare.com oder unpkg.com lädst, schickt dein Browser ebenfalls eine IP-Adresse an Dritte. Lösung: Font Awesome lokal herunterladen und selbst hosten, oder nur die SVG-Icons verwenden, die du wirklich brauchst.

Bootstrap und andere CSS-Libraries via CDN: Gleiches Prinzip. Entweder lokal einbinden oder per Build-Tool (npm) in dein Projekt integrieren.

YouTube-Embeds: Jedes eingebettete YouTube-Video setzt beim Laden Tracking-Cookies von Google. Lösung: YouTube Lite Embed (lädt das Video erst nach Klick) oder "youtube-nocookie.com" als Domain.

Google Maps: Lädt beim Aufruf Tracking-Daten. Lösung: Statisches Kartenbild mit Link zu Google Maps, oder OpenStreetMap-Einbettung via OSM-Embed.

Auf Websites, die wir bei KI-WebSichtbar bauen, sind externe Ressourcen grundsätzlich ausgeschlossen. Alle Fonts, Icons und Libraries laufen lokal. So braucht es keinen aufwendigen Cookie-Banner für technische Ressourcen.

Mehr zu den technischen DSGVO-Anforderungen findest du in unserer DSGVO-Checkliste für KMU-Websites.

Performance-Vorteil: Warum lokale Fonts schneller sind

Neben dem rechtlichen Vorteil gibt es einen handfesten Performance-Gewinn. Externe Fonts benötigen:

  1. DNS-Lookup für fonts.googleapis.com (ca. 20-120 ms)
  2. TCP-Verbindungsaufbau (ca. 20-80 ms)
  3. TLS-Handshake (ca. 30-100 ms)
  4. Download der CSS-Datei
  5. Weiterer DNS-Lookup für fonts.gstatic.com
  6. Download der eigentlichen Font-Datei

Das sind bis zu 6 Netzwerkanfragen, bevor der erste Buchstabe auf dem Bildschirm erscheint. Mit lokalen Fonts: 1 Anfrage an deinen eigenen Server. Das verbessert den Lighthouse-Score in der Kategorie "Performance" messbar, oft um 5-15 Punkte.

Google selbst bewertet Core Web Vitals als Ranking-Signal. Schnellere Fonts können also indirekt auch das Suchmaschinen-Ranking verbessern.

Was passiert, wenn du es nicht änderst?

Die Abmahnwelle 2022/2023 hat gezeigt, dass das Risiko real ist. Spezialisierte Kanzleien betreiben automatisierte Tools, die Websites auf externe Font-Anfragen scannen und dann Abmahnungen verschicken. Der Aufwand für die Kanzleien ist minimal, der Aufwand für dich als Empfänger dagegen erheblich.

Typische Forderungen pro Abmahnung:

  • 100 Euro Schadensersatz
  • Anwaltskosten: 300-800 Euro
  • Strafbewehrte Unterlassungserklärung

Das Gesamtpaket kann schnell 1.000 Euro kosten, auch wenn du das Problem danach sofort behebt. Dazu kommen Stress und Zeitaufwand für die Reaktion.

Prüfe jetzt mit unserem DSGVO-Check, ob deine Website externe Fonts lädt.

WordPress und Seitenbuilder: Wo lauern versteckte Extern-Anfragen?

Besonders tückisch ist die Situation bei WordPress-Websites und Seitenbuildern. Diese laden oft ohne dein Wissen externe Ressourcen.

Typische Problemquellen in WordPress:

  • Themes: Viele Premium-Themes laden Google Fonts direkt aus den Theme-Einstellungen, ohne dass eine eigene Code-Einbindung nötig ist. Prüfe die Theme-Einstellungen auf "Typography" oder "Fonts".
  • Page Builder (Elementor, Divi, WPBakery): Laden eigene Font-Bibliotheken und Google Fonts parallel. Elementor hat seit Version 3.8 eine Option "Advanced" > "Fonts" > "Load Google Fonts Locally". Aktivieren.
  • Plugins: Kontaktformular-Plugins, Slider-Plugins, SEO-Plugins, fast jedes Plugin kann eigene Font-Anfragen mitbringen. Prüfe im Network-Tab nach jedem neuen Plugin.
  • WordPress-Core selbst: Lädt standardmäßig keine Google Fonts, aber einige WordPress-Standardthemes wie Twenty Twenty-Three tun es doch.

Lösung für WordPress ohne Coding:

Das Plugin "OMGF" (Optimize My Google Fonts) oder "Flying Scripts" kann externe Font-Anfragen automatisch blockieren und durch lokale Versionen ersetzen. Trotzdem empfiehlt sich eine manuelle Prüfung mit DevTools.

Wer ein neues Website-Projekt startet, sollte darüber nachdenken, ob WordPress der richtige Weg ist. Statische HTML-Websites haben dieses Problem strukturell nicht, weil keine Third-Party-Plugins mit versteckten Anfragen existieren. Mehr dazu in unserem Vergleich WordPress-Alternativen.

Datenschutzerklärung anpassen nach der Umstellung

Wenn du bisher in deiner Datenschutzerklärung auf Google Fonts hingewiesen hast, musst du diesen Abschnitt anpassen. Ein typischer Google-Fonts-Abschnitt in einer alten Datenschutzerklärung sieht so aus:

"Wir nutzen auf unserer Website Google Fonts der Google LLC. Google Fonts werden über unseren eigenen Server geladen. Es werden keine Daten an Google übertragen."

Sobald das stimmt, ist nichts mehr zu tun. Wenn deine Datenschutzerklärung aber noch den alten externen Einbindungsweg beschreibt oder Google als Dienstleister benennt, obwohl Fonts jetzt lokal laufen: Abschnitt löschen oder auf das lokale Hosting hinweisen.

Lokal gehostete Fonts müssen in der Datenschutzerklärung nicht separat erwähnt werden. Sie sind Teil des normalen Server-Betriebs.

Weiterführende Artikel: Cookie-Banner Pflicht 2026 und Impressum Pflichtangaben 2026.

FAQ: Google Fonts lokal einbinden

Ist das Einbinden von Google Fonts grundsätzlich verboten?

Nein. Du darfst Google Fonts verwenden, aber du musst die Fonts auf deinem eigenen Server hosten. Das externe Laden ohne Einwilligung ist das Problem, nicht die Fonts selbst.

Muss ich für jede Schriftstärke eine eigene Datei hosten?

Ja. Jede Schriftstärke (z. B. 400 Regular, 700 Bold) und jeder Stil (Normal, Italic) ist eine eigene Datei. Lade nur die Schnitte herunter, die du wirklich verwendest. Unnötige Schnitte verlangsamen die Seite.

Reicht es, Google Fonts im Cookie-Banner zu sperren?

Nein. Google Fonts werden beim ersten Seitenaufruf geladen, bevor jemand den Cookie-Banner sehen oder ablehnen kann. Consent hilft hier nicht. Die einzige sichere Lösung ist lokales Hosting.

Was ist der Google Webfonts Helper?

Ein kostenloses Online-Tool (nicht von Google), das dir woff2-Dateien und fertigen CSS-Code für alle Google Fonts generiert. Du musst nichts selbst konvertieren.

Gilt dasselbe für andere Webfonts-Anbieter wie Adobe Fonts oder Typekit?

Ja. Jeder externe Font-Dienst überträgt IP-Adressen. Bei Adobe Fonts (ehemals Typekit) ist der Dienst im Creative Cloud-Abo enthalten, aber datenschutzrechtlich gilt dasselbe. Lokales Hosting ist immer die sicherste Option.

Muss ich nach der Umstellung die Datenschutzerklärung anpassen?

Ja. Wenn du Google Fonts vorher in der Datenschutzerklärung erwähnt hast, entferne diesen Abschnitt oder passe ihn an. Lokal gehostete Fonts müssen nicht separat erwähnt werden.

Wie groß sind die Font-Dateien typischerweise?

Ein woff2-Schriftschnitt ist zwischen 15 und 80 KB groß. Eine typische Website mit 2-3 Schnitten kommt auf 50-200 KB für alle Fonts zusammen. Das ist akzeptabel und wird durch Caching beim zweiten Besuch fast auf null reduziert.