Laufweite, Zeilenabstand, Kapitälchen, Schatten, mit CSS1-3 ist eine Menge möglich. Eigentlich braucht man keine Bilder mit Texten drauf, möchte man meinen. Aber wie sieht es mit der Wahl der Schriftart aus?
Systemfonts
Man kann auf Systemfonts zrückgreifen und für jede Plattform den entsprechenden Namen angeben. Zum Beispiel arial,helvetica,liberation sans usw. Das funktioniert recht gut, wenn die Webseite irgend ein sans, serif oder eine alberne Comicschrift haben soll. So etwas bringt jedes System mit.
Nachgeladen
Bestehen allerdings Ansprüche auf die Qualität des Fonts, wird eine moderne und ausgefallene Schrift gebraucht oder soll eine plattformunabhängig einheitliche Optik geschaffen werden, ist das mit den Systemfonts nicht zu bewerkstelligen. Dafür bietet CSS seit jeher den Verweis auf eine Font-Datei. Seit etwa 2009 beginnen die Browserhersteller, auf dieses uralte Attribut endlich zu hören.
Welcher Browser welche Formate beherrscht, möchte ich in diesem Blog nicht wiederholen, darüber wurde genug geschrieben. Das Fontfile lässt sich base64-encodiert in die CSS-Datei einbinden. Der Sinn davon erschließt sich mir nicht. Der sinnvollste und fast ausschließlich eingesetzte Weg ist, in der CSS-Datei ein Bündel Fontfiles in verschiedenen Formaten einzubinden.
Vorsicht vor local()!
Der Browser sucht in den Referenzen der Schriftdateien diejenige, die er versteht, und wertet sie aus. Danach bricht er die Interpretation ab. Das heißt, wenn erst local() und dann url() in den Referenzen steht, sucht der Browser erst nach einem bereits installierten Font und lädt nur beim Fehlversuch die Datei nach. So spart man Bandbreite, möchte man meinen. Aber das stimmt nicht, und das steht auf keiner anderen Webseite als in diesem Blog!
Wie hoch ist die Wahrscheinlichkeit, dass der Besucher die schicke ausgesuchte Schrift installiert hat? Verschwindend gering. Dafür veranlasst local() einige Webkit-Browser, in jedem Fall eine lokale Schrift zu suchen und keine zu saugen. Das Ergebnis ist eine Webseite im lahmen Systemfont. Also: Finger weg von local(), auch wenn es die ganzen Beispielwebseiten enthalten. Einige Designer scheinen das längst zu wissen aber nicht weiterzusagen, denn unter den Webseiten im Produktivbetrieb wird bereits jetzt schon gerne auf local() verzichtet.
Update 24. Jun. 2011
Seit ein paar Wochen sind sich alle Browserhersteller einig, dass sie Schriften im Web Open Font Format (WOFF) unterstützen wollen. Chrome, Firefox 3.6 und IE9 sind soweit, Safari wird folgen. Die Dateien belegen zwischen 40kB und 400kB und lassen sich mit wenig Aufwand einbinden. Dieser Artikel verwendet den freien Ubuntu-Font.
@font-face {
font-family: Ubuntu;
src: url(Ubuntu-Regular.woff) format("woff");
}
p {
font-family: Ubuntu, sans-serif;
}