Nachdem das leidige Thema der begrenzten Schriftauswahl auf Websites konnte zwar immer noch nicht gänzliche gelöst werden, aber immerhin scheint es jetzt etwas Licht am Ende des Tunnel zu geben. Nachdem Safari 3.1 als erster Browser einem Methode zur Schrifteinbindung auf Websites unterstützt hat wird jetzt Firefox ab Version 3.1 nachziehen. Grund genug die aktuellen und zukünftigen Möglichkeiten der Schrifteinbindung näher zu beleuchten.
Aktuell wurden “Nicht-Standard-Schriften” meist als Bilder (via z.B. PHP generiert) oder als Flashdateien eingebunden. Diese Workarounds funktionieren zwar, sind aber weder für Suchmaschinen noch aus Performancesicht optimal. Um dem entgegenzuwirken gibt es in der CSS 3 Definition den netten Style “@font-face”. Über diesen Befehl ist es möglich Schriftarten direkt auf die Website einzubinden.
Dazu müssen zuerst die Schriften bzw. die gewünschten Schriftschnitte definiert werden. Anschließend können die definierten Schriftschnitte wie gewohnt im Stylesheet verwendet werden.
Das Ganze könnte dann etwa so aussehen:
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
h1 {
font-family:'Fontin-Regular', Georgia, serif;
} |
Grundsätzlich werden TrueType-, OpenType PS- und OpenType TT Fonts unterstützt. Allerdings muss neben der noch relativ geringen Browserunterstützung (IE hinkt wiedermal hinterher) auch die Lizenzrechtliche Seite beachtet werden. Es dürfen nämlich bei weiten nicht alle Schriftarten auf dem Webserver abgelegt werden. Daher empfiehlt es sich die Nutzungsrechte für die Schrift die verwendet werden soll genau zu hinterfragen. Daher bieten sich aktuell vorallem Fonts die über die Open-Font Lizenz vertrieben werden an.
Fazit:
Nachdem das ganze Thema zeitweise wenig Beachtung erhalten hatte, scheint wieder etwas Bewegung in das Thema gekommen zu sein. Mit dem Erscheinen von Firefox 3.1 wird Firefox die Nase knapp vor Safari haben, da Firefox im Gegensatz auch Ligaturen unterstützen wird. Auch wenn bei diesen 2 Browsern auch noch einige Details verbesserungswürdig sind, so ist die Unterstützung von @font-face doch ein gutes Zeichen. Ganz nebenbei werden auch andere Browserhersteller unter Druck gesetzt und Früher oder Später wird es hoffentlich auch ein Unterstützung im Internet Explorer geben.
Weiterführende Links:
W3C Definition
Vergleich Safari / Firefox
Typografie.info – Fonteinbettung in Webseiten
Keine änlichen Beiträge.
