Webfonts lokal einbinden | Zurück zum ABC
Webfonts lokal einbinden
Mit der Suche nach “WordPress Google-Webfonts lokal einbinden ohne Plugin” finden Sie sehr viele Artikel, die die Problematik beschreiben und Lösungen anbieten – z.B. lightweb-media.de oder blogmojo.de.
Mein Weg:
- Ich suche nach verwendeten Schriftarten. z.B. mit den Entwicklertools von Mozilla:
Rechte Maustaste – Untersuchen – Inspektor – Schriftarten und finde im Beispielfall Nunito und Poppins. In der .jason Datei meines Themes wird das bestätigt, wenn ich sie mit meinem Editor Notepad öffne und analysiere. Ich finde fontFamily “Poppins”und fontFamily “Nunito” und so ziemlich alle FontWeights dazu. - Ich rufe den google-webfonts-helper auf. Suche nach der Schrift, wähle die Größen aus, kopiere den css-Code mit dem Prefix ../fonts/, und lade die .zip-Datei herunter.
- Ich füge mit Notepad den kopierten css-Code in die style.css meines Childthemes ein.
- Ich entzippe die downgeloadteten Schriften und kopiere sie in ein neu erstelltes Verzeichnis “fonts”
- Mit meinem FTP-Programm Filezilla lade ich die ergänzte style.css zum Child-Theme hoch und den Ordner “fonts” zu den Themes. Dann passt das Prefix ../fonts.
- In Autoptimize unter Extras entferne ich alle Verbindungen zu Google-Fonts.
- Auf der Seite, auf der ich den SmartSlider 3 verwendet habe, wurde durch das Plugin weiterhin eine Verbindung zu den Google Servern hergestellt. Unter den Einstellungen vom Slider konnte diese jedoch einfach deaktiviert werden.
Und wunderbar …. der Vorher-Nachher-Vergleich zeigt das Webseiten-Layout mit den gewünschten Schriftarten an, aber diese werden lokal gehostet. Hier die entsprechenden Screenshots mit den Entwicklertools von Firefox.
Die Methode, die Google-Fonts in der function.php des Child-Themes zu unterbinden, wie lightweb-media.de beschrieben hat, habe ich – mit Hilfe meines Theme-Supports – folgendermaßen abgeändert und es hat funktioniert. Trotzdem bleibe ich bei der Option, die Google-Fonts über Autoptimize zu entfernen.
/* Google-Fonts unterbinden */
add_action( 'wp_enqueue_scripts', 'alara_dequeue_styles', 100 ); function alara_dequeue_styles() {
wp_dequeue_style( 'alara-fonts' );
}