Google Webfonts in WordPress verwenden

Wohl fast jeder Webdesigner hat sich schon mal gefragt, wie man einfach und schnell neue Schriften auf einer Website verwenden kann. Um grösstmögliche Kompatibilität aufrecht zu erhalten und damit die Site in den meisten Browsern auf unterschiedlichen Plattformen möglichst gleich aussieht werden eben meist Arial, Helvetica, Verdana, oder Times als Schrift verwendet. Vor allem wenn man aus der Windowswelt kommt.
Wollte man eine ganz eigene Schrift verwenden, funktionierte das nur, wenn am PC des Betrachters diese Schrift auch installiert war.
Variante 2 die vor allem bei Überschriften gerne verwendet wurde: Man wandelt diese in Grafiken um.
ContentManagement Systeme wie Typo 3 erledigen das zb. ganz unaufdringlich im Hintergrund.
Aber die Verwendung von Grafiken als Schriftersatz erhöht die Ladezeiten der Seiten deutlich und in der Vergangenheit hatten auch die Suchmaschinen so ihre Probleme, sofern keine entsprechenden Attribute bei den Bildern hinterlegt waren.

Google Webfonts bieten da eine erstaunlich einfach zu verwendende Alternative.

Google WebfontsZuerst auf Google Webfonts die gewünschte Schriftart suchen ( es gibt Hunderte Schriften ) und mit dem „Quick Use“ Button auswählen.

add code to websiteIm sich nun öffnenden Fenster runterscrollen, bis zur Box „Add this code to your website“ und den Code für spätere Verwendung mal in einer Textdatei abspeichern
Sie können hier auch die Art der Einbindung der Schrift in den Header ihrer Site aussuchen.
Voreingestellt ist die Link Variante. Sie sollten diese auch beibehalten, denn die Variante Javascript macht Seiten wahrlich nicht schneller und die import Variante kann vor allem in Verbindung mit der Link Variante zum einbinden von css Dateien zu gar seltsamen Ergebnissen führen. Interessanter Artikel auf der Website stevesouders.com
Nachtrag: Der Link den Google hier anbietet validiert nicht korrekt! Vor der schliessenden eckigen Klammer „>“ fehlt nämlich der „/“ Schrägstrich.

font 2 cssEtwas weiter unten auf der Seite findet sich noch ein Codeschnipsel, der später in die entsprechende css Datei kopiert werden muss
Verwendung in WordPress:
Binden sie den als erstes kopierten Link in die header.php ihres WordPress Themas ein; und zwar oberhalb des Links mit dem die eigentlichen css Dateien des Themas geladen werden.
Sie müssen nicht für jede Schriftart einen Link einbinden. Sie können mehrere Schriften in einem Link verwenden, indem sie diese durch das „Pipe“ Zeichen trennen.

font in der css DateiIm letzten Schritt binden sie die entsprechende Schriftart in der css Datei ihres Themas ein.
Im Screenshot ein Beispiel wenn sie die neue Schrift für alle h2 Überschriften verwenden wollen.
Der Haken an der Sache – Das Rendering:
Wenn es denn so einfach ist, warum wird das dann kaum praktiziert?
Verschiedene Betriebssysteme und Browser verwenden auch verschiedene Techniken und APIs zum Rendern der Schriftarten.
Die Darstellungsergebnisse hängen somit einerseits von der gewählten Schrift und deren Parametern ab, andererseits auch vom eingesetzten Browser und Betriebssystem. Eine zuverlässige Aussage über die Darstellungsqualität auf den verschiedenen Systemen läßt sich somit kaum treffen und die Gefahr, daß die gewählte Variante auf einem System nahezu unleserlich wird ist immer gegeben.
Mehr zu dem Thema css und Fonts finden sie direkt beim W3C

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht.