google-fonts-wordpress-theme-thumb

Google Fonts in WordPress-Themes nutzen

Es gibt mehrere Möglichkeiten Google Fonts in WordPress-Themes zu nutzen. Theme-Entwickler sollten die für ein Theme benötigten Google-Schriften immer direkt in die functions.php Datei des Themes einbinden. Im ersten Teil des Artikels zeige ich also kurz, wie das funktioniert und was du bei der Schrift-Einbindung beachten solltest. Außerdem stelle ich auch noch ein praktisches WordPress-Plugin vor, um Google Fonts einzubinden. So musst du die Theme-Dateien nicht anpassen, aber du kannst trotzdem eigene Schriften im Theme hinzufügen.

1. Google Fonts über die functions.php Datei einbinden

Wenn du ein ganz eigenes neues Theme baust, fügst du die von dir im Webdesign angelegten Google-Schriften direkt über eine Funktion in die functions.php Datei deines Themes ein. Wenn du zum ersten mal ein Theme selbst entwickelst, ist es hilfreich einen Blick in die functions.php Datei des aktuellen WordPress Standard-Themes (derzeit das Twenty Fifteen WordPress Theme) zu werfen. Dort werden die Schriften nach der aktuell empfohlenen Methode eingebunden und du kannst schauen, wie es ungefähr funktioniert.

Der benötigte Code-Schnipsel für deine functions.php sieht so aus (im Beispiel nutze ich die Open Sans):

function yourthemename_fonts_url() {
    $fonts_url = '';
 
    /* Translators: If there are characters in your language that are not
    * supported by Open Sans, translate this to 'off'. Do not translate
    * into your own language.
    */
    $open_sans = _x( 'on', 'Open Sans font: on or off', 'yourthemename' );
 
    if ( 'off' !== $open_sans ) {
        $font_families = array();
 
        if ( 'off' !== $open_sans ) {
            $font_families[] = 'Open Sans:400italic,700italic,400,700';
        }
 
        $query_args = array(
            'family' => urlencode( implode( '|', $font_families ) ),
            'subset' => urlencode( 'latin,latin-ext' ),
        );
 
        $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
    }
 
    return esc_url_raw( $fonts_url );
}

Als erstes fügst du in der Funktion die Möglichkeit für Theme-Übersetzer hinzu, die gewählte Google-Schrift zu deaktivieren, wenn die Schrift Schriftzeichen einer bestimmten Sprache z.B. nicht unterstützt (für solche Fälle ist es wichtig, dass du im CSS eine Ersatzschrift zu deiner Google-Schrift festlegst).

Google Fonts in WordPress Themes

Möchte der Übersetzer die Google Schrift in einer Sprache aktivieren/deaktivieren, muss er die Übersetzung von „on“ einfach nur als „on“ oder „off“ (an oder aus) übersetzen.

Als zweites bestimmst du in der Funktion die Schrift-Schnitte, die du für dein Theme benötigst. Achte darauf, dass du wirklich nur die Schnitte angibst, die im Theme genutzt werden. Ansonsten kostet das unnötige Lade-Zeit.

Google Fonts in WordPress Themes

Du legst den font-weight und den font-style deiner Schrift an. Auf der Webseite von Google Fonts (unter „Use“) findest du die zur Verfügung stehenden Schrift-Schnitte von allen Schriften. Wenn du ein Häkchen bei den Schnitten machst, siehst du bei „Add This Code to your website“ schon, wie du den Code einfügen musst.

Der Code, der auf der Google Fonts Webseite angegeben wird.
Der Code, der auf der Google Fonts Webseite angegeben wird.

Als nächstes kannst du noch bestimmen, welche Buchstaben-Sets du benötigst bzw. einbinden möchtest. Es gibt je nach Schrift unterschiedliche Möglichkeiten. Die Auswahl findest du auf der Google Fonts-Webseite unter „Choose the character sets you want“. Auch hier kannst du die benötigten Schrift-Sets mit einem Häkchen markieren und deine Auswahl wird dir automatisch als Code angezeigt. In deiner WordPress-Funktion fügst du die benötigten „subsets“ jetzt noch in diesem Code-Absatz hinzu:

Google Fonts in WordPress Themes

