Guymon

Websafe Fonts

Eine Übersicht von Schriften die wahrscheinlich auf den meisten Rechnern installiert sind und daher in den Web Font Stack aufgenommen werden können, wenn @font-face mal keine Option ist.

CSS: text-stroke

Chris Coyier zeigt wie man die Webkit CSS Properties -webkit-text-stroke-width und -webkit-text-stroke-color in Firefox, Opera und dem IE 9 simulieren kann:

h1 {
 color: white;
 text-shadow:
 -1px -1px 0 #000,
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
}

Eine Einschränkung ist der Umstand, dass sich so nur 1px Outlines erstellen lassen, aber trotzdem recht cool.

WebFont Loader

Ich hatte mir bislang immer nur das Google Font Directory angesehen und mich nicht weiter mit der WebFont Loader API beschäftigt, wobei die recht nützlich ist.

Zum einen kann man unterschiedliche Font Provider mit der API verwenden, was die API schon spannender macht, und es werden folgende css Klassen während das Ladens an das html Tag angehängt: wf-loading, wf-inactive (die Schrift konnte nicht geladen werden) und wf-active. So lässt sich gewährleisten, dass die Seite immer gut aussieht auch wenn die Schriften (noch) nicht geladen sind.

@font-face

Gleich zwei Artikel zu Web-Fonts sind mir heute aufgefallen.

Richard Fink geht für A List Apart recht ausführlich auf die verschiedenen Optionen für Web-Fonts ein und erklärt was WOFF ist, bzw nicht ist:

Like its older cousin, EOT (Embedded Open Type) a WOFF file is, essentially, a zipped font file. It is not a font format in and of itself. It’s a font file that’s been packed up to travel. As PNG and JPEG are to image formats like BMP and TIFF, WOFF is to TTF and OTF. (Except that, unlike a compressed image, the original font can and must be extractable from the compressed file.) In practice, WOFF and EOT are very similar and the compression ratios are about the same.

WOFF is not a magic font format that will once and forever break down all the barriers that have stood in the way of licenses for commercial fonts. No, font producers’ fears about the web are much more complex than that—and we’ll examine them shortly in connection with FHOS.

Dort habe ich auch einen Hinweis auf eotfast, was das grottige Microsoft Tool erstzen will. Mal testen.

Im Essential Guide to @font-face von Joshua Johnson findet man einige weitere Ressourcen.

Google Font API

Google veröffentlicht ein Font Directory mit Schriften die eine Open Source Lizenz haben und die Font API.

Die Nutzung der Webfonts ist extrem simple. Einfach ein weiteres CSS File einbinden was auf den Google Servern liegt:

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>

Einfacher geht es nicht. Ich bin gespannt wie schnell das Font Directory wächst.