Google Fonts in WordPress einbinden und laden
Fast jede moderne Webseite verwendet heute Web-Schriften, wie z.B. Google Fonts, für die Darstellung von Überschriften und Fließtext. Die Einbindung von webbasierten Schriften hat den Vorteil, dass dieselbe Schriftart auf allen Geräten angezeigt werden kann, unabhängig davon, welche System-Schriftarten, z.B. auf einem Desktop-PC oder einem Smartphone installiert sind.
Wenn wir also Web-Schriften wie Google Fonts auf einer Webseite einbinden, können wir für einen einheitlichen Look auf allen möglichen Geräten sorgen. Nutzen wir allerdings keine Web-Schriften, könnte immer eine unterschiedliche Schriftart angezeigt werden, je nachdem über welche Schriften ein Gerät verfügt.
Dieser Artikel gibt dir Tipps und zeigt dir wie einfach wir Google Fonts in WordPress ohne Plugin einbinden und laden können.
Die Google Fonts URL für WordPress erstellen
Hinweis: Je mehr verschiedene Google Fonts und Schriftstärken du für die Anzeige deiner WordPress Webseite verwendest, desto mehr beeinflusst das die Ladezeit. Im Durchschnitt ist das Laden von 2 Schriftarten (Überschrift / Mengentext) mit jeweils 2-3 Schriftstärken üblich. Mehr sollten es zugunsten der Ladezeit nicht sein.
Zu den wichtigen URL-Bestandteilen beim Laden von Google Fonts zählen die folgenden:
- family: Open+Sans:300,500,800 – Eine oder mehrere Google Fonts durch die Angabe des Schriftnamen und deren Schriftstärken.
- subset: latin, latin-ext – Einige Google Fonts enthalten mehrere Zeichensätze für z.B. Latein, Kyrillisch und Griechisch. Mit subset können wir klar definieren, welche dieser Zeichensätze geladen werden sollen. Die Reduzierung der Zeichensätze verringert die Dateigröße der Google Font.
- display: swap – Verbessert die gefühlte Ladezeit, indem zunächst eine Standard-Schrift angezeigt wird, bevor die Google Font vollständig geladen ist.
Die richtigen Google Fonts auswählen
Zunächst besuchen wir https://fonts.google.com/und wählen eine beliebige Schriftart für die Verwendung auf unserer WordPress Webseite aus. In der Regel verwendet man dafür eine Schriftart für Überschriften und eine weitere für den Fließtext. Aber auch nur eine einzige Schriftart kann für beide Fälle ausreichend sein.
Der folgende Teil zeigt dir wie du alle nötigen Daten einer speziellen Google Font Schriftart auf https://fonts.google.com/ findest und für die Verwendung auf deiner WordPress Webseite nutzen kannst:
Wie kann ich Google Fonts in WordPress ohne Plugin einbinden?
Nun weißt du warum die Verwendung von Web-Schriften wie Google Fonts, auf deiner Webseite von Vorteil sein kann. Im folgenden Teil zeige ich wie wir eine Google Fonts URL mit allen wichtigen Parametern zusammensetzen und erstellen können. Dafür können wir 2 verschiedene Methoden verwenden, um das Laden von Google Fonts in WordPress zu ermöglichen.
Tipp zur fehlerfreien Eingabe der Google Fonts URL: Wenn wir mehrere Schriften innerhalb einer Anfrage einbinden möchten, dann müssen wir jede neue Google Font durch das „Pipe“ Zeichen „|“ trennen, wie z.B.: Roboto:400,500,700|Open+Sans:300,400,600,700.
Verwenden wir Google Fonts mit einem Leerzeichen innerhalb des Schriftnamen, müssen wir das Leerzeichen durch ein „Plus“ Zeichen „+“ ersetzen, wie z.B.: Open+Sans.
Methode 1: Google Fonts Funktion erstellen und mit „wp_enqueue_style“ laden
Über die folgende Funktion wordpress_google_fonts_url() schaffen wir eine Lösung, mit der wir zunächst eine individuelle Google Fonts URL für die spätere Einbindung in WordPress erstellen können. Innerhalb dieser Funktion verwenden wir add_query_arg() um alle nötigen Bestandteile für das Laden von Google Webfonts zusammenzufassen:
Nun verwenden wir wp_enqueue_style(), den empfohlenen Weg im in WordPress Stylesheet-Dateien einzubinden, damit unsere benutzerdefinierten Google Fonts im Frontend der Webseite geladen werden können:
Methode 2: Die Google Schriften über die URL direkt mit „wp_enqueue_style“ laden
Wenn wir die einfachere und schnellere Lösung bevorzugen, Google Fonts auf unserer WordPress Webseite zu laden, können wir anstelle der vorherigen Deklarierung der URL Bestandteile mit wordpress_google_fonts_url(), die Font-URL in wp_enqueue_style() auch direkt laden.
Dafür benötigen wir die komplette Google Font URL inkl. des Schriftnamen, (Schriftstärke) und falls benötigt, den optionalen Parametern „display“ und „subset“. Die URL könnte dann wie folgt aussehen: https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap&subset=latin-ext. Füge dazu den folgenden Code, bspw. in die functions.php Datei deines WordPress Themes (Child Themes) ein:
Die Google Font über CSS definieren
Mit einer der beiden oberen Methoden haben wir Google Fonts ganz einfach ohne Plugin in unser WordPress Theme oder Plugin eingebettet und verfügbar gemacht. Nun werden die Schriften bereits beim Aufruf unserer Webseite von einem externen Google-Server geladen und stehen zur Verwendung bereit.
Damit die geladenen Web-Schriften jedoch auch im Frontend angezeigt werden können, müssen wir in unseren Stylesheet-Dateien festlegen, in welchem Fall, welche Schriftart verwendet werden soll. Diese Definitionen legen wir in den CSS-Dateien des WordPress Themes bzw. des Child Themes fest.
Standardschrift für die gesamte Webseite definieren
Zunächst definieren wir eine Schriftart die für jedes Element genutzt werden soll. Dazu sprechen wir den body-Tag der Webseite an und fügen mit font-family die entsprechende Schriftart hinzu:
Insofern keine weitere Schriftart für spezielle HTML-Tags oder CSS-Klassen definiert wird, gilt die festgelegte Schriftart für jedes Element deiner Webseite.
Schrift nur für die Überschriften definieren
Wenn wir eine weitere Schriftart explizit für alle Überschriften definieren wollen, legen wir eine zweite Schriftart für alle „Heading-Tags“ der Webseite an:
