Manuelle Anleitung (ohne Plugin)
Diese Methode erfordert den Zugriff auf deinen Server (via FTP oder Dateimanager) und grundlegende CSS-Kenntnisse, idealerweise unter Verwendung eines Child-Themes.
1. Benötigte Fonts ermitteln und herunterladen
- Identifiziere die Fonts: Finde heraus, welche Google Fonts dein Theme oder deine Plugins verwenden. Dies kannst du oft mit den Browser-Entwicklertools (z.B. F12 drücken, dann zum Tab Netzwerk/Network wechseln und nach fonts.googleapis.com oder fonts.gstatic.com filtern) überprüfen.
- Fonts herunterladen: Nutze ein Tool wie den Google Webfonts Helper (gwfh.mranftl.com), um die benötigten Schriftarten (mit den gewünschten Stilen wie Regular, Bold, Italic) auszuwählen und als ZIP-Archiv herunterzuladen. Das Tool generiert auch den notwendigen CSS-Code (@font-face).
- Wähle dabei die Formate WOFF und WOFF2 für die beste Browser-Kompatibilität und Performance.
2. Fonts auf den Server hochladen
- Verbinde dich mit deinem Server (z.B. via FTP mit FileZilla).
- Navigiere zum Verzeichnis deines (Child-)Themes: wp-content/themes/ihr-child-theme/
- Erstelle einen neuen Ordner, z.B. /fonts/.
- Lade die entpackten Schriftdateien (WOFF, WOFF2 etc.) in diesen /fonts/-Ordner hoch.
3. CSS anpassen
- Öffne die Stylesheet-Datei (meistens style.css) deines Child-Themes.
- Kopiere den generierten @font-face Code aus dem Google Webfonts Helper in den Anfang deiner style.css.
- Passe die Pfade an: Stelle sicher, dass der Pfad in der src-Angabe des @font-face Codes korrekt auf den fonts/ Ordner in Ihrem Theme zeigt, z.B. url(‚fonts/schriftname.woff2‘) format(‚woff2‘).
4. Externe Ladevorgänge deaktivieren
- Überprüfe dein Theme: Viele moderne Themes haben eine Option, die externe Google Fonts zu deaktivieren. Suche in den Theme-Einstellungen (oft unter Design oder Datenschutz) danach.
- Entferne die @import oder <link>-Tags: Wenn dein Theme keine Deaktivierungsoption hat, musst du möglicherweise die Code-Stellen in der functions.php deines Child-Themes identifizieren und entfernen, die die externen Google Fonts einbinden (oft mit Funktionen wie wp_dequeue_style).
Plugin-Lösung (Empfohlen für Einsteiger)
Die einfachste und schnellste Methode ist die Nutzung eines spezialisierten Plugins.
Vorgehensweise mit Plugin:
- Installiere und Aktiviere das Plugin (z.B. OMGF) über das WordPress-Dashboard unter Plugins \rightarrow Installieren.
- Öffne die Plugin-Einstellungen (oft unter Einstellungen \rightarrow Google Fonts oder OMGF).
- Lasse die Website scannen: Die Plugins können deine Website automatisch nach extern geladenen Google Fonts durchsuchen.
- Lokales Hosting aktivieren: Das Plugin lädt die gefundenen Schriften automatisch herunter, speichert sie lokal auf deinen Server und ersetzt die externen Aufrufe durch lokale Pfade.
- Überprüfen: Kontrolliere abschließend erneut mit den Browser-Entwicklertools (Netzwerk-Tab), ob noch Verbindungen zu Google-Servern (fonts.googleapis.com oder fonts.gstatic.com) bestehen.
Dieses YouTube-Video WordPress: Google Fonts lokal installieren zeigt eine Anleitung, wie man Google Fonts in WordPress mit dem Gutenberg Editor lokal einbindet.