@FontFace – Web und Typografie

Regelmässig kommt bei Webdesign die Frage, warum man nicht diese oder jene Schriftart verwenden kann, sondern immer nur die gleichen Schriftarten wie Verdana, Arial, Helvetica usw.

Es gibt viele Ansätze, Webseiten auch Typographisch aufzuwerten mit Tools wie sIFR und FLIR welche eine Schrift in ein Flash umwandeln. Auch Ansätze von JavaScript mit Schriftbibliotheken wie Cufón wurden versucht.

Bisher gibt es leider noch immer nicht “Die Superlösung” für Typografie im Web, um die Schrift auch allen Besuchern zur Verfügung zu stellen.

Eine weitere Methode mit vermutlich grosser Zukunft liegt in der @font-face Technik. @font-face ist eigenltich keine CSS3 Eigenschaft sondern wurde viel früher entwickelt, aber bisher nicht durch das W3C angenommen.

Mit @font-face lässt sich eigentlich jede Schriftart mit wenig Code in eine Webseite einbinden. Da kommt natürlich auch schon wieder das nächste Problem, das Problem mit den Rechten einer Schriftart. Nicht jede Schrift darf dafür verwendet werden.

Auf Font Squirrel gibt es jede Menge Schriftarten die man auch für kommerzielle Zwecke frei gebrauchen kann, und auch jede Menge vorgefertigter @font-face kits (mit allen benötigten Schriftfiles und CSS drin) zum Download.

So könnte Text im Web also in Zukunf ausshen:

Das oben sollte nun eigentlich in der Schriftart “FFF Tusj” angezeigt werden. Leider wird das nicht in allen Browsern so sein. Internet-Explorer, Opera und Safari müssten das eigentlich können, und nun auch Firefox ab Version 3.5.

Ich denke dieser Weg ist der richtige. Nun muss man nur noch etwas abwarten bis alle Browser diese Funktion unterstützen.

Folgendermassen wurde dieser text in CSS generiert:
Oben im CSS wird die Schriftart FFF Tusj und deren Pfad angegeben:

@font-face {
font-family: 'FFFTusjBold';
src: url("fonts/FFF_Tusj.ttf") format("truetype");}


Anschliessend kann die Schriftart ganz normal verwendet werden mit font-family:

font-family: FFFTusjBold;
font-size: 60px;