Google Fonts lokal hosten: Schritt für Schritt erklärt

Wenn du Google Fonts lokal hostest, liegen die Schriftdateien auf deinem eigenen Webspace und nicht mehr bei Google. Beim Seitenaufruf baut der Browser deiner Besucherinnen und Besucher keine Verbindung zu Google-Servern mehr auf, und ihre IP-Adresse (die Nummer, unter der ein Gerät im Internet erreichbar ist) geht nicht an Google. Bei einer kleinen Website dauert die Umstellung meist weniger als eine Stunde: Schriften herausfinden, herunterladen, mit ein paar Zeilen CSS einbinden, prüfen. Hier steht jeder Schritt, auch für den Fall, dass du deine Website mit Claude oder ChatGPT baust.

Das Wichtigste in Kürze

• Beim üblichen Einbinden lädt der Browser Schriften von fonts.googleapis.com und fonts.gstatic.com, dabei erhält Google die IP-Adresse der Besucher. Lokal gehostet fällt diese Übermittlung weg.
• Ein deutsches Gericht hat 2022 die dynamische Einbindung als Verletzung des Persönlichkeitsrechts gewertet. In der Schweiz verlangt das DSG vor allem Transparenz darüber, welche Daten an Dritte gehen.
• Die Umstellung hat vier Schritte: Schriften ermitteln, als woff2-Dateien herunterladen, per @font-face einbinden, im Browser kontrollieren.
• Mit einem KI-Assistenten wie Claude oder ChatGPT erledigst du die Umstellung im Gespräch, ohne selbst Code zu schreiben.
• Danach kontrollierst du: Im Netzwerk-Reiter des Browsers darf keine Anfrage an eine Google-Fonts-Adresse mehr auftauchen.

Warum Schriften vom eigenen Server besser sind

Google Fonts ist eine grosse Sammlung kostenloser Schriften. Die meisten Websites binden sie mit einer einzigen Zeile im HTML-Code ein, die auf Googles Server verweist. Das ist bequem, hat aber eine Folge: Jeder Seitenaufruf löst eine Anfrage bei Google aus.

Datenschutz: die IP-Adresse bleibt bei dir

Bei der externen Einbindung lädt der Browser laut ConsentBoost zuerst ein Stylesheet von fonts.googleapis.com und danach die Schriftdateien von fonts.gstatic.com. Google selbst schreibt in seinen häufigen Fragen zu Google Fonts, dass diese Anfragen die IP-Adresse, die aufgerufene Adresse und den Browser des Besuchers enthalten, inklusive der Seite, auf der die Schrift angezeigt wird. Und weiter: Werden die Schriften vom Server des Website-Betreibers geladen, erhält Google keinerlei Daten zu den Besuchen.

Bekannt wurde das Thema durch ein Urteil aus Deutschland. Das Landgericht München I entschied am 20. Januar 2022 (Az. 3 O 17493/20), dass die automatische Weitergabe der dynamischen IP-Adresse an Google ohne Zustimmung das allgemeine Persönlichkeitsrecht verletzt. Einen Rechtfertigungsgrund sah das Gericht nicht, weil sich Google Fonts auch ohne Verbindung zu einem Google-Server nutzen lässt. Genau das ist lokales Hosting. In Deutschland folgte darauf eine Welle von Abmahnungen gegen Website-Betreiber, die Schriften weiterhin von Google luden.

Darfst du die Schriften überhaupt herunterladen?

Ja. Laut Google sind alle Google Fonts Open Source und kostenlos, auch für kommerzielle Zwecke. Die meisten stehen unter der SIL Open Font License, einige unter der Apache License oder der Ubuntu Font License, die auch die Weitergabe erlauben. Du darfst die Dateien also auf deinem eigenen Webspace ablegen, auch für eine Firmenwebsite.

Weniger fremde Verbindungen beim Seitenaufruf

Lädt eine Seite Schriften von Google, muss der Browser zuerst fremde Server finden und eine Verbindung zu ihnen aufbauen. Liegen die Dateien auf deinem eigenen Server, holt der Browser sie von dort, wo auch der Rest der Seite liegt. Du bestimmst ausserdem selbst, welche Schriftschnitte geladen werden.

Google nennt in derselben FAQ auch Nachteile des Selbsthostens: Du lädst unter Umständen grössere Dateien, als der Dienst ausliefern würde, und musst Schriften selbst aktualisieren. Wer nur die nötigen Schnitte im Format woff2 und mit passendem Zeichensatz einbindet, hält den ersten Punkt klein.

