@font-face Typekits

Webdesignlovers — Wed, 12 May 2010 20:19:22 +0000

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.

WebdesignloversTypekits | Webdesignlovers

@font-face Typekits

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