Das .woff-Format für eigene Homepage-Schriftarten nutzen

Vor wenigen Tagen stellte ich hier mehrere Methoden vor, mit denen es möglich ist, der Homepage eine eigene Schriftart zu verpassen, auch wenn diese der Benutzer nicht auf seinem Computer lokal installiert hat.

Eine der Methoden, wahrscheinlich die beste der drei, war das .woff-Format. Das web open font format bietet im Gegensatz zu den anderen Möglichkeiten einige Vorteile. Die wichtigsten davon sind:

• Eigene Schriftart mittels .woff-Format wird allmählich massentauglich, da die wichtigsten Browser es bereits eingebaut haben, oder in den nächsten Versionen einbauen werden. Mozilla Firefox kann es seit Version 3.6, der in Kürze erscheinende Internet Explorer 9 wird ebenfalls damit umgehen können. Auch die Webkit-Browser (Chrome, Safari) werden in nächster Zeit nachziehen.
• Ein weiterer großer Vorteil ist der geringe Traffic-Verbrauch. Da es sich beim .woff-Dateiformat um ein Container-Format handelt und die Schriften darin Gzip-komprimiert werden, verursachen die Schriftdateien weder beim Betreiber, noch beim Benutzer der Seite einen großen Traffic-Verbrauch. Bei meinem Versuch hat sich die Gesamtgröße der Dateien von gut 1,4 MB auf etwa 100 KB verkleinert. Das entspricht einer Verringerung der Datenmenge auf etwa ein Vierzehntel gegenüber normalen Schriftdateien.
• Das .woff-Dateiformat ist außerdem in den Standardisierungsprozess des W3C aufgenommen worden und wird sich in den nächsten Jahren wohl zum Browser-übergreifenden Standard entwickeln.

Wie wendet man das Ganze nun auf der Homepage an?

Als aller erstes muss die eigene Schriftart natürlich im .woff-Format vorliegen. Über einen Kommentar von „Frakturfreund“ (vielen Dank nochmal) zum letzten Artikel kam ich auf die Seite fontsquirrel.com. Hier lassen sich Schriftart-Dateien hochladen und in eine größere Auswahl an Formaten konvertieren. Wichtig für uns: Es steht auch ein Modus für die Konvertierung ins .woff-Format zur Verfügung. Außerdem lassen sich die Dateien weiter verkleinern, indem ungebräuchliche, exotische Schriftzeichen nicht in das Paket mit aufgenommen werden.

Nun müssen die Schriftdateien via CSS eingebettet werden. Das Ganze sieht im ersten Moment zwar etwas komisch aus, ist aber ziemlich einfach. Am Anfang der CSS-Datei sollte man für jeden der vier Schriftart-Typen die .woff-Datei einbinden (normal, fett, kursiv, kursiv+fett). Falls man zum Beispiel die kursive Schreibweise nicht benutzt, kann man diese auch weglassen. So verringert sich das später zu übertragende Datenvolumen.

Für was stehen die Elemente?

• font-family: Hier kommt der Name der Schriftart rein. Wird später in der CSS-Datei die font-family festgelegt, muss der hier festgelegte Namen verwendet werden.
• src: Dieser Teil des Codes beschreibt ganz einfach den Pfad zur Schriftdatei, die im selben Verzeichnis wie die CSS-Datei oder in einem Unterordner dieser Datei abgelegt werden muss.
• font-weight und font-style: Im Normalfall hat man vier .woff-Dateien, die eingebunden werden müssen. Wie bereits oben geschrieben (normal, fett, kursiv, kursiv+fett). Mit font-weight und font-style legt man fest, welche Datei für fette Schrift, welche für normale usw. verwendet werden soll.

Der gesamte CSS-Code sollte nachher so oder so ähnlich aussehen.

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-r.woff') format('woff'); /* Datei für normale Schriftart */
    font-weight: normal; /* Nicht fett */
    font-style: normal; /* Nicht kursiv */
    }

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-b.woff') format('woff'); /* Datei für fette Schriftart */
    font-weight: bold; /* Fett */
    font-style: normal;
    }

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-i.woff') format('woff'); /* Datei für kursive Schriftart */
    font-weight: normal; 
    font-style: italic; /* Kursiv */
    }

@font-face {
    font-family: 'Ubuntu';
    src: url('ubuntu-bi.woff') format('woff'); /* Datei für fette+kursive Schriftart */
    font-weight: bold; /* Fett */
    font-style: italic; /* Kursiv */
    }

Kann ich .woff bereits heute verwenden?

Ja! Zwar beherrschen noch nicht alle Browser das Dateiformat, allerdings sollte es sich bei einer eigenen Schriftart wohl meist um eine rein optische Maßnahme handeln. Beherrscht der Browser das Format nicht, wird halt eine andere Schriftart verwendet. Außerdem werden die Browser, die es bisweilen noch nicht können, in nächster Zeit sicherlich nachziehen.