Was das Schweizer Datenschutzgesetz dazu sagt

Dieser Abschnitt ist allgemeine Information und keine Rechtsberatung. Bei konkreten Fragen zu deiner Website hilft eine Fachperson für Datenschutzrecht.

Für Schweizer Websites gilt zuerst das Datenschutzgesetz (DSG), und es setzt stark auf Transparenz. Der Eidgenössische Datenschutz- und Öffentlichkeitsbeauftragte (EDÖB) hält fest, dass aus einer Datenschutzerklärung ersichtlich sein soll, ob und welche Daten an Dritte gehen. Er nennt ausdrücklich eingebundene Dienste Dritter als Frage, die man sich dabei stellen soll. Und er empfiehlt, vor dem Schreiben zu analysieren, welche Daten eine Website überhaupt bearbeitet.

Für Google Fonts heisst das: Lädst du die Schriften von Google, gehört dieser Dienst in deine Datenschutzerklärung. Hostest du sie lokal, fliesst für die Schriften nichts mehr an Google, und dieser Punkt fällt weg. Ein Schweizer Urteil, das mit dem Münchner Entscheid vergleichbar wäre, ist uns nicht bekannt.

Die europäische DSGVO kann für eine Schweizer Website zusätzlich gelten, etwa wenn du dich gezielt an Kundschaft in der EU richtest. Was das fürs Hosting bedeutet, zeigt die Checkliste zum DSGVO-konformen Hosting. Ob du für andere Dienste einen Cookie-Banner brauchst, ist eine eigene Frage, dazu steht mehr im Beitrag Cookie-Banner in der Schweiz.

Schritt 1: Herausfinden, welche Schriften deine Website lädt

Bevor du etwas herunterlädst, musst du wissen, welche Schriften und welche Schriftschnitte deine Seite nutzt. Ein Schriftschnitt ist eine Variante derselben Schrift, etwa normal, fett oder kursiv. Jeder Schnitt ist eine eigene Datei.

Am zuverlässigsten sind die Entwicklertools deines Browsers, ein eingebautes Prüfwerkzeug, das zeigt, was eine Seite im Hintergrund lädt:

1. Öffne deine Website in Chrome, Firefox oder Edge.
2. Öffne die Entwicklertools, zum Beispiel per Rechtsklick und «Untersuchen» oder mit der Taste F12.
3. Wechsle in den Reiter «Netzwerk» (in Chrome «Network», in Firefox «Netzwerkanalyse»).
4. Setz den Filter auf «Font» oder «Schriftarten» und lade die Seite neu.

Jede Zeile ist nun eine Schriftdatei. Die Adresse verrät die Herkunft: fonts.gstatic.com bedeutet Google Fonts, deine eigene Domain bedeutet selbst gehostete Schriften. Siehst du gar keine Einträge, nutzt die Seite Systemschriften.

Notier dir für jede Schrift den Namen (zum Beispiel Open Sans oder Roboto) und die Schnitte (zum Beispiel 400 für normal, 700 für fett). Prüf mehrere Unterseiten, denn ein Blogbeitrag oder ein Kontaktbereich nutzt manchmal einen Schnitt, den die Startseite nicht braucht.

Schritt 2: Die Schriftdateien herunterladen

Du hast zwei Wege:

• Direkt bei Google Fonts: Auf fonts.google.com wählst du die Schrift und lädst das Paket herunter. Es enthält meist TTF-Dateien, ein älteres Format, das grösser ist als nötig.
• Mit dem google-webfonts-helper: Dieses kostenlose Werkzeug zeigt dir jede Google-Schrift, lässt dich Schnitte und Zeichensätze auswählen und liefert die Dateien im Format woff2. Es erzeugt auch gleich die passenden CSS-Zeilen.

Nimm wenn möglich woff2. Das ist ein komprimiertes Format speziell für Schriften im Web, die Dateien sind klein, und alle aktuellen Browser können sie anzeigen.

Wähl beim Zeichensatz «latin». Er deckt Deutsch, Französisch und Italienisch mit allen Umlauten und Akzenten ab. Weitere Zeichensätze wie Kyrillisch brauchst du nur, wenn deine Website Texte in diesen Schriften enthält.

Schritt 3: Die Schriften mit @font-face einbinden

Nun legst du die Dateien in einen Ordner auf deinem Webspace, etwa /fonts/. Danach sagst du dem Browser per CSS, wo er sie findet. CSS ist die Sprache, die das Aussehen einer Website festlegt, die Datei dafür heisst Stylesheet, oft style.css.

