Haben Sie Ihre Website durch GTmetrix laufen lassen und Fehler zu Google Fonts gesehen? Damit sind Sie nicht allein. Externe Anfragen an fonts.googleapis.com verlangsamen den Ladevorgang, und Caching-Plugins wie WP Rocket oder WP Fastest Cache können Assets, die auf einem fremden Server liegen, nicht komprimieren.

Seit 2022 gibt es einen weiteren Grund: Ein deutsches Gericht entschied, dass das dynamische Laden von Google Fonts gegen die DSGVO verstößt, weil die IP-Adressen der Besucher ohne Einwilligung an Google-Server in den USA übermittelt werden. Das Selbst-Hosten von Schriften löst drei Probleme auf einmal: GTmetrix-Performance, DSGVO-Konformität und volle Kontrolle über das Caching.

Nachfolgend eine Schritt-für-Schritt-Anleitung. Von der Auswahl einer Schrift bei Google Fonts bis zu einem sauberen GTmetrix-Bericht ohne externe Ressourcenfehler.

💡 Kurzüberblick:

• Laden Sie die benötigten Schriftschnitte von Google Fonts herunter
• Konvertieren Sie.ttf mit Transfonter oder google-webfonts-helper in WOFF2
• Laden Sie die Dateien per FTP nach /wp-content/uploads/fonts/ hoch
• Fügen Sie @font-face-Regeln in das CSS Ihres Themes ein und prüfen Sie die Darstellung
• Testen Sie Ihre Website erneut in GTmetrix; die Google-Fonts-Fehler sollten verschwunden sein

Warum Sie Schriften lokal hosten sollten

Wenn ein Browser eine Seite lädt, geht er zu fonts.googleapis.com, holt das CSS und zieht dann die eigentlichen Schriftdateien von fonts.gstatic.com. Das sind mindestens zwei externe DNS-Abfragen und zwei HTTP-Sitzungen, auf die Sie keinen Einfluss haben. Caching-Plugins sind hier machtlos: Sie können eine externe Ressource weder komprimieren noch deren Laden verzögern.

Lokales Hosting ändert das Bild grundlegend. Die Schriftdateien liegen auf Ihrem Server, derselben Domain, demselben CDN, denselben Caching-Regeln. Der Browser geht nirgendwo extern hin, und GTmetrix sowie PageSpeed Insights beschweren sich nicht mehr über Drittanbieter-Ressourcen.

Und ja, die DSGVO. Im Januar 2022 entschied das Landgericht München, dass das dynamische Laden von Google Fonts ohne Nutzereinwilligung gegen die DSGVO verstößt. Eine Welle von Abmahnungen ging durch Europa, und Website-Betreiber begannen, massenhaft auf lokales Hosting umzustellen. Das Selbst-Hosten von Schriften ist die zuverlässigste Lösung.

Schritt 1. Wählen Sie eine Schrift bei Google Fonts aus

Gehen Sie zu Google Fonts und suchen Sie die benötigte Schrift. In dieser Anleitung verwende ich Roboto, eine der beliebtesten Webschriften, mit Unterstützung für Kyrillisch.

Zwei Regeln, um schlank zu bleiben:

• Minimale Schriftschnitte. Jeder Schnitt (normal, fett, kursiv) ist eine eigene Datei und ein eigener Request. Wenn Ihr Design nur normal und fett verwendet, deaktivieren Sie die übrigen.
• Minimale Schriftfamilien. Beschränken Sie sich auf eine oder zwei Schriftfamilien pro Website. Eine dritte ist für die Performance bereits zu viel, egal wie schön sie aussieht.

Ich habe Roboto Regular (400) und Roboto Bold (700) gewählt. Das war's.

Schritt 2. Laden Sie die Schrift herunter

Klicken Sie auf der Schriftseite auf die Schaltfläche „Download family". Google packt alle Schnitte in ein ZIP-Archiv. Die Schnittauswahl spielt in diesem Schritt keine Rolle; das Archiv enthält ohnehin die gesamte Familie. Wir filtern später.

Entpacken Sie das Archiv. Wir benötigen Roboto-Regular.ttf und Roboto-Bold.ttf.

Schritt 3. Konvertieren Sie die Schriften in Web-Formate

Browser verwenden.ttf nicht direkt. Sie benötigen die Formate WOFF und WOFF2; diese sind komprimiert und laden schneller. Es gibt zwei Werkzeuge, beide kostenlos.

Transfonter ist ein Klassiker: Gehen Sie zu transfonter.org, klicken Sie auf „Add fonts" und laden Sie Ihre.ttf-Dateien hoch.

Belassen Sie die Einstellungen auf den Standardwerten; WOFF und WOFF2 decken alle modernen Browser ab. EOT (für alte Internet-Explorer-Versionen) wird 2026 nicht mehr benötigt. Klicken Sie auf „Convert".

Google-webfonts-helper ist eine modernere Option speziell für Google Fonts. Der Dienst unter gwfh.mranftl.com generiert sowohl WOFF2-Dateien als auch sofort einsetzbares CSS mit @font-face. Sie müssen die Schriften nicht auf einen Drittserver hochladen; alles geschieht lokal in Ihrem Browser. Bei lizenzierten Schriften und Markenschriftarten ist das relevant.

