Google Webfonts richtig in WordPress nutzen

Google Webfonts richtig in WordPress Themes nutzen

Google Webfonts ist eine großartige freie Ressource für Webdesigner. Auch dieses Theme nutzt für die Überschriften 2 Fonts aus den Google Webfonts, den Ropa Sans und den Muli Font. Mittlerweile gibt es über 500 Fonts zur Auswahl, sodass für jeden Geschmack etwas dabei sein sollte. In diesem Artikel zeige ich den richtigen, auf Performance optimierten Weg, die Google Webfonts in ein WordPress Theme einzufügen.

Finde den Google Webfont Deiner Wahl

Auf der Webfont Seite hast Du über 500 frei zu verwendende Fonts zur Auswahl, such Dir einen Font aus, der Dir gefällt. Wenn Du einen Font gefunden hast, klickst Du auf den “Quick-use” Button.

Webfont Quick-use

Nachdem Du darauf geklickt hast, öffnet sich eine neue Seite, wo Du zum Beispiel auch auswählen kannst, ob der Font auch in Fett oder kursiv vorhanden sein soll. In diesem Beispiel gehen wir davon aus, dass nur der normale Font gewählt wird. Scrolle jetzt runter, bis Du folgende Box siehst:

Diesen Link kopierst Du Dir jetzt, am besten in ein Textdokument für spätere Nutzung. Gehen wir jetzt davon aus, dass Du zwei Webfonts nutzen möchtest, wie die meisten Leute – zum Beispiel einen für die Überschrift und einen für den Text. Suche dir also gern noch einen zweiten Webfont aus und wiederhole das Speichern des Fontlinks in ein Textdokument.

Die Webfonts in ein WordPress Theme einfügen

Hier stehen nun gleich 3 Wege zur Verfügung, nutzen sollte man aus Performance Gründen jedoch nur einen der drei. Die meisten Theme Entwickler nutzen entweder den Weg über die oben abgebildeten Links, oder den Weg über @import, was aber suboptimal ist, denn @import blockiert parallele Downloads und macht Dein Theme langsamer, als es sein müsste. Nutze daher niemals @import.

Der performanceoptimierte Weg, Google Webfonts zu nutzen

Hast Du Dir nur einen Google Webfont ausgesucht, um zum Beispiel Deine Überschriften damit zu gestalten, kopierst Du den Link des Fonts über den Link Deines Stylesheets in die Datei header.php Deines Themes (wp-content => themes => Dein Theme). Das sieht dann so aus:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ropa+Sans|Muli" media="screen">
<link rel="stylesheet" type="text/css" href="Dein style.css Stylesheet" media="screen">

Die header.php Deines WordPress Themes

Beachte folgendes: Solltest Du zwei Fonts verwenden wollen, brauchst Du keine 2 Links einzufügen, Du kannst auch zwei Fonts in einem Link kombinieren, wenn Du die Fonts mit einem | Zeichen trennst. Das sieht dann so aus:

<link href='http://fonts.googleapis.com/css?family=Muli|Oswald' rel='stylesheet' type='text/css'>

Der nächste Schritt ist eine Änderung im Stylesheet style.css Deines Themes. Nehmen wir an, Du willst Deinen Google Webfont für alle Überschriften nutzen, dann schreibst Du folgendes in Dein Stylesheet:

h1, h2, h3, h4, h5, h6 {
    font-family: 'Muli', sans-serif;
}

Ich hoffe, dass dieser Artikel Dir bei der schnellen und performanceoptimierten Integration der beliebten Google Webfonts helfen konnte.

4 Kommentare zu “Google Webfonts richtig in WordPress nutzen”

  1. Herbert sagt:

    Schöner Tipp! Hab ich seither auch noch nicht gewusst, das google Fonts anbietet und man die einfach einbinden kann.

  2. Tanja sagt:

    @Herbert
    Musst mal nachschaun, sind wirklich sehr schöne Schriften dabei!

  3. Jochen sagt:

    Ja, die Schriften sind genial und umsonst noch dazu. Da kann man eigentlich nicht nein sagen!

  4. Mark sagt:

    Ja, kann meinem Vorredner nur zustimmen. Die Fonts sind super, günstig und der Artikel ist jedem zu Empfehlen.

Hinterlasse eine Antwort