Die Anweisung dafür heisst @font-face. Sie gibt einer Schrift einen Namen und verweist auf die Datei. Für Open Sans in normal und fett sieht das so aus:

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

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

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

Drei Dinge sind dabei wichtig:

• Ein Block pro Schnitt. Jeder Schnitt, den du verwendest, braucht einen eigenen @font-face-Block mit der passenden Schriftstärke.
• font-display: swap. Diese Zeile sorgt dafür, dass der Text sofort in einer Ersatzschrift erscheint und die richtige Schrift nachgeladen wird. Ohne sie kann der Text kurz unsichtbar bleiben.
• Eine Ersatzschrift. Die Angaben «Arial, sans-serif» hinter dem Schriftnamen sind die Ersatzschrift (Fallback), falls die Datei einmal nicht lädt.

Zum Schluss entfernst du die alte Einbindung. Such im HTML nach Zeilen mit fonts.googleapis.com (meist ein <link>-Element im Kopf der Seite) und im CSS nach @import-Anweisungen mit derselben Adresse. Lösch sie, sonst lädt der Browser die Schriften weiterhin zusätzlich von Google.

Schritt 4: Prüfen, ob Google wirklich nicht mehr geladen wird

Die Kontrolle ist schnell gemacht und gehört zu jeder Umstellung:

1. Leer den Browser-Cache oder öffne ein privates Fenster, damit keine alten Dateien angezeigt werden.
2. Öffne die Entwicklertools und den Netzwerk-Reiter wie in Schritt 1.
3. Lade die Seite neu und gib im Filterfeld «google» ein.
4. Es darf keine Anfrage an fonts.googleapis.com oder fonts.gstatic.com mehr erscheinen. Mit dem Filter «Font» siehst du stattdessen deine eigenen Dateien unter deiner Domain.

Wiederhol das für zwei, drei typische Unterseiten. Sieht die Schrift anders aus als vorher, fehlt meist ein Schnitt, oder ein Dateipfad stimmt nicht.

Mit Claude oder ChatGPT: die Umstellung im Chat

Baust du deine Website mit einem KI-Assistenten, musst du die Schritte 2 und 3 nicht selbst ausführen. Claude und ChatGPT verstehen HTML und CSS gut und erklären, was sie ändern.

So kann ein Auftrag im Chat lauten:

Meine Website lädt Open Sans in 400 und 700 von Google Fonts. Stell bitte auf lokale Schriften um: Leg die woff2-Dateien im Ordner /fonts/ ab, schreib die @font-face-Regeln mit font-display: swap ins Stylesheet und entferne alle Verweise auf fonts.googleapis.com und fonts.gstatic.com.

Wichtig ist der letzte Teil des Auftrags: das Entfernen aller alten Verweise. Bitte den Assistenten am Schluss, alle Dateien noch einmal nach «googleapis» und «gstatic» zu durchsuchen.

Typische Fehler und wie du sie vermeidest

Fehler	Was passiert	So vermeidest du ihn
Alte Einbindung bleibt stehen	Der Browser lädt weiter von Google, zusätzlich zu deinen Dateien	HTML und CSS nach «googleapis» und «gstatic» durchsuchen
Zu viele Schnitte	Die Seite lädt Dateien, die nie angezeigt werden	Nur die Schnitte herunterladen, die du in Schritt 1 gefunden hast
Falscher Dateipfad	Die Ersatzschrift erscheint statt der gewünschten Schrift	Pfad im CSS mit dem Ordner auf dem Server vergleichen
font-display fehlt	Text bleibt beim Laden kurz unsichtbar	font-display: swap in jeden @font-face-Block
Nur die Startseite geprüft	Unterseiten laden noch Google Fonts	Mehrere Seitentypen im Netzwerk-Reiter kontrollieren
Eingebettete Inhalte übersehen	Karten, Videos oder Widgets laden eigene Schriften	Auch diese Einbindungen im Netzwerk-Reiter prüfen

Der letzte Punkt wird oft unterschätzt. Eine eingebettete Karte oder ein Video-Player kann eigene Schriften von Google nachladen, auch wenn deine eigenen Schriften längst lokal liegen. Solche Anfragen erkennst du ebenfalls im Netzwerk-Reiter.

Wenn ein CMS die Schriften immer wieder nachlädt

Bei Websites mit einem Redaktionssystem wie WordPress ist das lokale Einbinden oft mühsamer als bei einer schlanken Website. Themes, Page Builder und Erweiterungen bringen eigene Schrift-Einstellungen mit und laden Google Fonts manchmal erneut, etwa nach einem Update. Dann brauchst du weitere Erweiterungen, nur um das Nachladen zu unterdrücken, und musst nach jedem Update kontrollieren.

