@font-face - Schriftenvielfalt für das Web

Der CSS-Selektor @font-face ermöglicht es, beliebige Schriften auf Webseiten zu nutzen. Der technische Aufwand ist dabei gering. Weder Javascript nocht Flash werden benötigt.

@font-face ist eine Technologie, die es ermöglicht, in einem Browser beliebige Schriften darzustellen. Browser können normalerweise nur Schriften anzeigen, die auf dem Computer installiert sind. Wer also die neuen Schriften von Windows 7 für das Webdesign benutzt muss damit rechnen, dass die Seite unter MacOs oder Windows XP anders aussieht als vorgesehen. CSS bietet zwar für diesen Fall die Möglichkeit, einen sogenannten Fontstack mit Ausweichschriftarten zu definieren, um zumindest kontrollieren zu können, welche installierte Schrift statt der Vorgesehenen benutzt wird. Allerdings ist diese Möglichkeit wieder nur auf die lokal installierten Schriften beschränkt. @font-face bietet die Möglichkeit, für Webseiten Schriften mitzuliefern und temporär im Browsercache zu installieren. Damit können diese Schriften im Browser wie lokal installierte benutzt werden.

Technische Umsetzung

Schriftformate für @font-face

Wie so häufig haben die verschiedenen Browserhersteller bei der Implementierung dieser Technik wieder mal ihr eigenes Süppchen gekocht. Die meisten aktuellen Browser unterstützen TTF und OTF-Dateien. Der mobile Safari auf iPhone & Co kennt nur das Vektor-Format SVG.

Microsoft hat mit dem Internet Explorer 6 das EOT-Format eingeführt. Es hat ein eingebautes Rechtemanagement. Damit sollte es für die Schrifthersteller einfacher sein, ihre Fonts für @font-face zu lizenzieren. Microsoft bietet in den Tiefen seiner Webpräsenz das Windows-Tool WEFT 3.2 an, um Schriften von TTF zu EOT zu konvertieren. Die Größe von EOT-Dateien kann noch durch Komprimierung mit dem Tool EOTFast beeinflusst werden.

Für kommende Browserversionen haben alle großen Browserhersteller und Schriftfirmen Unterstützung für das Web Open Font Format (.woff) angekündigt. Damit sollte dem Formatwirrwarr theoretisch ein Ende gemacht werden, aber man weiß ja, wie lange sich alte Browser noch halten.

Übersicht der der @font-face-Unterstützung der wichtigsten Browser

Browser	ab Version	unterstützte Formate
Internet Explorer	4	EOT, WOFF(ab Version 9)
Firefox	3.5	OTF, TTF, WOFF (seit Version 3.6)
Chrome	4.0	OTF, TTF, WOFF (seit Version 6)
Safari, Webkit	3.1	OTF, TTF
Opera	10	OTF, TTF
Safari mobil	1	SVG

Quellen für @font-face

Im Web gibt es viele freie Schriften, die den Einsatz für @font-face erlauben. Die Graublau Sans Web wird sogar speziell für diesen Zweck beworben. FontSquirrel bietet eine Sammlung fertiger @font-face-Pakete inklusive CSS-Code zum Download an. Wer diese Pakete benutzen möchte sollte sich allerdings zur Sicherheit die Lizenz des enthaltenen Fonts genau durchlesen.

Auch Google bietet mittlerweile im Google Font Directory eine Auswahl freier Schriften an. Sie können direkt als Quelle im CSS-Code genutzt oder heruntergeladen werden.

Jos Buivinga hat seit Jahren neben kommerziellen auch hochwertige freie Fonts im Angebot, die sich von seiner Seite herunterladen lassen. Wer diese Fonts benutzen möchte muss einen Hinweis auf seine Seite exljbris zumindest im CSS-Code unterbringen.

Auf der Seite von FontSquirrel kann man automatisch ein @font-face-Paket inklusive EOT für einen hochgeladenen Font erstellen lassen. Hier besteht auch die Möglichkeit, einen Teil der vorhanden Schriftzeichen herauszufiltern, um die Größe des resultierenden Fonts zu verringern.

CSS-Code

Um für die verschiedenen Browser nur eine CSS-Datei erstellen zu müssen, kann folgender CSS-Code verwendet werden:

@font-face {

 font-family: 'DejaVuSansBook';

 src: url('DejaVuSans-webfont.eot');

 src: local('☺'),

 url('DejaVuSans-webfont.woff') format('woff'),

 url('DejaVuSans-webfont.ttf') format('truetype'),

 url('DejaVuSans-webfont.svg#webfont1VsYjV21') format('svg');

 font-weight: normal;

 font-style: normal;

Dieser Code wurde von Paul Irish entwickelt und nimmt Rücksicht auf Eigenheiten der verschiedenen Browser.

Die Fonts müssen sich in diesem Beispiel im selben Verzeichnis befinden.

Font-family gibt an, unter welcher Bezeichnung der Font später im CSS-Code angesprochen werden kann. Die erste src:-Zeile enthält die Deklaration für den Internet-Explorer. src: local('☺') sorgt dafür, dass der Internet Explorer den Rest der Deklaration verwirft. Danach kommen die Deklarationen für die restlich Font-Formate sowie der Schriftstil.

Benutzt wird die neue Schrift DejaVuSansBook folgendermaßen:

p {

 font-family: 'DejaVuSansBook', Arial, sans-serif;

Falls die Einbindung der Schrift nicht funktionieren sollte werden mit Arial und sans-serif zwei Ausweichschriftarten deklariert. Damit wird verhindert, dass der Browser selber eine eventuell unpassende Schriftart auswählt.

Nachteile von @font-face

Lizenzen

Ein Nachteil dieser Technologie ist das Lizenzproblem. Kommerzielle Schriften werden üblicherweise zur Benutzung auf einem Computer lizenziert. Durch @font-face würden sie aber auf allen Computern, die zur Darstellung der Webseite benutzt werden, installiert. Daher wäre es notwendig, spezielle Lizenzen zu erwerben, die diese Art der Nutzung erlauben.

Hersteller wie Fontshop bieten mittlerweile sogenannte Web Fonts an, für die solche Lizenzen entworfen wurden. Dabei wird meistens nach Pageviews abgerechnet.

Größe der Schriftdateien

Beim ersten Besuch einer Webseite müssen mit @font-face eingebundene Schriftarten auf den Computer des Nutzers kopiert werden. Je nach Anbindung (DSL, Modem) dauert das unterschiedlich lange. Umfangreiche Fonts können mehrere Megabyte groß werden. Daher sollte man den oben angegebenen Fontgenerator von FontSquirrel nutzen, um wirklich nur das auszuliefern, was benötigt wird.