Endlich „schöne“ Web-Fonts einsetzbar: Die Google Font API

Beim Aufbau von modernen Webseiten werden Layout- Parameter und Seiteninhalt via CSS und HTML idealerweise strikt voneinander getrennt. Die zu verwendenden Schriftarten und die dazugehörigen Font- Attribute sollten ebenfalls den Layout- Parametern in der CSS Datei zugeordnet werden.

Leider gab es hier jedoch bisher immer die Beschränkung auf die „websicheren/web-safe Fonts“.

Was sind websichere Fonts?

Web Fonts sind die Schriftarten, bei denen man davon ausgehen kann, dass der Großteil der Surfer diese Fonts auf ihren Rechnern installiert haben.
Bei der Vielzahl der Internet- User und verschiedener Betriebssysteme kann man sich vorstellen, dass die gemeinsame Schnittmenge dabei recht klein ist.

Als die sichersten Web Fonts gelten Arial /Helvetica, Courier/ Courier New und Times / Times New Roman.

Zu weiteren sicheren Fonts für Windows und Mac User zählen Verdana, Comic Sans MS, Georgia, Trebuchet MS, Impact sowie Arial Black.

Soll’s ein anderer Font sein?

Wollte man bisher andere Fonts auf der Webseite einsetzen so kam man um Grafiken nicht herum.

Die Nachteile davon liegen klar auf der Hand: Ändern sich Texte müssen neue Grafiken erstellt werden, die Ladezeit der Seite vergrößert sich unter Umständen, Texte sind unter Umständen nicht mehr von Suchmaschinen indizierbar etc. .

Lösungsansätze gab es bisher schon einige, aber die ultimative Lösung gab‘s bisher noch nicht.

Die Google Font API

Eine neue Lösung könnte die Google Font API bieten. Als Beta Version in den Google Labs zu finden.
Über einen einfachen Stylesheet Link werden Fonts aus dem Google Font Directory geladen und können innerhalb der CSS Anweisungen zur Webseite verwendet werden.

Ein Beispiel:
<link href=’http://fonts.googleapis.com/css?family=Reenie+Beanie|Lobster’ rel=’stylesheet’ type=’text/css’>

h1 { font-family: ‘Lobster’, arial, serif; font-weight: bold; font-size: 36px; color: #bdc731; }
p { font-family: ‘Reenie Beanie’, arial, serif; font-size: 30px; color: #fff; }

Das Ergebnis:

Hier können Sie das Ergebnis als HTML Seite betrachten

Zurzeit beinhaltet das Google font directory 18 verschiedene Schriftarten von denen manche in diversen Varianten verwendet werden können.

Weitere Möglichkeiten

Wer mehr möchte ist richtig bei typekit.com. Hier wird nach dem gleichen Prinzip verfahren.

Der Unterschied: Es gibt eine große Auswahl an Fonts jedoch ist der Service je nach Anzahl Page Views und Anzahl verwendeter Fonts kostenpflichtig.

Genauere Angaben zur typekit Preisliste finden Sie hier.