Das Einbinden des Google Font Directory in WordPress
Es wäre doch durchaus mal schön, wenn die Headline eines Artikels eine andere Schriftart bekommen könnte, ohne dass ich mir Gedanken darum machen muss, ob genau diese Schriftart auf dem Rechner des Lesers auch vorhanden ist. Sicher gibt es Plug-ins, welche die Überschrift in Bilder umwandeln. Leider ist diese Methode nicht sehr SEO freundlich, da Google Bilder ohne fehlenden alt-Text nicht indiziert.
Mit dem im Mai veröffentlichten Googe Font Directory mit dazugehöriger API, gibt uns Google nun ein schönes Instrument in die Hand, um Artikel mit verschiedenen Schriftarten aufzuhübschen. Da diese Schriften auf einem Server von Google liegen, brauchen wir uns auch keine Gedanken machen, dass diese nicht angezeigt werden können.
Ich zeige hier, mit welchen einfachen Schritten diese Fonts in WordPress einzubinden sind.
Im Google Font Directory stehen zur Zeit 19 Schriftarten zur Auswahl. Ich hab mir für das Beispiel “Josefin Sans” ausgesucht.
Klickt auf die Schriftart eurer Wahl und wählt “Get the code”. Die beiden Codezeilen müssen nun einfach in euer Theme eingebunden werden.
Dieser Schnipsel kommt einfach zwischen die beiden head-Tags eurer “header.php”.
header.php
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
In der “style.css” eures Themes müsst ihr nun einfach eine Klasse festlegen. Die Bezeichnung ist relativ freigestellt. Die Anzahl der Klassen ebenfalls. Ihr könnt für jede nur erdenkliche Schriftgröße eine eigene festlegen. Das Attribut “line-height” ist ebenfalls alternativ. Ich füge es wegen des Abstands der einzelnen Zeilen ein.
style.css
.h1_google {
font-family: 'Josefin Sans Std Light', serif;
font-size: 36px;
line-height: 36px;
}
Der Aufruf der Schriftart erfolgt im html-Modus beim Verfassen eines neuen Artikels.
html-Modus
<h1_google>Dies ist eine Überschrift in der Schriftart Josefin Sans</h1_google>
Das wars auch schon! Viel Spaß beim Ausprobieren.
2,513 views
