Google Webfonts richtig in WordPress nutzen

google webfonts Google Webfonts richtig in WordPress  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 Google Webfonts richtig in WordPress  nutzen

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:

add this code Google Webfonts richtig in WordPress  nutzen

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">

header Google Webfonts richtig in WordPress  nutzen

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.

 Google Webfonts richtig in WordPress  nutzen

4 Antworten

Hinterlassen Sie einen Kommentar

Wollen Sie an der Diskussion teilnehmen?
Wir freuen uns über ihren Beitrag!

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>