font-face – Schriften in Webseiten einbetten

Seitdem Safari, Opera und Firefox wahrhaft harmonisch die @font-face-Regel unterstützen, können ladbare Schriften für Webseiten mit ausreichender Sicherheit (… na ja, Chrome hält sich noch raus …) eingesetzt werden.

Microsoft bietet bereits seit IE4 das Einbinden von Schriften für Webseiten im EOT-Format (Embedded OpenType – eine kompakte Form von OpenType-Schriften, die von Microsoft für Webseiten entwickelt wurde), das aber nur von IE unterstützt wird.

Um EOT-Schriften in Webseiten einzubetten, hält Microsoft WEFT parat. WEFT ist aber nicht gerade intuitiv und läuft natürlich auch nicht unter Unix oder auf dem Mac. Für die gibt es das kleine Kommondozeilen-Programm ttf2eot bei Google Code, dass TrueType-Fonts mit einem simplen Aufruf in das EOF-Format umwandelt.

Keine Ahnung, ob viele Seiten jemals ladbare Schriften für Internet Explorer eingesetzt haben. Ich hätte sie kaum je zu Gesicht bekommen.
CSS @ Ten: The Next Big Thing auf A LIST apart

TrueType-Schriften in EOT-Schriften umwandeln

Wer MacPorts auf dem Mac installiert hat, kann ttf2eof direkt aus dem Terminal installieren:

sudo port install ttf2eot

Der Aufruf

ttf2eot < route_3.ttf > route_3.eot

führt die Transformation durch.
Die Schriften werden auf den Server geladen und mit der @font-face-Regel in das Stylesheet der Seite eingebunden.

OpenType-Schriften lassen sich nicht ohne Weiteres in EOT-Schriften umwandeln – sie müssen zuerst in TrueType umgewandelt werden (z.B. mit fontforge). Erst dann kann das TrueType-Format in das EOT-Format transformiert werden.

Firefox, Opera und Safari unterstützen EOT nicht, können aber TrueType- und OpenType-Schriften direkt einbetten. Also brauchen wir eine Weiche im Stylesheet, damit Internet Explorer seine EOT-Fonts vorfindet und sich der Rest der Browserschaft TTF- oder OTF-Schriften herauspickt.

Herbstzeitlose

<style type="text/css">
@font-face {
   font-family: route_3;
   src: url(route_3.ttf);
   }
</style>

<!--[if gte IE 5]>
<style>
@font-face {
   font-family: route_3;
   src: url(route_3.eot);
   }
</style>
<![endif]-->

Jetzt noch font-family für den Selektor in das Stylesheet

h4 { font-family: route_3; }

Safari unterstützt @font-face seit Version 3, Opera ist mit Version 10 dabei. Firefox bringt Freiheit für die Fonts seit Version 3.1. Nur Google Chrome verharrt noch im Bleisatz.

Webfonts mit iPhone und Google G1

Nein, Safari auf dem iPhone oder dem G1 haben mit Webfonts (noch?) nicht am Hut, auch wenn die schicken iPhone-Simulationen wieiPhoney oder der Online-Test iphonetester etwas anderes behaupten.

iPhoney	iPhone

Nicht nur das iPhone, sondern auch Google G1 – Android – mauert bei ladbaren Schriften. Menno, dabei würden wir doch dem Handy gern die gut lesbaren, aber besonders kleinen Webfonts gönnen.
Ein kleines bisschen schade, aber auf der anderen Seite gut nachvollziehbar … schließlich beschert eine ladbare Schrift das Handy mit einem rasanten Trafficvolumen.

Prêt-à-porter: Font-Face-Kits

Fix und fertig vorbereitet sind die font-face-Kits bei Font Squirrel

Font Squirrel bietet schöne Fonts, dabei viele ordentliche Brotschriften (Schriften für den Fließtext) –, die bereits sowohl die TrueType- als auch die EOT-Variante in ein Päckchen packen und von Font Squirrel auf ihre freie Verwendung auch für den kommerziellen Einsatz geprüft wurden. Die CSS-Regeln zum Einbetten des Fonts liegen ebenfalls im Kit.

Die Textdatei mit den Lizenzbestimmungen des Schriftdesigners ist in jedem Kit mit dabei – da weiß man gleich, was Sache ist.

Lade Lade noch ein Weilchen …

Schriften sind nicht gerade leichte Kost. Ein Font bringt schon mal gut entwickelte 150 bis 240 KB mit sich und muss zu allem Überfluss doppelt angelegt werden, damit sowohl Internet Explorer mit EOT als auch Safari, Opera und Firefox mit TrueType bedient werden. Dabei habe ich jetzt noch nicht einmal mitgerechnet, dass für Brotschriften auch noch ein Kursivfont und ein Fettschnitt gefragt sind.

Da macht es Sinn, bei einer halbwegs gängigen Schrift erst mal zu schauen, ob der Besucher nicht doch schon die Schrift der Wahl auf seinem eigenen Rechner hat.

@font-face {
   font-family: 'Kingthings Exeter';
   src: local('Kingthings Exeter Regular'),
   local('KingthingsExeter-Regular'),
   url('Kingthings_Exeter.ttf') format('truetype');
}