Welches Tool sollten Sie wählen? Transfonter ist einfacher für eine einmalige Aufgabe. Google-webfonts-helper ist komfortabler, wenn Sie häufig Schriften wechseln oder mit kommerziellen Schriftarten arbeiten, die Sie lieber nicht auf externe Server hochladen möchten.

Schritt 4. Webfonts auf Ihren Server hochladen

Laden Sie nach der Konvertierung das ZIP-Archiv herunter. Darin finden Sie für jede Schriftstärke.woff- und.woff2-Dateien. Für Roboto Regular und Bold erhalten Sie 4 Dateien:

Laden Sie diese per FTP oder über den Dateimanager Ihres Hostings nach /wp-content/uploads/fonts/ hoch. Der Pfad /wp-content/uploads/ wurde bewusst gewählt: Anders als der Theme-Ordner wird er von Core- und Theme-Updates nicht berührt.

Überprüfen Sie nach dem Hochladen den Zugriff, indem Sie einen direkten Link zur Datei im Browser öffnen:

https://your-site.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Der Browser sollte den Download starten. Falls nicht, prüfen Sie die Ordnerberechtigungen (sollten 755 sein) und den Pfad selbst.

Schritt 5. @font-face in Ihr CSS einfügen

Das ZIP-Archiv von Transfonter enthält eine Datei stylesheet.css, eine fertige Vorlage zum Einbinden der Schrift. Öffnen Sie diese und kopieren Sie den Inhalt.

Fügen Sie den Code ganz oben in die style.css Ihres aktiven Themes ein (oder in custom.css, falls Ihr Theme das unterstützt). Verwenden Sie Pfade zu den Dateien auf Ihrem Live-Server, nicht aus dem Archiv. Ersetzen Sie relative URLs durch absolute:

Ursprünglicher Code aus stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Ändern zu:

1
src: url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://your-site.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Ersetzen Sie your-site.com durch Ihre Domain. Wiederholen Sie dies für jede Schriftstärke.

Um die Schrift in Ihrem Markup einfach nutzbar zu machen, fügen Sie darunter Wrapper-Klassen hinzu:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Jetzt zeigt jedes Element mit der Klasse roboto_font oder roboto_bold_font die Roboto an.

Schritt 6. Darstellung prüfen

Erstellen Sie eine Testseite (oder öffnen Sie eine bestehende im Entwurfsmodus) und fügen Sie diesen HTML-Code im Texteditor ein:

1
<h2>Default theme font</h2>
2
<h2 class="roboto_font">Roboto Regular — custom font</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — bold weight</h2>

Öffnen Sie die Vorschau. Die erste Überschrift verwendet die Standardschrift des Themes; die zweite und dritte nutzen Roboto.

Sollte die Schriftart nicht geladen werden, öffnen Sie die Browser-Konsole (F12 → Netzwerk) und prüfen Sie, ob die WOFF2-Dateien von Ihrer eigenen Domain geladen werden und nicht von fonts.gstatic.com. Der Antwortcode sollte 200 lauten und der Typ font/woff2 sein.

Schritt 7. Die Schriftart als Standard festlegen

Um Roboto siteweit anzuwenden, ohne jeder Überschrift eine Klasse hinzuzufügen, ergänzen Sie Folgendes in der style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Achtung: Falls Ihr Theme bereits eine eigene Schriftart verwendet, suchen Sie die font-family-Zeilen in der style.css und ersetzen Sie diese. Eine Body-Regel einfach obendrauf zu setzen, erzeugt einen Konflikt. Stellen Sie sicher, dass alte Deklarationen entfernt oder auskommentiert sind.

Schritt 8. Eine Fallback-Schriftartenliste einrichten

Google Fonts sind keine Systemschriftarten. Kann der Browser sie nicht laden (Besucher ist offline, Adblocker, temporäre Störung), bleibt die Seite ohne Text. Die Lösung ist eine Schriftartenliste.

Falsch:

1
font-family: 'Roboto';

Richtig, mit Fallbacks:

1
font-family: 'Roboto', Arial, sans-serif;

Der Browser versucht es mit Roboto. Schlägt das fehl, greift er auf Arial zurück. Kein Arial? Dann die System-Sans-Serif. Die Seite ist immer lesbar, selbst wenn die eigene Schriftart nicht geladen wird.

Schritt 9. Ihre Seite erneut in GTmetrix testen

Führen Sie GTmetrix erneut aus. Der Abschnitt „Wasserfall" sollte keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com mehr zeigen. Auch der Fehler „Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen" für Schriftarten verschwindet, weil diese Assets nun auf Ihrem Server liegen und gemäß Ihren Regeln gecacht werden.

Falls weiterhin Fehler auftreten, prüfen Sie den Wasserfall-Tab. Ein Theme oder Plugin (zum Beispiel Elementor) könnte noch immer Schriftarten vom Google-CDN laden. Der nächste Abschnitt hilft dabei.

