Google Fonts lokal einbinden in WordPress

Google Fonts lokal einbinden: Schneller laden und Datenschutzrisiken reduzieren

Viele WordPress-Themes, Pagebuilder und Plugins verwenden Google Fonts, um moderne und gut lesbare Schriftarten auf Websites darzustellen. Häufig werden diese Schriften jedoch dynamisch direkt von Google-Servern geladen. Das bedeutet: Beim Besuch Ihrer Website kann der Browser des Besuchers eine Verbindung zu Google aufbauen, um die Schriftdateien abzurufen.

Diese externe Einbindung hat zwei mögliche Nachteile. Erstens kann sie die Ladezeit beeinflussen, weil zusätzliche externe Anfragen entstehen. Zweitens kann sie datenschutzrechtlich problematisch sein, weil beim Abruf von Schriftarten technische Informationen wie die IP-Adresse des Besuchers an Google übertragen werden können.

Was sind Google Fonts?

Google Fonts ist eine grosse Sammlung kostenlos nutzbarer Schriftarten. Viele WordPress-Themes und Pagebuilder greifen darauf zurück, weil sich damit schnell ein modernes Design umsetzen lässt. Schriftarten wie Roboto, Open Sans, Lato, Montserrat oder Poppins werden auf vielen Websites verwendet.

Technisch gibt es zwei grundlegende Möglichkeiten, solche Schriften einzubinden:

• Dynamische Einbindung: Die Schriftdateien werden beim Seitenaufruf von Google-Servern geladen.
• Lokale Einbindung: Die Schriftdateien liegen auf Ihrem eigenen Webhosting und werden von Ihrer eigenen Domain ausgeliefert.

Aus Datenschutz- und Kontrollsicht ist die lokale Einbindung häufig die bessere Wahl, insbesondere für Websites in der Schweiz oder mit Besuchern aus dem EU-Raum.

Warum externe Google Fonts problematisch sein können

Wenn eine Website Google Fonts direkt von Google lädt, wird beim Aufruf der Seite eine Verbindung zu Google-Servern hergestellt. Dabei können technische Daten übertragen werden. Dazu gehört in vielen Fällen auch die IP-Adresse des Besuchers.

In Deutschland wurde die dynamische Einbindung von Google Fonts besonders durch ein Urteil des Landgerichts München I bekannt. Das Gericht sah die unerlaubte Weitergabe der IP-Adresse an Google im konkreten Fall als problematisch an. Auch Datenschutzbehörden haben Website-Betreiber darauf hingewiesen, die Einbindung von Google Fonts zu prüfen und gegebenenfalls lokal umzusetzen.

Für Schweizer Website-Betreiber ist zusätzlich das revidierte Datenschutzgesetz der Schweiz, häufig nDSG genannt, relevant. Wenn Ihre Website auch Besucher aus der EU oder dem EWR anspricht, kann zudem die DSGVO eine Rolle spielen.

Vorteile lokal gehosteter Schriftarten

Wenn Sie Google Fonts lokal auf Ihrem eigenen Webhosting speichern, behalten Sie mehr Kontrolle über die Auslieferung Ihrer Schriftarten. Die Schriften werden dann direkt von Ihrer eigenen Domain geladen, statt von externen Google-Servern.

Das bietet mehrere Vorteile:

• Weniger externe Verbindungen: Der Browser muss keine Schriftdateien von Google abrufen.
• Bessere Datenschutzkontrolle: Es findet beim Laden der Schriftarten keine direkte Anfrage an Google Fonts statt.
• Stabilere Auslieferung: Die Schriftdateien liegen auf Ihrem eigenen Hosting.
• Potenzielle Performance-Vorteile: Weniger externe DNS- und Verbindungsaufbauten können Ladezeiten verbessern.
• Bessere technische Nachvollziehbarkeit: Sie wissen genauer, welche Dateien von Ihrer Website geladen werden.

Der tatsächliche Geschwindigkeitsvorteil hängt jedoch vom konkreten Setup ab. Eine gut gecachte externe Schrift kann schnell laden, während schlecht eingebundene lokale Schriften ebenfalls bremsen können. Entscheidend ist eine saubere technische Umsetzung.

1. Prüfen, ob Ihre Website Google Fonts extern lädt

