“Wow – da hat sich einer richtig Mühe gegeben und für den kompletten Fließtext ein ‘Text-to-Image’ hinterlegt, bei dem man jeden Buchstaben markieren kann.” Das war der Beginn meiner vorletzten Begegnung mit eingebetteten Schriften auf HTML-Seiten, die nicht flashbasiert oder lokal auf dem Rechner installiert sind.

Unser Leiter Design, Marc Rosenlöcher, hatte meinen Kollegen Patrick Mytanz im Chat auf die Seite dustincurtis.com aufmerksam gemacht, er möge sich das Ergebnis des Fließtextes doch einmal ansehen. Damit lassen sich ganz andere Layouts und Designs umsetzten, als dies ohne die Möglichkeit der freien Schriftenwahl machbar wäre. Doch “frei” stimmt natürlich nur bedingt und dass wir Bildschirmleser nur darauf gewartet haben, den Auswuchs des typografischen Dilettantismus zu erleiden, kann man auch nicht gerade behaupten.

Ich war auf jeden Fall neugierig und schaute mal schnell in die entsprechenden CSS-Klassen rein, wie denn nun die Darstellung gelöst sei und fand die CSS-Funktion “@font-face”, an die ich mich dunkel erinnern konnte, als ich sie vor ein paar Jahren mal bei Gerrit van Aacken gelesen und kurz mal ausprobiert hatte. Nur damals habe ich Websites für eine Übermacht von IE6+7 Nutzern gebaut und so geriet diese schöne Funktion bei mir wieder in Vergessenheit. Dabei funktioniert @font-face so einfach, wie das Einbinden einer Hintergrundgrafik. Es wird für eine Schrift im Format TTF (True Type Font) und OTF (Open Type Font) oder im IE EOT (Embeded Open Type) eine Ressource hinterlegt und einer Font-Family zugewiesen. Diese Ressource kann dann in der Stylezuweisung einfach verwendet werden:

@font-face {
font-family: Delicious;
src: url(‘fonts/delicious/Delicious-Roman.otf’)
format(“opentype”);
}

body {
font-family: Delicious, Hevetica, Arial, sans-serif;
}

Wie immer gibt es noch die IE-Bremse, denn die @font-face-Regel wird zwar schon seit 1998 vom IE4 als erstem Browser unterstützt, aber nur mit dem speziellen Font-Format: EOT. Hier gibt es allerdings nur sehr wenige Schriften, was zur Zeit zwar ausgebaut wird, wo meiner Meinung nach die Lösung aber doch in eine andere Richtung gehen wird – der IE wird die anderen Formate unterstützen (das meint auch Gerrit van Aaken in seinem informativen Beitrag über Webfonts). Die Einbindung von OTF oder TTF wird vom IE zur Zeit ignoriert.

Das Einbinden flexibler Schriften, die nicht zwingend auf dem Rechner des Nutzers installiert sein müssen, ermöglicht eine freiere und abwechslungsreichere Gestaltung der Webseite. Dazu kommen die Vorteile, die eine echte Schrift gegenüber eines Bildes hat: Sie ist flexibel in der Größe, es können die echten Schnitte für Kapitälchen, etc. hinterlegt werden und die typografischen Definitionen, wie das Kerning, der Durchschuss, etc. sind einfacher zu bestimmen, als bei gerenderten Bildern, die positioniert werden. Ausserdem, wie anfangs erwähnt, lassen sich alle Buchstaben einzeln markieren.

Aber genauso lang wie die Liste der Vorteile, die Aufnahme der @font-face-Regel in den CSS-Standard und die Umsetzung in den einzelnen Browsern vorantreiben, ist auch die Diskussion um das Rechtemanagment und die fehlenden Lizenzbestimmungen. Doch auch hier gibt es sowohl eine technische Lösung als auch zusätzliche Lizenzen für die Webverwendung der großen Font-Häuser. Zusätzlich gibt es Typekit und andere Serviceunternehmen, die Verträge mit den Font-Häusern haben. Bei denen kann man Schriften für die Webverwendung mieten und sie stehen dort auch direkt zum verlinken und ausliefern bereit.

Ende Januar (26.01.2010) hatte ich dann die letzte Begegnung mit @font-face. Der Fontblog machte auf die erste käufliche WOFF-Schrift “FF Nuvo Medium Web” aufmerksam. WOFF ist die gerade angesprochene, technische Lösung. Es handelt sich um einen Container, der OTF- oder TTF-Schriften aufnimmt, dazu die Metadaten, wie zum Beispiel die Nutzungsbedingungen packt und das Ganze schön komprimiert (zippt). Derzeit kann zwar nur der Firefox 3.6 dieses Format unterstützen – die Spezifikation wurde auch von Mozillas Jonathan Kew, dem Fontdesigner Erik van Blokland und Tal Leming entwickelt und vorangetrieben. Aber die anderen Browser werden – denke ich – nachziehen, weil mit diesem Format zwei entscheidende Dinge gelöst sind: die einfache, komprimierte Einbettung von Schriften und die Nutzungsbedingungen.

P.S.: Bei einem Blick auf die Demoseite der Schrift “FF Nuvo Medium Web” (ZIP) gefällt mir auch besonders gut die smoothy Aufbereitung mit den runden Ecken und dem Schattenwurf, für die früher immer mehrere Hintergrundimages notwendig waren – heute ist das alles CSS – aber das ist sicherlich einen eigenen Beitrag wert.