Web Fonts über Google laden


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 nun 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.

 
Mehr zum Thema:
– Einbetten von Schriften per CSS-Funktion
Digitales Design