Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: @font-face

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: @font-face

Der Webtypografie steht eine grundlegende Änderung bevor. Durch die @font-face Regel wird es in Zukunft möglich sein, jede beliebige Schrift zu verwenden. Tobias Otte stellt eine Seite vor, die schon jetzt von dieser Technik Gebrauch macht.

Bei der Gestaltung von Webseiten nicht nur auf die systeminterne, sondern auch auf andere Schriften zurückgreifen zu können, wünschen sich viele Webdesigner. Schon in der CSS2 Spezifikation war hierfür die at-Regel @font-face vorgesehen. Wegen mangelnder Umsetzung durch die Browserhersteller wurde sie allerdings nicht in die Zwischenversion 2.1 übernommen, hat aber mit dem CSS3 Web Fonts Modul wieder Einzug in die W3C Empfehlungen erhalten.

Anlässlich des Erscheinens von Safari 3.1, dem ersten Browser, der die Vorgaben des Web Fonts Moduls zumindest teilweise umgesetzt hat, veröffentlichte fonts.info zwei Schriftschnitte speziell zur Einbettung in Webseiten. Die dazu gehörende Demo Seite zeigt auf ansprechende Weise die Möglichkeiten, die der Einsatz der at-Regel bietet. Je nachdem, welche Eigenschaften der jeweilige Browser unterstützen, sieht die Demo Seite natürlich auf verschiedenen Browsern unterschiedlich aus.

Ein Blick in die CSS Datei verrät, dass neben @font-face auch auf verschiedene CSS3 bzw. Webkit spezifische Eigenschaften zurückgegriffen wird. Insgesamt ein netter Ausblick auf das, was jetzt schon zum Teil möglich und in Zukunft vielleicht auch browserübergreifend einsetzbar ist.

Fazit

Natürlich ist die Einbindung von jeder beliebigen Schrift nicht unumstritten. Die Schriftenhersteller befürchten die Vereinfachung des Diebstahls ihrer Arbeit, Designer haben Angst, dass die letzte Barriere fällt, die den Hobbygestalter davon abhält, typografische Schandtaten zu erstellen. Und letztendlich beklagt manch einer die Bevormundung des Nutzers bei der Wahl der anzuzeigenden Schrift.

Ich bin der Meinung, dass die Vorteile trotz allem deutlich überwiegen. Die Schriftenhäuser werden eine Möglichkeit finden, ihre weboptimierten, speziell lizenzierte Schriften zu verkaufen und der Nutzer wird auch weiterhin die angezeigte Schrift zu beeinflussen können. Das Web wird durch @font-face nicht nur schöner, sondern auch individueller werden.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Sebastian Verweyen
am 09.07.2008 - 10:28

Schön ist es sicherlich. So kann man bald auf sIFR oder gar grafische Headlines verzichten. Nur bleibt halt die Frage wie lang es noch dauern wird bis eine akzeptable Quote an Browsern das auch wirklich unterstützt.

Permanenter Link

Markus
am 09.07.2008 - 16:54

Ich würde mir wünschen, Schriftarten via CSS ebenso zu laden, wie Hintergundbilder. Also z.B.

h1.header {
font: url(fonts/schriftart.ttf);
}

Das würde die Sache wesentlich erleichtern, wie ich finde...

Permanenter Link

goldjunge2007
am 09.07.2008 - 17:13

Das finde ich super. Damit kann man endlich mal richtig schicke Überschriften erstellen ohne auf Bilder zurückgreifen zu müssen. Und ohne Qualitätsverlust sind dann auch noch skalierbar :)))

Hoffendlich können das bald alle Browser.

Permanenter Link

Ansgar Hein
am 10.07.2008 - 10:05

@Sebastian: Ich glaube nicht, dass @font-face die Wachablösung für sIFR ist. Denn wenn die Schrift auf dem Rechner des Nutzers nicht da ist, gibt es ein Fallback. sIFR ermöglicht es mir aber, jede beliebige Schriftart einzusetzen.

@Markus: Das halte ich für keine gute Idee. Denn dazu müsste die Schriftart auf dem Webserver liegen und wäre (wenn nicht via htaccess und Co. geschützt) für jeden Nutzer zugänglich. Ergo: Software-Piraterie.

Permanenter Link

Tobias
am 10.07.2008 - 11:13

@Ansgar: Mit @font-face ist kein Fallback nötig weil die Schrift vom Webserver geladen wird. Nur eben nicht, wie Markus angemerkt hat, über eine Deklaration sondern über eine at-Regel.

Permanenter Link

Patrick
am 10.07.2008 - 14:31

Schönes Feature. Aber da es nicht mal der aktuelle Firefox 3 kann, wird es wohl noch eine Weile dauern, bis man diese Funktion richtig nutzen kann. Ich denke mal so Internet Explorer 11 oder 12 ;)

Permanenter Link

Tobias
am 10.07.2008 - 15:23

Der FF 3.1 wird sie allem anscheinen nach beherschen. Also sooo schlecht sind die Aussichten nun auch wieder nicht ;-).

Permanenter Link

Michael
am 12.07.2008 - 22:44

Wie lange habe auf diese Möglichkeit gewartet und wollte sie direkt nach Erscheinen von Safari 3 nutzen. Leider wirken (zumindest in Safari) alle @font-face-Schriften viel zu klein gegenüber den üblichen Webschriften. Macht man sie größer, haben die Leute mit veralteten Browsern (dazu zähle ich mal alles außer Safari 3 und Firefox 3) riesengroße Texte.
Das ganze ist leider nicht so benutzbar, wie ich es erwartet hätte.

Permanenter Link

Tobias
am 13.07.2008 - 11:49

@Michael: Mit font-size-adjust sollte man das eigentlich lösen können.

Permanenter Link

Die Kommentare sind geschlossen.