So hosten Sie Google Fonts selbst in WordPress

Das Laden von Google Fonts von Google-Servern erstellt eine Drittanbieter-Verbindung, die IP-Adressen von Besuchern überträgt. Für Websites mit EU-Besuchern wirft dies DSGVO-Bedenken auf. Selbst-Hosting eliminiert diese Verbindung vollständig und gibt Ihnen die Kontrolle über Caching und Auslieferung.

Dieser Leitfaden behandelt drei Ansätze zum lokalen Hosten von Schriftarten in WordPress: die native Font Library für Block-Themes, manuelle Implementierung für klassische Themes und einen kurzen Hinweis zu Plugin-Alternativen.

Warum Google Fonts selbst hosten?

Wenn Besucher Ihre Website laden, ruft ihr Browser Schriftarten von fonts.googleapis.com und fonts.gstatic.com ab. Jede Anfrage sendet ihre IP-Adresse an Google-Server.

Selbst-Hosting verschiebt Schriftarten-Dateien auf Ihren Server. Vorteile sind:

• Datenschutz-Konformität: Keine Drittanbieter-Datenübertragung zu dokumentieren oder zu rechtfertigen
• Performance-Kontrolle: Setzen Sie eigene Cache-Header und nutzen Sie Preloading
• Zuverlässigkeit: Keine Abhängigkeit von externen Diensten

Der Performance-Unterschied zwischen Googles CDN und einem gut konfigurierten lokalen Setup ist typischerweise minimal. Der Hauptgrund für die meisten Websites ist DSGVO-Konformität, nicht Geschwindigkeit.

Block-Themes: Nutzen Sie die native Font Library

WordPress 6.5+ enthält eine Font Library, die Schriftarten lokal herunterlädt und bereitstellt. Dies ist der einfachste Ansatz für Block-Themes.

Schritte:

1. Navigieren Sie zu Design → Editor
2. Öffnen Sie Stile (obere rechte Ecke) → Typografie
3. Klicken Sie auf Schriftarten verwalten → Schriftarten installieren
4. Suchen Sie nach Ihrer Schriftart, wählen Sie die benötigten Schriftschnitte aus und klicken Sie auf Installieren

WordPress lädt die WOFF2-Dateien nach wp-content/fonts/ herunter und registriert sie in der Konfiguration Ihres Themes. Nach der Installation erfolgen keine externen Verbindungen mehr.

Einschränkungen: Dies funktioniert nur mit Block-Themes. Klassische Themes erfordern manuelle Implementierung.

Klassische Themes: Manuelle Implementierung

Für klassische Themes laden Sie Schriftarten herunter und schreiben das CSS selbst.

Schriftarten-Dateien herunterladen und konvertieren

1. Besuchen Sie Google Fonts, wählen Sie Ihre Schriftart aus und laden Sie sie herunter
2. Falls Ihr Download TTF-Dateien enthält, konvertieren Sie diese mit google-webfonts-helper oder Transfonter zu WOFF2
3. Laden Sie die Dateien in Ihr Theme hoch: wp-content/themes/ihr-theme/fonts/

Schriftarten mit CSS registrieren

Fügen Sie dies zu Ihrer Theme-Datei style.css oder einem benutzerdefinierten Stylesheet hinzu:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Wichtige Eigenschaften:

• font-display: swap: Zeigt sofort Fallback-Text an und wechselt dann zur Schriftart, wenn sie geladen ist. Verhindert unsichtbaren Text.
• font-weight: 100 900: Für variable Schriftarten deklariert dies den vollständigen Gewichtsbereich in einer Datei.

Für statische Schriftarten erstellen Sie separate @font-face-Regeln für jeden verwendeten Schriftschnitt.

Schriftart anwenden

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Fügen Sie immer System-Schriftarten als Fallback hinzu.

Remote-Laden deaktivieren

Überprüfen Sie, dass keine Remote-Schriftarten geladen werden, indem Sie die DevTools öffnen (F12), zum Network-Tab gehen, nach Font filtern und neu laden. Suchen Sie nach Anfragen an fonts.gstatic.com.

Falls Ihr Theme Google Fonts remote lädt, prüfen Sie dessen Einstellungen auf eine Deaktivierungsoption. Andernfalls müssen Sie möglicherweise das Stylesheet in functions.php aus der Warteschlange entfernen oder ein Plugin wie Disable and Remove Google Fonts verwenden.

Plugin-Alternativen

Mehrere Plugins automatisieren das lokale Schriftarten-Hosting:

• OMGF (Optimize My Google Fonts): Erkennt und lädt Schriftarten automatisch herunter
• Local Google Fonts: Ähnliche Funktionalität mit Subset-Unterstützung
• WP Rocket: Enthält eine Ein-Klick-Option in den Medien-Einstellungen

Plugins funktionieren gut, wenn Themes oder Page Builder Schriftarten auf eine Weise laden, die schwer manuell zu überschreiben ist. Sie sind nicht zwingend erforderlich – die oben genannten Methoden funktionieren ohne sie.

Best Practices

WOFF2 bevorzugen: Es bietet etwa 30 % bessere Kompression als WOFF und hat über 97 % Browser-Unterstützung. Überspringen Sie ältere Formate, es sei denn, Sie benötigen IE11-Unterstützung.

Variable Schriftarten verwenden, wenn verfügbar: Eine Datei deckt alle Schriftschnitte ab und reduziert HTTP-Anfragen.

Preload sparsam einsetzen: Laden Sie nur Schriftarten vor, die above the fold verwendet werden:

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

crossorigin bedingt einfügen: Fügen Sie es nur hinzu, wenn Ihr Server die entsprechenden CORS-Header sendet.

@import vermeiden: Es blockiert das Rendering. Verwenden Sie stattdessen <link>-Tags oder @font-face.

Fazit

Für Block-Themes übernimmt die WordPress Font Library alles – installieren Sie Schriftarten über den Editor und Sie sind fertig. Für klassische Themes laden Sie WOFF2-Dateien herunter, schreiben @font-face-Regeln und überprüfen, dass keine Remote-Verbindungen bestehen bleiben.

Selbst-Hosting gibt Ihnen volle Kontrolle über die Schriftarten-Auslieferung und eliminiert Drittanbieter-Datenübertragungen. Die Implementierung dauert nur Minuten, und das Ergebnis ist eine sauberere, datenschutzbewusstere Website.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.