CSS: @font-face im Praxistest

Zu einem individuellem Layout gehört in den meisten Fällen auch eine individuelle Schriftart. Doch was tun, wenn diese allzu exotisch ist und es keine Hoffnung gibt, das sie jemals flächendeckend als Systemschrift installiert ist? Die CSS-Eigenschaft @font-face hilft hier weiter.

Bereits seit CSS2 gehört @font-face zum Standard. Aufgrund mangelnder Unterstützung seitens der Browser-Entwickler, mit Ausnahme des Microsoftschen Browsers, wurde die Eigenschaft in Version 2.1 jedoch wieder aus dem Standard herausgenommen. Umso mehr erfreut es mich jetzt natürlich, das ein breites Umdenken statt gefunden hat und @font-face in CSS3 ein Comeback feiert.

So gut wie alle modernen Browser unterstützen die Eigenschaft:

• Internet Explorer (getestet mit 7 und 8)
• Chrome (getestet mit 8)
• Firefox (getestet mit 3.5, 3.6 und 4.0b)
• Opera (getestet mit 11.0)
• Safari (getestet mit 5.0)

Demo anzeigen

Und in der Praxis?

Das Einbinden einer Schrift ist denkbar einfach. Über die Deklaration

/* Beispielhafte Einbindung der Schriftart Electronic Highway Sign */
@font-face {
  font-family:"Electronic Highway";
  src:url(../pfad/zur/schriftdatei/electronic.ttf) format("truetype");
  font-weight:normal;
  font-style:normal
}

wird die Schriftart definiert. Mit der Angabe font-family wird der Name festgelegt, mit src:url(...) der Pfad zur Datei angegeben. Beides sind Pflichtangaben und müssen gesetzt werden. Die Angaben zum Schriftgewicht und -stil sind optional. Als Formate können Schriftdateien in Truetype oder Opentype definiert werden.

Schlussendlich weist man die neu definierte Schrift nur noch auf dem gewohnten Weg per Selektor zu, z.B.:

h1, h2, h3, h4, h5, h6 { font-family:"Electronic Highway" }

Browsereigenheiten

Der Internet Explorer nutzt ein eigenes Dateiformat mit der Endung .eot. Diese Eigensinnigkeit ist ja nichts neues. Zum Glück gibt es freie Konvertierungstools. Eines davon ist der web-basierte Dienst von kirsle.net, der ein Umwandeln ohne Software ermöglicht. Microsoft selber stellt mit dem Web Embedding Fonts Tool (WEFT) eine Software zum kostenlosen Konvertieren in .eot bereit.

Durch eine Browserweiche, z.B. mittels Conditional Comments, muss die Schrift für den IE gesondert angegeben werden:

<!--[if IE]><link rel="stylesheet" type="text/css" href="pfad/zu/css/iehacks.css" /><![endif]-->

@font-face {
  font-family:"Electronic Highway";
  src:url(../pfad/zur/schriftdatei/electronic.eot);
  font-weight:normal;
  font-style:normal
}

Ob der IE 9 neben .eot auch .ttf oder .otf unterstützt, kann ich zurzeit nicht sagen.

Was mich ein wenig überraschte, war der Firefox, der sich als ziemlich stur heraus stelle. So gibt es die Beschränkung, dass die Schriftdatei von der gleichen Domain geladen werden muss. Begründet wird dieser Umstand, das TrueType oder OpenType keine fest definierten MIME-Types haben.

Die Gecko-Browser verweigern ebenfalls die Anzeige bei korrupten Schriftdateien mit einer invaliden CMAP-Tabelle. Bei einem Test, in dem ich mehrere Schriftarten von dafont.com ausprobierte, gab es relativ viele davon. Wie man das überprüfen kann, kann ich nicht sagen. Hier hilft anscheinend nur das Prinzip „trial and error“.

Update: Ein komplettes Konvertierungstool für alle Formate stellt Font Squirrel mit dem @font-face Generator kostenfrei zur Verfügung. Dort findet ihr auch eine recht stattliche Anzahl an frei verfügbaren Schriften.
Vielen Dank an Dieter M. für den Tipp!

Geschrieben von Daniel Erlinger (Gastautor)

Daniel Erlinger ist seit 2006 selbstständiger Webdesigner und Frontend-Entwickler in Dresden und Bautzen. In seinem Blog schreibt er über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.