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.

Anzeige

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.

Anzeige


5 Kommentare

  1. Pingback: Ubuntu-Schriftart (ubuntu-font-family) auf Homepage verwenden | picomol.de

  2. danke für den tipp, kannte den converter noch nicht. gleich mal austesten.

  3. Muss der Dateiname von fett+kursiv nicht anders heißen?

  4. Danke, hab den Fehler korrigiert.

  5. Nochmal was anderes: Wieso nennst du die Schrift Ubuntu2 in deinem Blog? Der Firefox cacht die Schrift nicht und lädt sie jedes mal nach. Deshalb wird jedes mal die Schrift (wo sie einegsetzt wird) nach dem Anzeigen der Webseite ersetzt – komsiches rumgehoppe. ^^

    Würdest du die Schrift einfach „Ubuntu“ nennen, müsste der die bei dir nicht mehr nachladen und gut wäre es (weil sie ja hier schon auf dem System ist).

  6. Hey!

    Das war ein Fehler. Ich wollte nur probieren, ob es klappt. Habs dann irgendwie vergessn wieder rauszunehmen. Jetzt heißt sie wieder Ubuntu ;-).

    Allerdings hat bei mir auch vorher nichts gehoppelt.

    Gruß Valentin

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.