Google Fonts lokal einbinden bedeutet: Deine Website lädt Schriftdateien von einer Domain, die du selbst kontrollierst, statt beim Seitenaufruf zusätzliche Anfragen an die Google-Font-Dienste zu senden. Das kann die technische Kontrolle über deine Website vereinfachen. Entscheidend ist aber nicht, woher du die Schrift ursprünglich bezogen hast, sondern welche Server der Browser deiner Besucher tatsächlich kontaktiert.
In dieser Anleitung zeige ich dir, wie du externe Einbindungen erkennst, Webfonts lokal einrichtest und typische Fehler in WordPress, Shopify und individuell entwickelten Websites vermeidest.
1. Erst prüfen: Lädt die Website Google Fonts extern?
Öffne deine Seite in Chrome oder einem anderen modernen Browser. Mit F12 öffnest du die Entwicklertools. Im Tab Netzwerk/Network kannst du beobachten, welche Dateien der Browser beim Laden anfordert.
Gehe so vor:
- Öffne die Entwicklertools, bevor du neu lädst.
- Wähle den Tab Network und aktiviere nach Möglichkeit Disable cache für den Test.
- Lade die Seite neu. Klicke dich zusätzlich durch relevante Seitentypen und öffne Menüs, wenn dort eigene Fonts verwendet werden.
- Suche in den Netzwerkrequests nach
fonts.googleapis.comundfonts.gstatic.com. - Prüfe auch externe Stylesheets oder Skripte, die Schriften erst später nachladen.
Was bedeuten die Treffer? fonts.googleapis.com wird für Stylesheets der Google Fonts API genutzt. Die daraus referenzierten Schriftdateien können über fonts.gstatic.com geladen werden. Googles Dokumentation zur Fonts API zeigt diese externe Einbindung mit einem Stylesheet-Link.
Fehlen solche Requests, bedeutet das noch nicht automatisch, dass alle Schriftdateien lokal liegen – sie können auch von anderen CDNs stammen. Entscheidend ist deshalb die vollständige Übersicht über alle Font-Dateien und ihre Hostnamen.
2. Welche Schriftdateien brauchst du wirklich?
Viele Websites laden aus Gewohnheit mehrere Schriftfamilien und Gewichte, obwohl im Design nur wenige Schnitte verwendet werden. Beginne mit einer Bestandsaufnahme:
- Welche Schriftfamilien werden genutzt (z. B. Inter)?
- Welche Gewichte sind im CSS tatsächlich erforderlich (etwa 400, 600 und 700)?
- Werden kursive Schnitte verwendet?
- Welche Zeichenbereiche müssen funktionieren, einschließlich Umlauten und Sonderzeichen?
- Ist eine Variable Font sinnvoll, oder reichen einzelne WOFF2-Dateien?
Verwende möglichst moderne WOFF2-Dateien, sofern die nötigen Browser und Zeichen unterstützt werden. Kleine, korrekt aufgeteilte Schriftdateien können Ladezeiten verbessern; unnötig viele Fonts und Gewichte wirken dagegen eher belastend.
Prüfe vor dem Hosting die Lizenz deiner konkreten Schrift. Google stellt Schriftfamilien über verschiedene offene Lizenzen bereit; die jeweiligen Lizenzhinweise und Aufbewahrungspflichten sind trotzdem zu beachten. Eine gute Ausgangsstelle ist Google Fonts.
3. Webfont auf deinem eigenen Server einrichten
Für eine klassische Website könntest du eine Schriftdatei unter folgender Adresse ablegen:
/fonts/inter-latin.woff2
Anschließend definierst du die lokale Font-Datei mit @font-face im CSS:
@font-face {
font-family: "Inter Lokal";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
body {
font-family: "Inter Lokal", Arial, sans-serif;
}Das ist ein Beispiel für eine Datei mit Gewicht 400, nicht automatisch die korrekte Definition für jede heruntergeladene Font-Datei. Eine echte Variable Font benötigt gegebenenfalls einen Gewichtsbereich, beispielsweise font-weight: 100 900 – allerdings nur, wenn die konkrete Datei diese Achse tatsächlich abdeckt.
Achte darauf, dass die Font-URL erreichbar ist und der Server die Schrift mit einem geeigneten Dateityp ausliefert. Kontrolliere im Network-Tab den Statuscode und ob wirklich die lokale Datei geladen wird.
Nicht vergessen: Alte externe Verweise entfernen
Es genügt nicht, nur neue lokale CSS-Regeln hinzuzufügen. Entferne danach überflüssige externe Font-Links, beispielsweise aus dem HTML-<head>, aus Theme-Einstellungen, Pagebuildern oder importierten Stylesheets. Andernfalls kann die Website zusätzlich weiterhin eine Google-Fonts-Verbindung aufbauen.
4. Google Fonts in WordPress lokal einbinden
In WordPress hängt die beste Vorgehensweise vom aktiven Theme, dem Pagebuilder und den eingebundenen Plugins ab. Es gibt deshalb keine universelle Einstellung, die auf jeder Installation gleich heißt.
Ein sinnvolles Vorgehen:
- Backup erstellen und wenn möglich in einer Staging-Umgebung testen.
- Prüfen, ob das Theme bereits eine Option für lokale Fonts oder Systemschriften anbietet.
- Bei Pagebuildern die Schrift-Einstellungen und eventuell vorhandene „Google Fonts lokal laden“-Funktionen prüfen.
- Erst danach über eine geeignete lokale Font-Lösung oder eigene Theme-Dateien nachdenken.
- Cache und Optimierungsplugins berücksichtigen, bevor du erneut im Browser testest.
Besonders häufig werden Fonts mehrfach eingebunden: Das Theme lädt eine Familie, der Pagebuilder eine zweite und ein Formularplugin bringt nochmals eigene Ressourcen mit. Jede Quelle muss getrennt betrachtet werden.
Nach einem Theme-Update können Einstellungen oder CSS-Overrides verändert werden. Dokumentiere deshalb, wo die lokale Schrift eingebunden wurde.
5. Google Fonts bei Shopify prüfen
Shopify unterscheidet sich von einer individuell gehosteten Website. In vielen Themes werden Schriftfamilien über die Shopify-Schriftbibliothek und über von Shopify bereitgestellte Ressourcen eingebunden. Eine Schrift, die über die Shopify-Infrastruktur ausgeliefert wird, ist nicht automatisch ein externer Google-Fonts-Request.
Prüfe zunächst unter Onlineshop → Themes → Theme anpassen → Theme-Einstellungen → Typografie, welche Schrift konfiguriert ist. Die Shopify-Dokumentation zu Theme-Einstellungen beschreibt diesen Bereich.
Anschließend lohnt sich ein Blick in die Netzwerkrequests. Wenn externe Google-Font-Adressen auftauchen, finde heraus, ob sie vom Theme, einer App oder einem eingefügten Code-Snippet stammen.
Achtung bei Shopify-CSS: Nicht jede CSS-Eingabefläche unterstützt dieselben Regeln. Shopify beschränkt beispielsweise bestimmte At-Rules und URLs im Editor für benutzerdefiniertes CSS. Umfangreiche Font-Umstellungen sollten deshalb, soweit nötig, fachgerecht im Theme-Code und in geeigneten Assets vorgenommen und anschließend im Theme-Preview getestet werden. Beachte die Shopify-Hinweise zu benutzerdefiniertem CSS.
6. Google Fonts bei Astro und individuellen Websites lokal laden
Bei statischen Websites, etwa mit Astro, hast du die Auslieferung der Dateien meist direkt unter Kontrolle. Du kannst Schriftdateien im öffentlichen Asset-Verzeichnis ablegen und über @font-face referenzieren oder passende Font-Pakete verwenden, die lokal gebündelt werden.
Ein wichtiges Detail: „Lokal im Projekt eingebunden“ und „zur Laufzeit vom eigenen Server geladen“ sind zwei verschiedene Prüfungen. Deshalb nach dem finalen Build und Deployment erneut die Requests kontrollieren. Ein erfolgreiches npm run build allein beweist noch nicht, dass nirgends externe Font-Requests entstehen.
Für mehrere Seiten reicht ein Test der Startseite nicht aus. Leistungsseiten, Blog und Kontaktbereich können unterschiedliche Komponenten nutzen.
7. Performance: Lokal ist nicht automatisch schneller
Lokales Hosting kann Verbindungen reduzieren, aber es ist kein pauschales Ladezeitversprechen. Entscheidend sind unter anderem Dateigröße, Caching, Anzahl der Schnitte, CSS-Ladeverhalten und das Auslieferungsnetzwerk.
Vermeide typische Performance-Fehler:
- Fünf Schriftschnitte laden, obwohl nur zwei benötigt werden.
- Für jede Überschrift eine neue Font-Datei verwenden.
- Eine riesige Schriftdatei einbinden, obwohl kleine Teilmengen ausreichen.
font-displayungeprüft setzen, ohne Layoutwechsel und Lesbarkeit zu testen.- Kritische Inhalte erst nach unnötigen CSS- oder JavaScript-Abhängigkeiten darstellen.
Wenn nach der Umstellung plötzlich Überschriften springen oder anders umbrechen, kontrolliere zuerst, ob die richtige Schrift und die passenden Gewichte geladen werden.
8. Bedeutet lokales Hosting automatisch DSGVO-Konformität?
Nein. Lokale Font-Dateien verhindern zwar den entsprechenden Abruf bei einem externen Font-Dienst, ersetzen aber keine umfassende Datenschutzprüfung. Andere Skripte, eingebettete Medien, Karten oder Analysewerkzeuge können weiterhin Daten an Dritte übertragen. Auch aus einer einzelnen technischen Feststellung lässt sich keine vollständige rechtliche Bewertung ableiten.
Für belastbare Rechtsfragen solltest du passende fachliche Beratung einbeziehen. Technisch lässt sich aber eindeutig prüfen, welche Netzwerkverbindungen ein Seitenaufruf auslöst.
Checkliste vor dem Abschluss
- Alle relevanten Templates, Unterseiten und Pop-ups prüfen.
- Schriftfamilien, Gewichte, Umlaute und Icons berücksichtigen.
- Lizenzen der konkret verwendeten Dateien kontrollieren.
- Externe Font-CSS-Links entfernen und Cache leeren.
- Netzwerkrequests nach Deployment wiederholen.
- Mobile Darstellung, Zeilenumbrüche und Ladezeit testen.
- Dokumentieren, wie das Hosting bei Updates erhalten bleibt.
Fazit: Der beste Google-Fonts-Check ist kein bloßer Quelltext-Suchlauf. Er kombiniert Netzwerkanalyse, CMS-Kenntnis und eine Überprüfung nach dem Livegang.
Für eine technische Prüfung und Optimierung unterstützen wir dich im Bereich SEO & Performance. Wenn zusätzlich Aufbau, Design oder Theme-Dateien angepasst werden müssen, findest du unsere Leistungen unter Webdesign und Entwicklung.
Weiterführende Quellen
- Google: Einstieg in die Google Fonts API
- Google: Schriftbibliothek und Lizenzen
- Shopify: Typografie im Theme-Editor
- Shopify: Hinweise zu benutzerdefiniertem CSS
War dieser Artikel hilfreich?
Dein Feedback hilft uns, unsere Ratgeber zu verbessern.
Mit Digitalhaus Kunze gearbeitet?
Dann freuen wir uns über deine ehrliche Erfahrung auf Google – unabhängig davon, ob sie positiv oder kritisch war.
Auf Google bewerten