Wichtiger Hinweis: Es ist inzwischen empfohlen die Google Fonts mit https einzubinden, um die Sicherheit zu erhöhen. Daher solltest du darauf achten, dass du für die Einbindung der URL https nutzt.

Nachdem du deine Funktion fertig erstellt hast, musst du sie noch über die functions.php Datei enqeuen, damit sie im Frontend angezeigt werden kann:

function yourthemename_scripts_styles() {
    wp_enqueue_style( 'yourthemename-fonts', yourthemename_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'yourthemename_scripts_styles' );

Jetzt kannst du deine neuen Google-Schriften in deinem Stylesheet bestimmen (wie du die Schrift im CSS benennst, steht ebenfalls auf der Google Font Webseite) und sie werden im Frontend des Themes für alle Besucher angezeigt. Es ist sinnvoll für jede Schrift auch eine alternative Schrift und allgemeine Angabe „serif“ oder „sans-serif“ im CSS mit anzugeben. So kann immer auf eine alternative Schriftart zurückgegriffen werden, sollte die erste Wahl einmal nicht zur Verfügung stehen. Hier ein CSS-Beispiel:

font-family: "Open Sans", Arial, sans-serif;

2. WordPress-Plugin Tipp für die Nutzung von Google Fonts

Wenn du ein Theme nur mit Schriften von Google Fonts erweitern möchtest, ist es am einfachsten ein WordPress-Plugin wie z.B. „Easy Google Fonts“ WordPress Plugin zu nutzen. So kannst du ganz einfach die Standard-Schriften aller Überschriften und des Fließtextes anpassen. Dazu musst du nach der Plugin-Aktivierung einfach die Option „Typography“ unter Theme → Anpassen auswählen. Dort werden dir die Standard-Schriftstile (die Überschriften h1 bis h6 und Paragraphs für den Standard-Fließtext) angezeigt und du kannst die Schrift-Familie und Schriftstile entsprechen deinen Wünschen anpassen.

Mit etwas zusätzlicher Arbeit kannst du sogar individuelle Schrift-Styles des Themes mit Hilfe der Plugin-Option „Create your own Font Control“ (siehe Einstellungen → Google Fonts) anpassen.

Es gibt für das Plugin ein praktisches Video-Screencast Easy Google Fonts WordPress Plugin, in dem alle Funktionen des Plugin noch einmal ausführlich erklärt werden.

Deine Fragen und Tipps

Hast du Fragen oder weitere Tipps zur Einbindung von Google Schriften in WordPress-Themes? Über dein Feedback und deine Fragen und Hinweise freue ich mich sehr. Schreib mir doch einfach einen Kommentar zum Artikel!

Hilfreiche weiterführende Artikel:
„How To Add Google Fonts to WordPress Themes“ auf dem ThemeShaper-Blog

16 Kommentare

  1. Hey Ellen,

    cooler Artikel – wie eigl alle von Dir – Danke!
    Wie sieht es da eigl mit der Performance aus ?
    Wieviele Fonts würdest du maximal empfehlen ?
    Lohnt es sich ein Font immer, oder ist teilweise ein Bild performanter ?
    (Jetzt abgesehen vom Scaling und Schärfe des Bildes)

    Grüße
    Karl

    • Hallo Karl,
      ganz vielen Dank, freut mich, dass dir der Artikel gefällt. Wir versuchen immer nicht mehr als 2 Google Fonts in unseren Themes einzusetzen. Außerdem ist ganz wichtig, wirklicht nur die Schrift-Schnitte einzubinden, die auch wirklich im Theme verwendet werden.

      Es gibt bei Google Fonts auch einer Skala die anzeigt, wie die jeweilige Schrift sich auf die Performance auswirkt. Das ist auf jeden Fall auch noch ein kleiner Anhaltspunkt, da nicht jede Schrift gleich ist (ich glaube es kommt darauf an, ob eine Schrift viele Zeichen hat oder nicht).
      Ganz viele Grüße,
      Ellen

  2. Hallo Ellen,
    bisher habe ich die Google Fonts immer über den Header eingebunden (). Von der Methode über die funktions.php habe ich noch nie gehört. Welche Vorteile ergeben sich dadurch?

    Vielen Dank und beste Grüße,
    Eric

    • Wenn du die gleiche Funktion in die functions.php deines Child Themes schreibst, wird diese zuerst geladen und überschreibt die Funktion mit dem gleichen Name im Parent-Theme. Aber eben nicht die ganze functions.php des Parent-Themes, sie wird trotzdem komplett geladen. Ansonsten müsstest du den header.php neu anlegen und kannst so vielleicht nicht von den Erneuerungen des Parent-Themes provitieren, da die header.php des Child Themes die des Parent-Theme komplett überschreibt.

  3. Wenn man es genau nimmt, kann man die Fonts auch einfach mit // ohne Protokoll vorne einbinden. Dann nimmt er dasjenige, mit dem ich auf der Seite bin.

  4. Hey Ellen,

    ich habe die Google Fonts nach deiner Anleitung in ein selbst entwickeltes Theme eingebunden und es funktioniert bei mir auch prima. Allerdings habe ich ein paar Freunde gebeten, die Seite zu testen und bei manchen werden die Fonts nicht dargestellt sondern nur die Standardschriftart. Woher kann das Problem kommen? Wie kann ich es vermeiden, das eine Alternative Schriftart ersatzweise genutzt wird?

    LG. Jörg

  5. Hallo, danke für den Artikel und die Darstellung mehrere Wege, die Fonts einzubinden. Neben dem Plug-in Ansatz war mir die Option über die functions.php neu und der war auch sehr hilfreich.

    Geht es nur mir so, oder sind die Googlefonts zwar optisch klasse, aber bei den Pagespeed-Werten mitunter auch ein Problem? Liegt sicher auch am Umfang und der Art der Einbindung. Du schreibst ja, dass man nur die verwenden sollte, die auch praktisch im Einsatz sind.

  6. Hallo liebes Team,

    ich baue gerade im Hintergrund einen Blog für meine Hauptdomain. Natürlich will ich auch die Fonds anpassen aber Irgendwie klappt das nicht. Es ist hilfreich was Du hier Demonstrierst aber das Problem was ich habe ist da es im Explorer nicht sichtbar ist. Im Chrom und im Firefox ja ! Ich verzweifel noch , welchen Fehler habe ich gemacht ?

  7. Hallo
    habe mich neulich mal ans Werk gemacht und ein WP installiert. Ich arbeite sonst generell mit Joomla. Trotz meiner Kenntnisse war es mir nicht möglich WP nach meinem Geschmack zu konfigurieren. Sicherlich lag es auch an der begrenzten Zeit die ich dafür hatte.
    Dein Artikel löst somit mein Problem. Vielen Dank dafür.
    Mir war es wichtig die Schrift von einem externen Server zu laden. Wird nämlich zu viel von meinem eigenen Server geladen dauert der Seitenaufbau einfach zu lange. Das ist leider das Problem über die Einbindung per CSS.
    In Joomla ist die Einbindung von Fonts im Verhältnis zu WP sehr leicht. Hier muss man über das Backend lediglich die index.php wählen und fügt im head den googlefontlink ein. Jetzt nur noch die Konfiguration im CSS wie wir sie kennen und fertig ist der ganze Spaß.

  8. Hallo Ellen,
    das Einbinden von Google-Fonts wie von dir beschrieben blockiert doch laut Google Pagespeed insights das Rendering der Seite. Seitdem ich die Schriften lokal hoste und über @font-face in einem komprimierten Stylesheet einbinde erreiche ich endlich ordentliche Pagespeed-Werte (>85 mobil, >90 Desktop).
    Oder liegt Googles eigenes Tool hier falsch? LG Jan

  9. Hallo Ellen,

    gibt es irgendeine Möglichkeit die Menü-Schrift, Größe und Spationierung anzupassen?
    Irgendwie ändert die sich nicht…

    Danke dir!
    LG, klaus

    • Hallo Klaus, nutzt du denn eines unserer Themes oder ein eigenes? Eventuell müsstest du noch mit eigenem CSS und der Regel !important nachhelfen, um die Styles zu überschreiben. Ich hoffe der Tipp hilft.
      Grüße, Ellen

  10. Hallo Zusammen. Guter Artikel!
    Ich suche nach einem Weg, die Font über den Theme Customizer von WordPress ändern zu können. Kann dies bezüglich aber nichts finden. Ich stoße nur immer wieder auf Plugins.

Hinterlasse eine Antwort

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