Bevor Sie etwas ändern, sollten Sie prüfen, ob Ihre Website überhaupt Google Fonts direkt von Google lädt. Das können Sie auf verschiedene Arten feststellen.

Eine einfache Möglichkeit ist die Browser-Entwicklerkonsole:

1. Öffnen Sie Ihre Website im Browser.
2. Öffnen Sie die Entwicklerwerkzeuge, zum Beispiel mit F12 oder per Rechtsklick und Untersuchen.
3. Wechseln Sie zum Bereich Netzwerk.
4. Laden Sie die Seite neu.
5. Suchen Sie nach Anfragen an fonts.googleapis.com oder fonts.gstatic.com.

Wenn solche Anfragen erscheinen, werden Google Fonts wahrscheinlich extern geladen. Prüfen Sie dabei nicht nur die Startseite, sondern auch wichtige Unterseiten, Landingpages, Blogbeiträge und Shopseiten.

2. Weg A: Google Fonts per Plugin lokal hosten

Für viele WordPress-Nutzer ist ein Plugin der einfachste Weg. Plugins wie OMGF | Host Google Fonts Locally oder vergleichbare Lösungen können Ihre Website nach extern eingebundenen Google Fonts durchsuchen und versuchen, diese lokal bereitzustellen.

Der typische Ablauf sieht so aus:

1. Installieren Sie ein geeignetes Plugin für lokale Google Fonts.
2. Starten Sie den Scan der Website.
3. Lassen Sie gefundene Schriftarten lokal speichern.
4. Aktivieren Sie die Option, externe Google-Fonts-Anfragen zu ersetzen oder zu blockieren.
5. Leeren Sie den Website-Cache.
6. Prüfen Sie erneut, ob noch Verbindungen zu Google Fonts bestehen.

Diese Methode ist besonders praktisch, wenn Sie nicht direkt mit CSS-Dateien, Child-Themes oder FTP arbeiten möchten.

3. Weg B: Google Fonts in Elementor lokal verwenden

Wenn Sie Elementor verwenden, können Sie eigene Schriftarten hochladen und in Ihren Designs verwenden. Diese Funktion ist besonders nützlich, wenn Sie gezielt bestimmte Schriftarten lokal bereitstellen möchten.

Der empfohlene Ablauf:

1. Laden Sie die benötigten Schriftdateien im modernen Format WOFF2 herunter.
2. Öffnen Sie im WordPress-Dashboard den Bereich für eigene Schriftarten von Elementor.
3. Laden Sie die Schriftdateien hoch.
4. Weisen Sie die Schriften den gewünschten Elementor-Elementen zu.
5. Deaktivieren Sie externe Google-Fonts-Verbindungen in Elementor, Theme oder zusätzlichen Plugins.
6. Leeren Sie Cache und optimierte CSS-Dateien.
7. Prüfen Sie die Website mit den Browser-Entwicklerwerkzeugen.

Je nach Elementor-Version und Lizenz können die verfügbaren Funktionen unterschiedlich sein. Prüfen Sie deshalb, welche Optionen in Ihrer Installation tatsächlich vorhanden sind.

4. Weg C: Google Fonts manuell lokal einbinden

Für technisch erfahrene Nutzer ist auch eine manuelle Einbindung möglich. Dabei laden Sie die benötigten Schriftdateien herunter, speichern sie in Ihrem Theme oder Child-Theme und binden sie per CSS ein.

Ein einfaches Beispiel für eine lokale Einbindung mit @font-face:

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

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

Die Eigenschaft font-display: swap; sorgt dafür, dass zunächst eine Ersatzschrift angezeigt werden kann, bis die eigentliche Webfont geladen ist. Das kann die wahrgenommene Ladezeit verbessern und verhindert, dass Texte während des Ladevorgangs unsichtbar bleiben.

5. Nur benötigte Schriftschnitte laden

Ein häufiger Performance-Fehler ist das Laden zu vieler Schriftschnitte. Viele Websites verwenden zum Beispiel eine Schriftfamilie mit zahlreichen Varianten: 300, 400, 500, 600, 700, kursiv und weitere Kombinationen. Jede Variante kann eine zusätzliche Schriftdatei bedeuten.

In der Praxis reichen häufig wenige Schriftschnitte aus:

• 400: normaler Fliesstext
• 600 oder 700: Überschriften oder Hervorhebungen
• italic: nur wenn kursive Schrift wirklich verwendet wird

