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: swapVerbessert 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.

Google Fonts Webseite

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:

1

Schrift(en) aussuchen

Durch Klick auf das rot-hinterlegte Plus-Icon können wir eine beliebige Google Font in einer Dialog-Box aufrufen, um weitere Details zur Verwendung zu erhalten.

2

Dialog-Box öffnen

Am unteren Fensterrand erscheint nun eine Dialog-Box, welche wir anklicken. Das Dialog-Feld vergrößert sich und zeigt die erweiterten Einstellungen der ausgewählten Schrift(en).

3

Schriftart anpassen

Dort klicken wir auf den „Tab: Customize“ um zu beeinflussen welche verschiedenen Schriftstärken wir auf unserer Webseite laden wollen. Das könnte z.B. „light 300“ oder „bold 700 italic“ sein. Manche Schriften bietet nur eine Schriftstärke!

4

Google Fonts URL kopieren

Unter dem „Tab: Embed“ kopieren wir den Wert des href-Attributes wie z.B.: https://fonts.googleapis.com/css?family=Roboto&display=swap. Diese URL verwenden wir für das Laden der Schrift(en) vom externen Google Fonts Server, wenn wir die Methode 2 für die Einbindung nutzen.

Verwenden wir stattdessen Methode 1, kopieren wir nur die jeweiligen Bestandteile der URL und fügen sie in unsere wordpress_google_fonts_url() Funktion ein.

5

Das CSS der Google Font kopieren

Um die eingebetteten Google Fonts Schriften für die Anzeige auf der Webseite festzulegen, kopieren wir die Stylesheet-Definitionen (wie z.B.: font-family: ‚Roboto‘, sans-serif) und speichern diese in der CSS-Datei der Webseite.

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:

Google Fonts in WordPress einbinden und laden Wertung: 5 / 5 (5Stimmen)
Der Autor
Veröffentlicht von
Martin Jost
Weiterlesen
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.