E-Books zu WordPress, Joomla, Bildbearbeitung und Suchmaschinenoptimierung (SEO)

    Google Fonts lokal in WordPress einbinden

    Google Fonts lokal in WordPress einbinden

    Eine individuelle Schriftart sieht gut aus und lässt sich in vielen Templates direkt per Google-Fonts einbinden. Das ist zwar einfach, aber  leider keine gute Idee. Zum Glück gestatten die Lizenzbedingungen für die Nutzung der Google Schriftarten auch eine lokale Verwendung.

    Warum sollte ich Google Fonts nicht direkt benutzen?

    Damit vermeiden Sie zwei Dinge:

    • Ihre WordPress-Webseite muss die Fonts nicht erst von Google herunterladen, das ist meistens schneller und verkürzt die Ladezeit der Webseite.
    • Mit dem Abruf der Google-Fonts von den Google-Servern übertragen Sie personenbezogene Daten an Google. Eine datenschutzkonforme Einbindung ist seit dem EuGH-Urteil zur Unwirksamkeit des Privacy-Shields, aus dem Juli 2020, nicht wirklich möglich.

    Die Schriftarten lokal einzubinden ist aber zum Glück nicht sehr schwer. Ein kostenloses Onlinetool hilft Ihnen bei den notwendigen Vorarbeiten.

    Rufen Sie das Tool Google-Webfonts-Helper unter https://google-webfonts-helper.herokuapp.com auf.Webfonts Helper Zeichensatz aussuchen

    Geben Sie in das Suchfenster den Namen der Schriftart Ihrer Webseite ein und wählen Sie unter 1. Select charsets und 2. Select styles die benötigten Stile und Zeichensätze. Normalerweise reichen hier die Voreinstellungen latin und regular. Weitere Schriftschnitte erzeugen die Browser inzwischen selbst.

    Webfonts Helper Download

    Unter 3. Copy CSS klicken Sie auf Modern Browsers, dadurch werden nur die Zeichensätze im WOFF-Format eingebunden. Best Support würde weitere Formate einbinden, die aber nur noch für sehr alte Browser benötigt werden.

    Die Einstellung Modern Browsers ist für Browser ab diesen Versionen ausreichend:

    • Chrome 6
    • Firefox 3.6
    • IE 9
    • Safari 5.1

    Klicken Sie anschließend auf den blauen Button im Abschnitt 4. Download files, um die Fonts herunterzuladen.

    Entpacken Sie das .zip-Archiv und laden Sie es auf Ihren Webserver in das Verzeichnis, das Sie unter Customize folder prefix (optional) unter Punkt 3 Copy CSS eingetragen haben. Falls Sie dort nichts geändert haben ist es das Verzeichnis /fonts/, das Sie unterhalb des Verzeichnisses /wp-content/themes/ erstellen müssen.

    Jetzt müssen Sie die hochgeladenen Fonts nur noch in die Webseite einbinden. Das machen Sie in der Datei style.css, die Sie im Verzeichnis /wp-content/themes/Name-Ihres-Themes/ finden. Noch besser ist es, wenn Sie ein neues Child-Theme erstellen, ansonsten müssen Sie die Anpassung nach jedem Update des Themes erneut machen.

    Kopieren Sie den Inhalt des grauen Bereiches aus 3. Copy CSS und fügen ihn am Anfang der Datei style.css ein.

    Jetzt müssen Sie nur noch Ihr Template daran hindern die Fonts von Google zu laden. Die beste Möglichkeit dafür ist es die entsprechenden Aufrufe aus den Dateien des Templates zu entfernen. Das setzt aber Kenntnisse in PHP, CSS und dem Aufbau des Templates voraus. Einfacher ist es diesen Schritt einem Plugin zu überlassen. Sie finden zwar einige Plugins, die nur die Verbindung zum Google-Server kappen sollen, als zuverlässigstes Plugin habe ich aber Autoptimize kennengelernt.

    In den Plugineinstellungen aktivieren Sie auf dem Tab JS, CSS & HTML den Haken vor CSS-Code optimieren?

    Autoptimize WordPress

    Und dann auf dem Tab Extras Google Fonts entfernen.

    Autoptimize WordPress Plugin

    Damit haben Sie alles Notwendige getan um Ihre Schriften lokal zu speichern.

    Um den Erfolg Ihrer Aktion zu überprüfen, können Sie die Entwicklerkonsole von Mozilla Firefox benutzen.

    Rufen Sei dazu Ihre Webseite mit Firefox auf und klicken nach einem Rechtsklick auf Element untersuchen. Auf dem Tab Netzwerkanalyse können Sie sehen, welche Quellen Ihre Webseite aufruft. Wenn Sie dort keinen Host namens fonts.googleapis.com finden, hat alles wie gewünscht funktioniert.

    Inspektor ohne Google Fonts Firefox

    Diese Anleitung ist ein kleiner Auszug aus meinem E-Book Einführung in die Bedienung von WordPress 5, das Sie hier herunterladen können.

     

     

     

     

     

     

    Webdesign

    Hier bekommen Sie Ihr persönliches Rundum-sorglos-Paket:
    • Design Ihrer neuen Webseite
    • Optimierung Ihrer bestehenden Internetseite
    • Suchmaschinenoptimierung (SEO)
    • Webhosting
    • Social-Media-Integration
    • Hilfe bei allen technischen Fragen

    Rückrufservice

      *=Pflichtfeld

      Fotografie

      Ich fotografiere die Produkte für Ihren Onlineshop, Gebäudeansichten Ihrer Firma, Sie und Ihre Mitarbeiter oder alles andere, was auf Ihrer Webseite gezeigt werden soll. Natürlich inklusive professioneller Bildbearbeitung.
      Sie erhalten bei mir:
      • Produkt-/Objektfotos
      • Food-/Naturfotos
      • individuelle Hintergründe und Banner