Google Fonts in WordPress einbinden
  • Zuletzt aktualisiert am
  • Webtimiser
  • Wordpress
  • 6

Du möchtest eine spezielle Schrift in deine WordPress Webseite einbinden? Mit dem kostenlosen Font Service von Google ist dies kein Problem. Dieser bietet inzwischen über 800 Fonts und eine einfache Anleitung zur Verwendung in Webseiten an. Wie man Google Fonts in WordPress einbinden kann, erkläre ich im folgenden Tutorial.

Die richtige Schrift finden

Beim Redesign von Google Fonts ist die Suche nach Schriftarten verbessert worden. Das Erscheinungsbild der verschiedenen Fonts und Schriftgrößen kann man on the fly mit eigenen Texten austesten.

1. Schriftart auswählen

Unter https://fonts.google.com/ kannst du dir eine Schrift nach verschiedenen Kriterien aussuchen.

google fonts in wordpress einbinden step 1

 

2. Schriftschnitte auswählen

Zunächst wählst du die gewünschte Schrift aus.

Google Fonts in WordPress einbinden step 2

Im nächsten Schritt kannst du unter Customize die benötigten Schriftschnitte anklicken.

google fonts schriftschnitt auswählen

Zur Optimierung der Ladezeit sollte man nur die Styles auswählen, die man auch wirklich benötigt. Google zeigt hier eine Vorschau, wie sich die Auswahl auf die Ladezeit der Webseite auswirkt.
Zudem sollte man auch darauf achten, nicht zu viele verschiedene Schriften zu nutzen.

In diesem Beispiel habe ich mich für folgende Fonts entschieden:
Open Sans (Normal 400 und Bold 700) sowie Roboto Slab (Normal 400 und Bold 700)

3. Code für den Header-Bereich

Google Fonts liefert bereits den fertigen Code, den man direkt in den Header der Webseite einfügen kann.
In WordPress kann man dies natürlich auch einfach in den Header (header.php) kopieren. Vorteilhafter und eleganter ist aber das Einbinden über die Datei functions.php. Alternativ kannst du auch ein custom-functions Plugin nutzen.

Dadurch wird gewährleistet, dass bei der Nutzung von Child-Themes oder Plugins die Schrifteinstellungen nicht überschrieben werden.

google font code

Google Fonts in WordPress einbauen

1. functions.php anpassen

Nun kannst du die Datei functions.php oder deine custom-functions.php mit einem Editor öffnen und folgende Zeilen einfügen:


 function load_google_fonts() {
 wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700');
 wp_enqueue_style( 'googleFonts');
 }
 add_action('wp_print_styles', 'load_google_fonts');

Hierdurch werden die Google Fonts in WordPress eingebunden und beim Laden der Webseite automatisch im Header ausgegeben.

2. CSS-Datei bearbeiten

Damit die gewählte Schrift auch auf der Webseite angezeigt wird, musst du natürlich noch die CSS-Datei (style.css) des WordPress Themes anpassen.

body (font-family: 'Open Sans'; font-size:18px;)
h1, h2, h3 (font-family: 'Roboto Slab'; font-size:24px;

Alternativ kannst du den CSS-Code auch in den Theme Customzier einfügen.

Einbau von Fonts per Plugin

Wie fast immer bei WordPress, gibt es auch für die Verwendung von Fonts Plugin-Alternativen. Wem das manuelle Einbinden zu umständlich ist, kann eines der vielen Google Fonts Plugins aus dem Plugin-Verzeichnis ausprobieren.

Easy Google Fonts

 

Mit Easy Google Fonts kannst du Schriften ohne Programmieren in jedes WordPress Theme einbauen. Das Plugin klinkt sich in den Customizer ein, wo alle Einstellungen direkt in einer Live-Preview sichtbar sind.

Google Fonts lokal nutzen

Wer die Google Webfonts lieber lokal nutzen möchte, findet hier meine Anleitung dazu.

webfonts lokal in wordpress nutzen

Dieser Beitrag hat 6 Kommentare

  1. User Avatar

    Hallo,

    ich habe eine Frage zur Einbindung: Die Schrift „Open Sans“ habe ich bereits erfolgreich einbinden können. Allerdings kann ich im WYSIWYG-Editor nur „bold“ auswählen, aber nicht „semibold“ oder „light“

    Und das, obwohl ich eingefügt habe: https://fonts.googleapis.com/css?family=Open+Sans:300,400,600

    Was mache ich falsch?

    Viele Grüße
    Stephanie

    1. Webtimiser

      Hallo Stephanie,
      im Editor kann man leider nur bold auswählen. Wenn du z.B. einer h2-Überschrift light zuweisen möchtest, müsstest du das CSS anpassen: h3 {font-family: "Open Sans";font-weight:300;}

      VG Sonia

  2. User Avatar

    Danke für die Rückantwort!!

    Zu den google fonts: Ich möchte sicher gehen, dass ich eine Schrift für meine Webseite benutzte, welche auf den meisten Systemen geladen werden kann.
    Bei google fonts habe ich mir die Schrift Palanquin herausgesucht. Kann ich als zweite Schrift z.B Arial eingeben?Da diese Schirft weit verbreitet ist. Ist es erlaubt Arial kommerziell zu benutzen? Und muss ich die Schrift Arial auch in die function.php einbinden?Oder kannst Du mir sagen, welche google font auf allen Systemen funktioniert?

    Danke:)

    Viele liebe Grüße Merrit

    1. Webtimiser

      Gerne!
      In diesem Fall musst Du einen Font Stack via CSS nutzen:
      h1{
      font-family: "Palanquin", Arial, Verdana, sans-serif;
      }

      Falls die 1. Schrift nicht gefunden wird, nutze die 2. oder die 3. usw. Fonts wie Arial sind Systemschriften, d.h. sie werden vom Betriebssystem mitgeliefert.
      LG Sonia

  3. User Avatar

    Hallo Frau Rieder, zu Ihrem Artikel Google Fonts in WordPress einbauen:
    Zu function php anpassen: Werden die Code Zeilen in die function php des parent Themes oder in die function php des Child themes eingegeben?Und in welche Zeile sollte der Code eingegeben werden?
    Und muss ich nur diese Zeile mit meinem Code austauschen oder noch etwas anderes? (http://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700′)?????

    Es wäre sehr nett, wenn Sie mir bescheid geben könnten.
    Viele Grüße Merrit

    1. Webtimiser

      Hallo Merrit,
      wenn Sie ein Child-Theme nutzen, setzen Sie den Cde am besten (am Ende) in die functions.php des Child Themes. Für die Änderung der Schriftart müssen Sie dann nur noch den Namen der Schrift und die gewünschte Schriftstärke ersetzen: family=Schriftart1:400,700,800|Schriftart2:400,700,800
      Viele Grüße
      Sonia

Schreibe einen Kommentar

Menü schließen