Je weniger Schriftdateien geladen werden, desto schlanker wird die Seite. Das verbessert nicht nur die Ladezeit, sondern vereinfacht auch die Wartung.

6. WOFF2 bevorzugen

Für moderne Websites ist WOFF2 in der Regel das bevorzugte Schriftformat. Es ist gut komprimiert und wird von modernen Browsern breit unterstützt. Ältere Formate wie TTF oder EOT sind für aktuelle Websites meist nicht mehr nötig, ausser Sie müssen sehr alte Browser unterstützen.

Wenn Sie Schriftdateien lokal hochladen, achten Sie daher darauf, möglichst WOFF2-Dateien zu verwenden. Das spart Datenvolumen und verbessert die Auslieferung.

7. Cache nach der Umstellung leeren

Nach der Umstellung auf lokale Google Fonts sollten Sie alle relevanten Caches leeren. Dazu gehören:

• WordPress-Cache
• Cache Ihres Performance-Plugins
• serverseitiger Cache, falls aktiv
• CDN-Cache, falls verwendet
• Browser-Cache beim Testen

Ohne Cache-Leerung kann es passieren, dass weiterhin alte CSS-Dateien oder externe Font-Anfragen ausgeliefert werden. Dadurch wirkt es so, als hätte die Umstellung nicht funktioniert.

8. Nach der Umstellung richtig testen

Nach der lokalen Einbindung sollten Sie Ihre Website sorgfältig prüfen. Achten Sie dabei nicht nur auf die Startseite, sondern auch auf Seiten, die mit Pagebuildern, Formularen, Shop-Plugins oder besonderen Templates erstellt wurden.

Prüfen Sie insbesondere:

• Werden alle Texte korrekt dargestellt?
• Gibt es sichtbare Layout-Verschiebungen?
• Werden die richtigen Schriftarten verwendet?
• Gibt es noch Anfragen an fonts.googleapis.com?
• Gibt es noch Anfragen an fonts.gstatic.com?
• Funktioniert die mobile Ansicht korrekt?
• Wurde der Cache vollständig geleert?

Wenn weiterhin Google-Fonts-Anfragen sichtbar sind, kann die Ursache in Ihrem Theme, Pagebuilder, einem Plugin oder eingebettetem Drittanbieter-Code liegen.

9. Typische Fehler bei lokalen Google Fonts

Bei der Umstellung treten häufig ähnliche Fehler auf. Viele davon lassen sich vermeiden, wenn Sie systematisch vorgehen.

• Zu viele Schriftvarianten: Unnötige Schriftschnitte verlangsamen die Seite.
• Falsche Dateipfade: CSS verweist auf Schriftdateien, die nicht gefunden werden.
• Externe Fonts nicht deaktiviert: Lokale Fonts sind vorhanden, aber Google Fonts werden weiterhin geladen.
• Cache nicht geleert: Alte CSS-Dateien bleiben aktiv.
• Theme lädt Fonts nach: Das Theme bringt eigene Google-Fonts-Einstellungen mit.
• Pagebuilder lädt separate Fonts: Elementor, Divi oder andere Builder können eigene Font-Einstellungen haben.
• Icons mit Fonts verwechselt: Icon-Fonts wie Font Awesome sind ein eigenes Thema und sollten separat geprüft werden.

10. Performance: Was bringt lokale Font-Einbindung wirklich?

Lokales Hosting von Schriftarten kann die Ladezeit verbessern, weil weniger externe Verbindungen aufgebaut werden müssen. Besonders bei Websites mit vielen externen Ressourcen kann das einen spürbaren Unterschied machen.

Der tatsächliche Effekt hängt jedoch von mehreren Faktoren ab:

• Anzahl der geladenen Schriftarten
• Anzahl der Schriftschnitte
• Cache-Konfiguration
• Servergeschwindigkeit
• Theme- und Pagebuilder-Struktur
• Verwendetes Dateiformat
• Optimierung von CSS und JavaScript

Eine pauschale Verbesserung in Millisekunden lässt sich deshalb nicht seriös versprechen. In vielen Fällen ist der Vorteil aber messbar, vor allem wenn zuvor mehrere externe Font-Anfragen bestanden.

11. SEO und Core Web Vitals

