2008 brachte Apple Safari 3.1 heraus und plötzlich stand ein neues Thema im Zentrum: Webfonts.

Dieses Thema brachte Debatten zwischen Entwicklern, Designern und Anwendern ins rollen und es wurde nach einer geeigneten Lösung gesucht. Langsam zeigt sich WOFF (Web Open Font Format) als Standard welcher alle Beteiligten zufrieden stellen könnte.

Noch vor einiger Zeit teilte man dem Browser mittels CSS oder direkt im HTML eine Auswahl für Systemschriften mit, also z.B. Sans Serifs, Arial, Helvetica. Der Browser wählte dann eine Systemschrift aus und benutzte diese für die Darstellung.

Unter Webfonts versteht man inzwischen Schriften, welche direkt in eine Website eingebunden sind und sich auf dem Webserver befinden. Beim Aufrufen der Seite werden diese Schriften vom Webbrowser herunter geladen und für die Darstellung der aufgerufenen Seiten verwendet.

Die aktuellen Betriebssystemversionen benutzen modernste Rendertechniken, so dass sich Fonts auch ohne spezielle Bildschirmoptimierungen immer besser und genauer darstellen lassen. Safari 3.1 setzte nun einen neuen Massstab und stattet den Browser seit da mit der Möglichkeit jeden beliebigen Open Type oder True Type Schriftsatz zu verwenden.

Um die ausgelösten Diskussionen über die Urheberrechtsverletzung beim Einbetten eines beliebigen Fonts zu mindern, entwickelte Tal Leming und Erik van Blokland ein neues Font-Format namens .webfont. Mit dem Mozilla Entwickler Jonathan Kew wurde das Konzept eines speziell für das Web vorgesehenen Font-Formats weiterentwickelt und präsentierte sich schon kurze Zeit später unter neuem Namen - WOFF.

Einige Vorteile von WOFF-Fonts:

• WOFF ist kein neues Format, sondern lediglich ein Containerformat für TrueType und OpenType Fonts
• WOFF-Dateien lassen sich auf einfache Weise aus den bestehenden Formaten erzeugen
• WOFF komprimiert die Dateien um einen schnellen unkomplizierten Ladevorgang zu gewährleisten
• WOFF-Dateien sollten sich auf 50 - 100 KB komprimieren lassen
• WOFF-Dateien können Meta-Informationen für Copyrights etc. enthalten

So könnte ein CSS aussehen:

@font-face { font-family: 'WebFont';
src: url('/myfont.eot');  /* IE6+ */
src: local('xx'),
url('myfont.woff') format('woff'),  /* FF3.6 */
url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}

Weiterführende Links:
http://www.fontsquirrel.com/
http://webfonts.info/
http://nicewebtype.com/
http://www.fontsquirrel.com/
http://people.mozilla.com/
http://www.golem.de/