Web Fonts - @font-face im Einsatz

Das Internet besteht aus Texten. Auch wenn multimediale Inhalte wie Videos, Sounds oder Bilder mittlerweile feste Bestandteile sind, nimmt ist das Geschriebene immer noch den Löwenanteil ein. Nur der Text einer Seite ist wirklich durchsuchbar, nur mit Worten kann man Inhalte unmissverständlich vermitteln.

Darum ist bei der Gestaltung von Webseiten die Typografie eine zentrale Herausforderung. Leider ist der Gestalter, anders als bei Printprodukten, durch technische Vorgaben stark eingeschränkt. Auch wenn verschiedene Techniken wie SIFR oder Image-Replacement es theoretisch möglich machen jede Schrift zu verwenden bleibt am Ende doch nur die Gestaltung mit CSS.

Mit CSS kann der Autor durch verschiedene Eigenschaften einfluss auf das angezeigte Schriftbild nehmen. In CSS1 mussten alle Schriften auf dem Client System vorhanden sein, sie wurden nur anhand ihres Namens ausgewählt. Alternative Schriften konnten zwar in den Eigenschaften angegeben werden aber abgesehen davon hatten Browser keine Möglichkeit dem User eine andere Schrift als die allgemein verbreiteten Schriften vorzuschlagen.

Dies sollte sich eigentlich mit CSS2 ändern. Nach der CSS2 Recommendation könnten die Stylesheet Autoren genau angeben welche Schrift verwendet werden soll:

Die @font-face Regel

Jeder Browser enthält eine „Schriftdatenbank“. Diese Schriftdatenbank enthält die Schriften die der User in seinem System aktiviert hat. Auf diese Schriften kann man mit CSS zugreifen. Da diese Schriften aber je nach Betriebssystem stark variieren hat das W3C, um den Autoren die größtmögliche Freiheit zu geben, die At-Regel @font-face erarbeitet. Mit dieser Regel hat man die Möglichkeit dieser Datenbank Schriften hinzuzufügen.

Leider gehörte die Regel zu den Teiltechniken die von den Browserherstellern nur unzureichend umgesetzt wurden, weshalb sie in der Zwischenversion CSS 2.1 nicht mehr vorhanden war.

Nun wurde diese Technik schon im Jahre 2002 wieder aufgegriffen und in das CSS3 Modul Web Fonts eingesetzt. Leider hat es bis jetzt (Stand April 2008) gedauert bis die ersten Browserhersteller diese Funktion in ihre Programme eingebaut haben. Der Safari 3.1 ist der erste stabile Release der mit der @font-face Regel umgehen kann.

Update: Firefox 3.1 wird @font-face ebenfalls unterstützen. Ein Sneak Peek kann man bei Ralf Herrmann betrachten.

Update 2: Status Browserunterstützung 04/09

Die Technische Umsetzung ist relativ einfach. Mit der @font-face Regel hat man die Möglichkeit jeweils einen Schriftschnitt einzubinden sowie ihn genauer zu beschreiben. Die Beschreibung erfolgt durch die bereits weitläufig bekannt und eingesetzten Schrifteigenschaften:

  • font-family - Deklariert den Namen der Schriftfamilie. Außerdem kann eine generische Schriftfamilie angegeben werden
  • src - Verweißt auf tatsächliche Schriftdaten, egal ob herunterzuladen oder lokal installiert
  • font-style - Gibt an ob die Darstellungen normal (manchmal auch als „roman“ oder „upright“ bezeichnet), kursiv oder geneigt ist
  • font-variant - Bezeichnet einen Kapitälchenschnitt
  • font-weight - Legt das Gewicht des Schriftschnittes fest
  • font-stretch - Bezeichnet die Ausdehnung des Schriftschnittes
  • font-size - Ist der Deskriptor für die durch diese Schrift unterstützten Größen. Es sind, im Gegensatz zur Eigenschaft font-size, nur absolute Längeneinheiten erlaubt

Zu beachten ist das bei allen Deklarationen Mehrfachnennungen durch Kommaseparation möglich sind.

Übersicht der Eigenschaften sowie der zugelassenen Werte

Eigenschaft Zugelassene Werte Standardwert
font-family Name des Schriftschnittes, serif, sans-serif, cursive, fantasy, monospace Bestimmt der User Agent
src url("uri_zur_schrift") format("name_des_formats"), local("Name der Schrift") format("name_des_formats") -
font-style all, normal, italic, oblique all
font-variant all, normal, small-caps all
font-weight all, normal, bold, 100 bis 900 in Hunderterschritten all
font-stretch all, normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded normal
font-size Absolute Längenangabe (in, cm, mm, pt, pc) all

Beispiel

Die @font-face Regel im Einsatz

Als Schriftfamilie muss die Delicious von Jos Buivenga herhalten.

Da die Implementierung der Regel im Safari 3.1 anscheinend fehlerbehaftet ist (Details) habe ich mich auf die Schriftschnitte Roman, Bold, Italic und Bold Italic beschränkt. Small-Caps und Heavy haben Einfluss auf den Roman Schnitt, hier muss wohl noch nachgebessert werden.

Erläuterung

Definition der Schriftschnitte

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-Roman.otf') format("opentype");
}

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-Bold.otf') format("opentype");
font-weight: bold;
}

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-Italic.otf') format("opentype");
font-style: italic;
}

@font-face {
font-family: Delicious;
src: url('fonts/delicious/Delicious-BoldItalic.otf') format("opentype");
font-style: italic;
font-weight: bold;
}

Diese Regeln fügen die Schriftfamilie Delicious der Schriftdatenbank des Browsers hinzu wobei die erste Regel für den allgemeinen Schnitt (Roman) und die folgenden für die speziellen Schnitte zuständig sind. Das heißt sobald keine Spezifikation über eine der angegebenen Eigenschaften vorliegt wird automatisch auf den Roman Schnitt zugegriffen.

Aus Gründen der Übersichtlichkeit, und da sie vom Validator momentan noch als Fehler erkannt werden, empfiehlt es sich die @font-face Regeln in eine gesonderte Datei zu schreiben und via @import in die eigentlich CSS Datei einzubinden.

Einsatz der Schriftfamilie

Um die hinzugefügte Schriftfamilie zu nutzen reicht es aus sie einfach wie gewohnt in der font-family anzugeben.

font-family: Delicious, Arial, sans-serif;

Browser die @font-face Regel nicht beherrschen greifen so einfach auf die nächste Angabe zu. Die jeweiligen Schriftschnitte werden übernommen sobald eine der Bedingungen (z.B. font-weight: bold;) erfüllt ist.

Anhang

Links

Schriften die die Nutzung in @font-face erlauben (Lizenzbedingungen beachten!)

2 Kommentare

Avatar
Matthias Mees
schrieb am 16.04.09 um 1:51 Uhr:

Der Link zu Vollkorn ist leider karpott bzw. dort "entsteht" mittlerweile "eine neue Internet-Präsenz".

Avatar
Tobias
schrieb am 5.05.09 um 22:33 Uhr:

Die Seite war wohl nur kurz offline, ist nun wieder erreichbar.