Standardschriften begleiten uns seit dem Urknall des Internets. Schriften wie Arial und Helvetica sind Norm, wer auf den Putz hauen will probierts mit Verdana oder Georgia. Das ist die ernüchternde Realität beim browsen durchs Web. Kreative verwenden Bilder um andersweitige Schriften zu nutzen, dies jedoch zu lasten von Performance, Suchmaschinenfreundlichkeit und Flexibilität. So genannte Webfonts versprechen einen Ausweg aus diesem Dilemma.
@font-face
Eine neue Möglichkeit der Einbindung von Schriften ist der Einsatz spezieller Schriftdateien über Stylesheets. Theoretisch besteht diese Möglichkeit schon seit langem, aufgrund von fehlender Browserunterstützung hat sich dies jedoch nie wirklich durchgesetzt. Mit CSS3 wurde dieses Thema nun wieder neu aufgegriffen und die Sterne stehen gut, dass zukünftig eine grössere Schriftenvielfalt im Web entsteht. Welche CSS3-Properties von den gängigen Browsern unterstützt werden, könnt ihr in der Web Design Checklist von findmebyIP.com nachlesen.
EOT und WOFF
Wie bei jeder neuen Web-Technologie fehlen Standards welche von den Browsern eingehalten werden. Somit müssen zwei verschiedene Schriftformate eingebunden werden damit die Schrift korrekt in allen Browsern angezeigt wird, das EOT-Format (»Embedded Open Type«) das der Internet Explorer schon seit Version 4 unterstützt sowie das WOFF-Format für Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+.
Wie binde ich die Schriften ein?
Das Einbinden der Web-Schriften erfolgt über CSS. Aufgrund der unterschiedlichen Formate muss die Schrift zweimal eingebunden werden, damit sowohl der Internet Explorer als auch Firefox die Schrift anwenden können:
/* Internet Explorer */
@font-face {
font-family: MyFont;
src: url("/fonts/MyFont.eot");
}
/* Firefox, Safari, Opera */
@font-face {
font-family: MyFont;
src: url("/fonts/MyFont.woff") format("woff");
}
Danach kann die Schrift wie üblich im CSS verwendet werden.
body {
font-family: MyFont, Arial, Verdana
}
Für ältere Browser sollte, wie im oberen Beispiel, eine Alternativschrift angegeben werden, sofern das Format nicht korrekt intepretiert werden kann.
@font-face {
font-family: MyFont;
src: url("/fonts/MyFontItalic.woff") format("woff");
font-style: italic;
}
em {
font-family: MyFont, Arial
font-style: italic;
}
Im obigen Beispiel wird eine Italic Schrift eingebunden, welche nun wie jede andere Systemschrift verwendet werden kann, bitte beachtet, dass verschiedene Schriftstile einer Schrift nur vom WOFF-Format unterstützt werden.
ClearType
Webschriften sind für ClearType optimiert. ClearType ist erst ab Windows Vista standardmässig eingeschaltet. Wenn andere Schriftglättungsmethoden eingesetzt werden, sind die Webschriften nicht mehr optimal lesbar. Am besten die verwendet Schriften auf verschiedenen Betriebssystemen und Browser austesten, beispielsweise mit Adobe Browserlabs.
20 Fonts im EOT und WOFF Format
Wir haben euch nun nachfolgend 20 neue Schriftarten von FontSquirrel zusammengestellt, welche direkt als Webkit im EOT und WOFF Format heruntergeladen werden können. Die Schriften sind lizenzfrei und können frei verwendet werden.
Marketing Script
Sansation
Walkway
Ubuntu-Title
Monika
ChunkFive
PT Sans
ArtBrush
Ballpark
NeoRetroDraw
Bebas
Existence Light
UglyQua
Creampuff
Dubtronic
Candela
Latin Modern Roman
Lilly
Lacuna Regular
Giant Head OT
Ich verwende für Titel oder die Navigation meist Bilder, da es, wie im Beitrag erwähnt wurde, noch keine Standards für “nicht-websave” Schriften gibt. Um die Titel oder die Navigation suchmaschinenfreundlich zu halten, setze ich die Bilder als Hintergrundsbilder ein und schreibe im HTML den eigentlichen Text rein. Diesen Text verschiebe ich mit CSS aus den sichtbaren Bereich. Somit sieht der Searchbot den normalen Text und der User den schönen Text. Soll eine Website per CMS von einem Kunden bearbeitbar sein, habe ich aber immer ein Problem mit meiner Methode.