200904Nov

Web-Typografie: @font-face in allen Browsern

Mit dem Web Open Font Format wird es in Firefox 3.6 eine neue Möglichkeit geben, individuelle Schriftarten für Headlines und Fließtext nutzen zu können. Das Format wird vorerst ausschließlich von dem Mozilla-Browser unterstützt werden, weshalb praktikable Cross-Browser-Lösungen benötigt werden. Zu diesem Thema wurde letzte Woche auf dem ThemeForest-Blog ein interessanter Beitrag veröffentlicht, der die Implementierung von verschiedenen Schrift-Formaten beschreibt. In dem Artikel von Devon Govett wird der @font-face Kit Generator von Font Squirrel erwähnt, mit dem sich eine OTF- oder TTF-Schriftart in TrueType (TTF), EOT, SVG und WOFF konvertieren lässt. Anschließend können die Formate mit entsprechendem CSS-Code so eingebettet werden, dass die Schrift in allen gängigen Browsern dargestellt werden kann.

TrueType-Font in Firefox 3.5

In der Praxis funktioniert die Methode sehr gut. Allerdings muss man ein paar Defizite in Kauf nehmen: Das Anti-Aliasing und die Strichstärke der Schriftart variieren je nach Browser — unter Windows lässt die Kantenglättung noch zu wünschen übrig. Weiterhin kann in manchen Browsern ein unschöner "Flash of Unstyled Content" (FOUC) auftreten.
Trotz der Möglichkeiten von "@font-face" müssen natürlich die Lizenzbestimmungen einer Schriftart beachtet werden. Wer sicher gehen will, sollte also bei Font Squirrel nach einem passenden Zeichensatz suchen. Alternativ gibt es immer noch JavaScript-Methoden wie Cufón, die zumindest für Überschriften eine gute Cross-Browser-Lösung darstellen — auch hier muss die EULA der jeweiligen Schriftart "Web Embedding" erlauben.