Neue Schriftarten für Website mit Google Fonts API

Jeder Webmaster kennt das Problem, dass man bestimmte Schriftstile wie Schreibschrift o. ä. nicht ohne Weiteres in seine Seite einbinden kann, bzw. dass die Darstellung zuweilen auf bestimmte Browser beschränkt ist. Somit nutzt man besonders bei ‚verspielten‘ Schriftarten für Design-Seiten oder Dekoration-Seiten o.ä. Bilddateien, um das gewünschte Ergebnis zu erzielen.

Google bietet nun schon seit einer Weile seine Google Fonts API an, mit deren Hilfe man auch ausgefallene Schriftarten als Text und nicht als Bilddatei darstellen kann. Neben der Skalierbarkeit ist ein weiterer Vorteil aus meiner Sicht die ‚Sichtbarkeit‘ für die Suchmaschinen-Bots. Bildinhalte können oft nur mittels den Meta-Tags ausgelesen werden.

Trotz mittlerweile ausgefeilter OCR-Lösung, welche Google ganz sicher schon längst einsetzt, bietet die Verwendung von Text anstatt von Bildern doch eine erweiterte Auffindbarkeit bzw. anders ausgedrückt: hat man diverse Bildelemente mit viel Text, und nutzt diese weil man bestimmte Design-Elemente einbinden will, dann wäre eine Darstellung als Text vorteilhafter, weil schlicht und einfach die Bots den Text auslesen können.

Gut, soviel zum Kontext. Ich hatte die Schriftarten der Google Fonts API vor ein paar Monaten schon entdeckt und nutzte diese auch für diverse Projekt. Damals stand eine überschaubare Anzahl zur Verfügung, welche mittlerweile erheblich gewachsen ist – aktuell sind über 70 Schriftarten verfügbar. Im folgenden ein paar Beispiele für Schriftarten, die sich mittels der Fonts API einbinden lassen:

Schriftarten aus der Google Fonts Reihe – Text lässt sich markieren

Dass es sich dabei nicht um eine Bilddatei handelt, wie man als Web-Bastler der alten Schule vermuten würde, kann man schnell herausfinden, indem man den Text oben markiert. Wie ich finde, bietet die Fonts API interessante Möglichkeiten, bislang aufwendig zu erstellende Designs mit Schriften direkt als Text darzustellen.

Die Einbindung der Schriftarten ist mit ein paar HTML-/CSS-Kenntnissen schnell erledigt. Besonders nützlich dabei ist die Font-Preview, mit deren Hilfe man die Schriftart mittels Reglern anpassen kann und die CSS-Werte damit eingestellt werden. Anschließend muss das Stylesheet und der Link zur Google Fonts API noch in den Header eingesetzt werden und fertig. Um verschiedene Schriftarten aus der API auf einer Seite zu verwenden, muss natürlich jeweils der Link zur API erfolgen. In diesem Beitrag auf goeo.de, sowie auf meinen weiteren Websites, habe ich dafür die Benutzerdefinierte Felder in WordPress verwendet und diese nur auf dieser Seite im Head-Bereich eingefügt, da ansonsten die komplette Seite mit unnötig viel Code zugestopft werden würde.

Zu beachten gilt es allerdings, dass man nicht alle Schriftarten querbeet einsetzt. Nutzer und Leser werden durch zu viele Schriftarten auf ein und derselben Seite vom eigentlichen Inhalt abgelenkt und man sollte möglichst bei einer oder zwei Schriftarten bleiben. Als weiterführende Literatur empfiehlt sich hierfür die Typographie-Bibel von Robert Bringhurst „The Elements of Typographic Style„*.