Lokale Google Fonts als WordPress-Plugin

Wer in meinem letzten Beitrag zum Thema Google-Fonts lokal in einer WordPress-Installation laden den Gedanken hatte, dass man das ganze vielleicht in einem Plugin “schöner verpacken” könnte, der hat nicht ganz unrecht. Erstellt man sich ein Plugin, um Google Fonts lokal zu laden, hat diese zudem den Vorteil, dass man dieses Plugin – vorausgesetzt es enthält die gewünschten bzw. benötigten Google Fonts – auf beliebig vielen WordPress-Installationen einsetzen kann.

Im Folgenden möchte ich euch zeigen, wie ihr ganz einfach ein eigenes Plugin erstellen könnte, das die benötigten Google Fonts lokal lädt. Als Beispiel nehme ich eine Installation, die als Theme das Standard-Theme Twenty Seventeen nutzt. Ein Blick auf die genutzten Schriftarten zeigt, welcher Fonts von Google geladen wird.

Das WordPress-Theme Twenty Seventeen lädt den Fonts Libre Franklin

Zunächst einmal muss man sich die benötigten Fonts beim google webfonts helper herunterladen. Diese könnte ihr im Anschluss schon einmal entpacken.

Für das Plugin benötigt ihr dann folgende Ordnerstruktur:

  • local-fonts (Hauptordner des Plugins)
    • local_fonts.php (Hier kommt der Code für das Entfernen (optional) und Laden der Fonts rein.)
    • assets (Ordner für Font- und CSS-Dateien)
      • css (Ordner für CSS-Datei)
        • local_fonts.css
      • fonts (Ordner für Schriftdateien)

Die entpackten Schriften kommen in den fonts-Ordner. In die CSS-Datei local_fonts.css fügt ihr den für eure Schriftarten passend generierten Code ein.

CSS-Code zur Einbindung der lokalen Schriften

In die php-Datei local_fonts.php kommt der folgende Code:

<?php



function remove_google_fonts() {
   wp_dequeue_style( 'twentyseventeen-fonts' );
}
add_action( 'wp_print_styles', 'remove_google_fonts', 1);


function LocalFonts_styles() {
   wp_enqueue_style( 'LocalFontsCSS', plugin_dir_url( __FILE__ ) . 'assets/css/local_fonts.css' );
}
add_action( 'wp_enqueue_scripts', 'LocalFonts_styles' );

?>

Zum einen werden hier die Google-Fonts, die das Theme standardmäßig vom Google-Server lädt entfernt und gleichzeitig wird die CSS-Datei angegeben, die Informationen enthält, um die lokal gespeicherten Google Fonts zu laden.

Den ersten Code-Teil (Externe Fonts entfernen) muss man anpassen, wenn das Plugin für ein anderes Theme eingesetzt wird, evtl. ist er auch nicht notwendig, wenn man die Deaktivierung in den Theme-Einstellungen “per Klick” vornehmen kann.

Den Ordner local-fonts könnt ihr dann im Anschluss zippen und ihn dann als Plugin installieren. Das Plugin hat keinerlei Optionen, sondern arbeitet out-of-the-box.

Image(s) licensed by Ingram Image/adpic.

Diesen Beitrag teilen:

Verwandte Beiträge:

3 Kommentare

  1. Hallo!

    Habe eure Beschreibung für die Erstellung eines Plugins befolgt.
    Wenn ich das Plugin installieren will kommt eine Fehlermeldung

    Das Paket konnte nicht installiert werden. Es wurden keine funktionsfähigen Plugins gefunden. Plugin-Installation fehlgeschlagen.

    Danke im Voraus für die Hilfe.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.