Alternative für Faule: das Local Google Fonts Plugin

Wenn Sie sich nicht mit FTP und CSS befassen möchten, gibt es das Local Google Fonts Plugin. Es findet automatisch alle von Ihrem Theme und Ihren Plugins verwendeten Google Fonts, lädt sie herunter und liefert sie von Ihrem Server aus.

Vorteile: installieren, aktivieren, vergessen. Nachteile: Es funktioniert nur mit Google Fonts (nicht mit anderen externen Schriftarten) und bietet keine detaillierte Kontrolle über die Formate. Für die meisten WordPress-Seiten ist das mehr als ausreichend.

Hilfreiches Video zum Thema

Auf Englisch mit einer visuellen Demonstration jedes Schritts, von der Auswahl einer Schriftart bis zum finalen CSS:

⁉️🤔 Häufig gestellte Fragen

Ist das Self-Hosting von Schriftarten im Jahr 2026 verpflichtend?

Aus rechtlicher Sicht ja, wenn Sie Besucher aus der EU haben. Das Landgericht München hat 2022 einen Präzedenzfall geschaffen, und seitdem haben Dutzende deutscher Gerichte bestätigt: dynamisches Nachladen von Google Fonts ohne Einwilligung = DSGVO-Verstoß. Aus Performance-Sicht ebenfalls ja: zwei zusätzliche DNS-Lookups und eine nicht cachebare externe Ressource machen Ihre Seite nicht schneller. Self-Hosting von Schriftarten löst beide Probleme auf einmal. Das Plugin Local Google Fonts dauert 5 Minuten; die manuelle Methode mit Transfonter dauert 15. Wählen Sie je nach Ihrer Bereitschaft, FTP zu nutzen.

Google-webfonts-helper oder Transfonter: was ist besser?

Für das einmalige Einbinden einer einzelnen Schriftart gibt es kaum einen Unterschied. Transfonter ist einfacher: Sie laden die.ttf hoch, erhalten WOFF2 und CSS. Google-webfonts-helper ist komfortabler, wenn Sie Schriftarten häufig wechseln: Es lädt keine Dateien auf einen Drittserver hoch und generiert sofort einsatzbereites @font-face mit korrekten Pfaden. Für kommerziell lizenzierte Schriftarten nur google-webfonts-helper.

Was tun, wenn Schriftarten nach dem lokalen Upload nicht angezeigt werden?

Drei typische Ursachen. Erstens, falscher Pfad in url(): Prüfen Sie, ob der Link im Browser geöffnet werden kann und eine Datei zurückgibt, keinen 404-Fehler. Zweitens, CORS: Wenn Schriftarten von einem CDN oder einer Subdomain geladen werden, muss der Server den Header Access-Control-Allow-Origin ausliefern. Drittens, Theme-Konflikt: Öffnen Sie die DevTools (F12 → Berechnet), suchen Sie ein Element mit Ihrer Schriftart und sehen Sie nach, welche font-family tatsächlich angewendet wird. Oft überschreibt das Theme sie weiter unten in der Kaskade.

Kann ich Schriftarten auf einem CDN hosten statt auf meinem eigenen Server?

Ja, aber das CDN muss Ihr eigenes sein. Das Kernprinzip ist, dass Schriftarten von derselben Domain (oder Subdomain) wie Ihre Website ausgeliefert werden sollten, ohne Cross-Domain-Requests an Drittserver. Dann funktioniert Caching, und die DSGVO wird nicht verletzt.

Wie überprüfe ich, ob Schriftarten tatsächlich lokal geladen werden?

Öffnen Sie DevTools → Netzwerk → Tab Schriftarten. Laden Sie die Seite neu. Alle Schriftart-Anfragen sollten an Ihre Domain gehen. Wenn Sie fonts.googleapis.com oder fonts.gstatic.com sehen, ist irgendwo noch externes Laden aktiv. Höchstwahrscheinlich verwendet ein Theme oder Plugin es weiterhin. Überprüfen Sie die Einstellungen oder installieren Sie Local Google Fonts.

Was Sie wählen sollten: manueller Upload oder Plugin

Wenn Sie bis hierhin gelesen haben, liegt Ihnen die Performance Ihrer Website wahrscheinlich am Herzen. Und das ist die richtige Einstellung. Der Unterschied zwischen „gefühlt schnell" und „GTmetrix Grade A" liegt oft in kleinen Details wie externen Schriftarten.

Für schnelle Ergebnisse installieren Sie Local Google Fonts. Fünf Minuten, und externe Anfragen an Google verschwinden.

Für volle Kontrolle über Formate, Caching und Fallback-Stacks wählen Sie die manuelle Methode mit Transfonter oder google-webfonts-helper. Dieselben 15 Minuten, aber Sie kennen jede Datei auf Ihrem Server.

Führen Sie in jedem Fall vorher und nachher einen GTmetrix-Test durch. „Vorher"- und „Nachher"-Screenshots sind der beste Weg, um zu bestätigen, dass Sie das alles nicht umsonst gemacht haben.