Eine Website ohne CMS hat dieses Problem nicht. In den Dateien steht genau das, was du oder dein KI-Assistent hineingeschrieben hast. Liegen die Schriften einmal im Ordner /fonts/, bleiben sie dort, bis du sie änderst. Kein Update baut die Google-Einbindung wieder ein.

So ist es bei MADLAB // Publishing

Bei MADLAB // Publishing ist Claude oder ChatGPT dein Redaktor: Der Assistent baut und ändert die Website im Gespräch. Wir veröffentlichen, hosten und verwalten sie, mit Vorschau, Versionen und Zurückholen. Für lokale Schriften heisst das:

• Fremde Schriften fallen auf. Vor dem Veröffentlichen prüft dein Assistent die Seiten. Bindet eine Seite Dateien von fremden Servern ein, etwa von fonts.googleapis.com, weist die Prüfung darauf hin, dass das in die Datenschutzerklärung gehört. So merkst du auch, wenn eine Vorlage Google Fonts mitgebracht hat.
• Schriftdateien kommen ohne Umweg herein. Liegen die woff2-Dateien schon unter einer öffentlichen Adresse, holt dein Assistent sie direkt in deine Website. Sonst lädst du sie im Upload-Fenster hoch, das sich im Gespräch öffnet, mehrere Dateien auch als ZIP.
• Erst prüfen, dann veröffentlichen. Die Umstellung siehst du zuerst in der Vorschau. Sieht eine Überschrift danach anders aus als geplant, holst du die vorherige Version zurück. Siehe Versionen und Zurückrollen.
• Alles vom selben Server. Die Schriftdateien liegen zusammen mit deiner Website auf unseren Servern in der Schweiz und der EU. Eine Verbindung zu Google braucht es dafür nicht.

So machen es auch unsere Referenzen: Bei oceya.ch und the-title.com liegen die Schriften auf der eigenen Website. Willst du dein CMS loswerden, kannst du deine bestehende Website übernehmen und die Schriften dabei gleich lokal einbinden. Den Einstieg zeigen Website mit Claude erstellen und Website mit ChatGPT erstellen. Was die Pläne kosten, steht unter Pläne und Zusatzpakete.

Quellen

• Google Fonts: Frequently Asked Questions
• ConsentBoost: Google Fonts lokal hosten & Datenschutz
• LG München I, Endurteil vom 20.01.2022, Az. 3 O 17493/20
• EDÖB: Datenschutzerklärungen im Internet

Häufige Fragen

Ist es erlaubt, Google Fonts herunterzuladen und selbst zu hosten?

Ja. Die Schriften stehen unter offenen Lizenzen, meist der SIL Open Font License, einige unter der Apache License oder der Ubuntu Font License. Diese erlauben die Nutzung, auch kommerziell, und die Weitergabe der Dateien. Du darfst sie also auf deinem eigenen Server ablegen.

Reicht lokales Hosting für den Datenschutz meiner Website?

Für die Schriften ja: Lokal gehostet geht dafür keine IP-Adresse mehr an Google. Deine Website kann aber andere Dienste nutzen, etwa eingebettete Karten oder Videos, die ebenfalls Daten übermitteln. Diese gehören weiterhin in deine Datenschutzerklärung, und bei Unsicherheit klärt eine Fachperson für Datenschutzrecht deine Situation.

Muss ich Google Fonts in der Datenschutzerklärung erwähnen?

Lädst du die Schriften von Google, solltest du das transparent angeben, denn die Datenschutzerklärung soll zeigen, welche Daten an Dritte gehen. Hostest du sie lokal, fliessen für die Schriften keine Daten an Google. Pass deine Datenschutzerklärung nach der Umstellung entsprechend an.

Werden lokal gehostete Schriften automatisch aktualisiert?

Nein. Die Dateien bleiben so, wie du sie heruntergeladen hast. Für eine Firmenwebsite ist das meist ein Vorteil, denn deine Schrift sieht morgen genauso aus wie heute. Willst du eine neuere Fassung, lädst du sie neu herunter und ersetzt die Dateien.

Kann mein KI-Assistent die Umstellung allein übernehmen?

Claude oder ChatGPT schreiben die @font-face-Regeln, legen die Ordnerstruktur an und entfernen die alten Verweise, wenn du es im Chat so beschreibst. Die Kontrolle im Netzwerk-Reiter des Browsers solltest du danach trotzdem selbst machen. Sie dauert nur wenige Minuten.