Schriftarten beeinflussen die Nutzererfahrung. Wenn Texte erst spät sichtbar werden oder sich das Layout während des Ladens verschiebt, kann das Besucher stören. Solche Effekte können auch Kennzahlen wie Ladezeit, Cumulative Layout Shift oder die wahrgenommene Geschwindigkeit beeinflussen.

Für SEO ist lokale Font-Einbindung kein direkter Ranking-Trick. Sie kann aber Teil einer sauberen technischen Optimierung sein. Eine schnelle, stabile und datenschutzbewusst aufgebaute Website bietet bessere Voraussetzungen für Nutzerzufriedenheit und Suchmaschinenqualität.

12. GEO: Warum klare technische Qualität auch für KI-Suchsysteme zählt

GEO, also die Optimierung für generative Suchsysteme, betrifft nicht nur Texte. Auch die technische Qualität einer Website spielt eine Rolle, weil Inhalte zuverlässig erreichbar, schnell ladbar und sauber strukturiert sein sollten.

Eine Website mit weniger externen Abhängigkeiten, stabiler Auslieferung und klarer technischer Struktur ist robuster. Das hilft nicht nur Besuchern, sondern auch Suchmaschinen und automatisierten Systemen beim Erfassen Ihrer Inhalte.

Lokale Google Fonts sind deshalb ein kleiner, aber sinnvoller Baustein in einer ganzheitlichen Website-Optimierung.

Empfohlene Vorgehensweise

1. Website prüfen: Suchen Sie nach Anfragen an fonts.googleapis.com und fonts.gstatic.com.
2. Methode wählen: Plugin, Pagebuilder-Funktion oder manuelle Einbindung.
3. Nur benötigte Fonts verwenden: Reduzieren Sie Schriftfamilien und Schriftschnitte.
4. WOFF2 nutzen: Verwenden Sie moderne, komprimierte Schriftdateien.
5. Externe Font-Ladung deaktivieren: Prüfen Sie Theme, Pagebuilder und Plugins.
6. Cache leeren: Löschen Sie WordPress-, Plugin-, Server- und CDN-Cache.
7. Erneut testen: Kontrollieren Sie Netzwerk-Anfragen und Darstellung.
8. Datenschutzerklärung prüfen: Aktualisieren Sie Hinweise, falls sich Dienste ändern.

Häufige Fragen zu lokalen Google Fonts

Warum sollte ich Google Fonts lokal einbinden?

Durch lokale Einbindung vermeiden Sie, dass Schriftarten beim Seitenaufruf direkt von Google-Servern geladen werden. Das reduziert externe Verbindungen und kann Datenschutz- sowie Performance-Vorteile bringen.

Ist meine Website mit lokalen Google Fonts automatisch rechtskonform?

Nicht automatisch. Lokale Fonts lösen nur das konkrete Problem externer Google-Fonts-Anfragen. Andere Dienste wie Analytics, Maps, YouTube, reCAPTCHA, externe Skripte oder Cookies müssen separat geprüft werden.

Wie erkenne ich, ob Google Fonts noch extern geladen werden?

Öffnen Sie die Entwicklerwerkzeuge Ihres Browsers, wechseln Sie zum Netzwerk-Tab und laden Sie die Seite neu. Suchen Sie nach Anfragen an fonts.googleapis.com oder fonts.gstatic.com.

Kann ich Google Fonts mit Elementor lokal nutzen?

Ja, Elementor bietet je nach Version Funktionen für eigene Schriftarten. Zusätzlich sollten Sie prüfen, ob Elementor, Ihr Theme oder andere Plugins weiterhin externe Google Fonts laden.

Welches Schriftformat sollte ich verwenden?

Für moderne Websites ist WOFF2 in der Regel die beste Wahl, weil es gut komprimiert ist und von aktuellen Browsern breit unterstützt wird.

Verbessert lokale Font-Einbindung automatisch mein Google-Ranking?

Nein, nicht direkt. Sie kann aber Ladezeit, Stabilität und Nutzererfahrung verbessern. Diese technischen Faktoren können indirekt zur Qualität Ihrer Website beitragen.

Muss ich nach der Umstellung den Cache leeren?

Ja. Leeren Sie nach der Umstellung alle relevanten Caches, damit alte CSS-Dateien und externe Font-Verweise nicht weiterhin ausgeliefert werden.