Es hat sich einiges getan im Bereich Web Fonts, so dass ich einmal ein gesammeltes Update schreibe.
Es ist schon einige Zeit ins Land gegangen und der Firefox, der den neuen Schriften-Container woff (Web Open Font Format) (vgl. Blog-Eintrag vom 03.02.2010) unterstützt, ist aus der Betaphase raus und läuft im produktiven Umfeld. Auch die Webkit-Entwicklung hat nachgezogen und kann in dem Nightly-Build problemlos Schriften im woff-Format rendern. Und für den IE9 berichtet der Developer-Blog von msdn ebenfalls eine native Unterstützung.
Daneben entwickeln sich die Font-Plattformen wie Typekit, Ascender und andere. Typekit veredeln ihren ersten Geburtstag durch die Zusammenarbeit mit Adobe. Initial stehen 16 Schriftfamilien mit insgesamt 160 Schnitten von Adobe zur Verfügung, die “die legendären Schriften ins Web bringen” (Typekit-Blog und Pressemeldung zur Kooperation).
Zu diesen Varianten ist jetzt eine weitere Möglichkeit hinzugekommen, um native Fonts auf der Webseite einzubinden und die kommt von Google.
Die Fonts können einfach über einen CSS-Link eingefügt und durch den CSS-Parameter für Schriften @font-family entsprechend verwendet werden.
<link
href=”http://fonts.googleapis.com/css?family=Reenie+Beanie” rel=”stylesheet”
type=”text/css” >
<style>
p {
font-family: ‘Reenie Beanie’, sans-serif;
font-size: 18pt;
}
</style>
Dahinter steckt eine eigene Font-API, die Google zusammen mit Typekit entwickelt hat. Auf den Google-Seiten wird ausführlich beschrieben, wie die API per JavaScript aufgerufen wird und wie beispielsweise auch andere Schriften von den Schriftdienstleistern Typekit oder Ascender geladen werden können.
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] }, typekit: { id: ‘myKitId’ }, ascender: { key: ‘myAscenderKey’, families:[ 'AscenderSans:bold,bolditalic,italic,regular' ] } };
Neben der API-Beschreibung gibt es eine Übersicht der bisherigen Schriften, die alle frei verwendbar und ohne Lizenzgebühren daher kommen. Die einzelnen Schriften liegen teilweise in unterschiedlichen Schnitten (fett, kursiv, etc.) vor und die API erlaubt darüber hinaus die differenzierte Abfrage der Strich-Stärke und der Schriftart, wie man es sonst nur im professionellen Schriftsatz kennt.
<link href=”http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700″ rel=”stylesheet” type=”text/css” >
Zur Zeit ist dieser Service in der Betaphase und die Anzahl der Schrift noch sehr überschaubar, doch der Ausblick auf flexibler, schlanker und gleichzeitig noch ansprechender gestaltete Seiten macht geduldig.
Zudem ist es nun auch möglich mit dem WebFont Loader auf verschiedene WebFont-Angebote zu zu greifen. Das klingt doch für die Zukunft nach einem schnell wachsenden Spektrum an kreativen Möglichkeiten.