Webdesign | Mittwoch, 19. März 2008

Safari 3.1 CSS 3 WebFonts (Update)

Safari 3.1 unterstützt als erster Browser für Mac und PC nun auch CSS 3 Web Fonts. Safari-Besucher sehen daher die Überschriften auf qxm.de in der Schrift „Share“ von Ralph Oliver du Carrois.

Und so geht’s: Mit @font-face wird die zu ladende Schrift definiert:

@font-face {
  font-family: Share;
  src: url('Share-Regular.ttf');
}

Und mit der font-family-Anweisung rufen Sie diese Schrift auf:

h2 {
  font-family: Share, Helvetica, (...) sans serif;
}

Wenn Sie eine Schrift in eine Website einbinden wollen, müssen Sie unbedingt die Bedingungen der Lizenz beachten – Sie dürfen nicht einfach irgendeine gekaufte Schrift nehmen! „Share“ steht übrigens unter einer Creative-Commons-Lizenz.

Update

Hier ein Screenshot für diejenigen, die Safari 3.1 nicht benutzen können/wollen:

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

kuschti Mittwoch, 19. März 2008, 11:20 Uhr

Coole Sache, perfekt für mein geplantes neues Design im „Grunge“ Stil!

Martin Kautz Mittwoch, 19. März 2008, 12:47 Uhr

Ich weiß noch nicht, wie ich das finden soll…
(Mehr) typographische Freiheit – ohne per sIFR & Co durch die Brust ins Auge zu schiessen – ist sicherlich zu begrüßen. Schön auch, dass es Einzug ins CSS gehalten hat, statt das HTML noch mehr zu erweitern…

Auf der anderen Seite wird „typographische Vergewaltigung“ erleichtert, und wie man an Deinem Beispiel sieht, bedarf es nun endlich auch eines Preloaders für Schriften… :-)

Rolf Mittwoch, 19. März 2008, 15:42 Uhr

Schöne neue Möglichkeit Typografie online einzusetzen. Das ist gefühlt 10 Jahre überfällig. Was mich doch wundert ist, das es seitens der – ich nenne Sie mal – „Schriftverwerter“ noch zu keinem Sturm der Entrüstung gekommen ist. Oder habe ich was verpasst? In den letzten Jahren war es um das Thema recht still geworden. Warum wird die Funktion erst jetzt integriert? Rechtlich scheint nach wie vor nichts geklärt.

Wird Zeit sich nach Schriften unter CC-Lizenz umzuschauen.

Ludwig Mittwoch, 19. März 2008, 16:19 Uhr

Schöne Demonstration der @font-face-Möglichkeit des neuen Safari-Browsers. Merci!

Michael Preidel Mittwoch, 19. März 2008, 17:02 Uhr

@Martin: Stimmt, nach so etwas wie einem Preloader habe ich auch geschaut, aber nichts gefunden. Überhaupt sind die Informationen noch extrem rar gesät – ich weiß noch nicht mal, ob die Schriftdatei beim Blättern im Cache gehalten oder jedes Mal neu geladen wird. Dazu werde ich mir in den nächsten Tagen die Logfiles mal etwas näher anschauen.

Und eine mögliche „typographische Vergewaltigung“ sehe ich (zumindest in der nächsten Zeit) eher nicht – wer für den Nischenbrowser Safari designt, weiß in der Regel, was er tut ;-)

@Rolf: Rechtlich geklärt ist das allemal: Das Einbetten kommerzieller Fonts in Websites ist schlicht verboten, da ja die Schriftdatei ohne Schwierigkeiten von jedermann frei herunterladbar wäre. In diesem Zusammenhang erinnere ich mich noch gut an die ausgedehnten Verhandlungen Adobes mit diversen Schriftenhäusern in den Anfangszeiten von PDF – damals erlaubten die meisten Lizenzinhaber das Einbetten nur deshalb, weil Adobe zusagte, dass man die Schriften nicht aus dem PDF extrahieren konnte. Dass das mit einem einfachen Trick dann doch eine zeitlang ging, ist eine andere Geschichte …

Martin Kautz Mittwoch, 19. März 2008, 21:40 Uhr

Der Font wird – wie jede andere im HTML referenzierte Ressource – über einen Extra-Request gezogen und unterliegt der gleichen Caching-Policy wie jedes Bild, CSS, JavaScript, whatsoever… 110 KB… Er taucht somit genauso fein im Aktivitätsfenster des Safari auf, wo er per Doppelklick (mit gedrückter Alt-Taste) seinen Weg in meinen Download-Folder fand. :-)
Bin gespannt, wann die ersten serverseitig generierten TTFs auf die Welt kommen. Hoffentlich sind die Font-Render-Komponenten Mac OS X und Windows halbwegs frei von Buffer-Overflow-Lücken…
By the way: Ist das eigentlich auf Truetype beschränkt?

Martin Kautz Mittwoch, 19. März 2008, 21:44 Uhr

Nachtrag: Der Font gefällt mir gut, und hier findet definitiv kein „visual rape“ statt! :-)

Michael Preidel Donnerstag, 20. März 2008, 08:47 Uhr

Neben TrueType funktionieren auch OpenType-Fonts. Hier wird jetzt übrigens die OpenType-Version von Share eingebunden, die ist mit 27 KB nämlich nur ein Viertel so groß wie die TT-Version, wie ich gerade zufällig festgestellt habe.

Jeena Paradies Dienstag, 25. März 2008, 21:28 Uhr

Das Größte Problem finde ich ist eine sinnvolle freie Schrift zu finden die gut zum Design passt. Ich bin leider kein Typografist und alles was ich versuche sieht bisher leider ziemlich scheiße aus :-(

Michael Preidel Mittwoch, 26. März 2008, 09:32 Uhr

@ Jeena: Als ich selbst gesucht habe, bin ich u. a. auf dafont.com gestoßen – meiner Meinung nach das mit Abstand beste Font-Portal. Wenn du da mal in den Kategorien Serif oder Sans Serif schaust, sollte bestimmt was dabei sein.

Boris Dienstag, 30. Juni 2009, 15:16 Uhr

Update: FireFox 3.5 unterstützt jetzt ebenfalls @font-face … ich hab mich schon über die Schrift gewundert eben ;)