Stil mit {stil}

Sep 2009

font-face – Schriften in Webseiten einbetten

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 das Einbetten in Webseiten entwickelt wurde), das aber nur von IE unterstützt wird. Erst 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.

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.

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]-->

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.

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: Georgia;
	local: Georgia, 
	src: url(/repos/Georgia.ttf);
	}

Schriften und Lizenzen

Damit beginnt ein neues Kapitel im Web – denn wenn wir eine Schrift »kaufen«, erhalten wir tatsächlich nur das Recht, sie für bestimmte Aufgaben zu nutzen – meist nur das Recht, sie auf einem Rechner zu installieren – und dürfen sie nicht einfach verteilen.

Natürlich haben die Anbieter professioneller Fonts Vorbehalte gegen die Nutzung ihrer Schriften im Web: Die Schriften könnten herunter geladen und ohne Zahlung auf weiteren Seiten oder für den Print benutzt werden.

Genau das aber wird möglich, wenn der Font in einem Webverzeichnis liegt und durch die @font-face-Regel im Stylesheet gelinkt ist. Das Recht, die Schrift für Webseiten zu nutzen, ist bei kommerziellen Schriften noch selten vertreten. Typografen und Fontshops haben ihre individuellen EULAs (End User Licence Agreement) – auch für Free Fonts.

Also kommen jetzt, da wir endlich einen Großteil der Besucher mit der gewünschten Schrift erreichen können, Vorschläge für ein spezielles Webformat für Schriften. Tal Leming und Erik van Blokland von Type Supply wollen gar ein Alert für Schriften, die nicht für die Domain lizensiert wurden. Ich stelle mir gerade vor, dass dann ein Info-Panel für meine widerrechtlicht kopierten Bilder ebenfalls zur Debatte steht …

Freie Schriften

Die meisten freien Fonts sind dekorative Schriften, die nicht für die Nutzung als Brotschrift geeignet sind. Gute Schriften für den Fließtext sind Raritäten unter den frei verfügbaren Schriften, die professionellen Schriften dürfen nicht ohne Weiteres als Webfont genutzt werden.

Eine Zusammenstellung von hochwertigen Freefonts hat Vitaly Friedman auf drweb.de zusammengetragen.

Als es klingelte nachts, es war kurz vor halb zehn,
wurde niemand erwartet und niemand gesehen.
Doch dann sahn sie auf einer Urne zuletzt
eine fremde Erscheinung und waren entsetzt.

Pigiarniq

Aber auch Fonts aus dem großen Freeware-Kasten unterliegen dem Copyright des jeweiligen Designers und eine kommerzielle Nutzung sollte immer mit dem Typographen abgesprochen werden.

Webfonts von kernest.com

Eine Alternative zum Basteln mit unterschiedlichen @font-face-Regeln und der ganzen Problematik der Schrift-Lizensierung bietet kernest.com.

kernest.com hostet Webfonts unter verschiedenen Lizenzen, die für die eigene Seite sozusagen »gemietet« werden, darunter aber auch zahlreiche qualitativ hochwertige Fonts.

Der Webdesigner sucht sich eine Schrift aus und hat die Wahl zwischen freien Schriften und kommerziellen Schriften, die zwischen 15 bis 75 € pro Jahr kosten.

Die Fonts bleiben auf dem Server von kernest und werden auf der eigenen Seite über das Stylesheet von kernest.com geladen.

zurück zum Seitenanfang