Webfonts mit @font-face
Webdesigners Hell, die “websichern” Fonts, oder vielmehr die vielen nicht nutzbaren Fonts. Mit der Ausnahme der auf Flash basierenden Websites, stehen dem Webdesigner nur eine kleine Auswahl an Schriften zur Verfügung. Ok, kennen wir, was gibt es für Alternativen? Nun, Alternativen gibt es einige, z.B. sIFR (scalable Inman Flash Replacement), JavaScript mit typeface oder Cufon (sIFR ohne Flash), oder @font-face.
Ich stelle euch heute zuerst @font-face vor, nicht eben neu, aber einfach umzusetzten und funktionell. @font-face versetzt einen Browser in die Lage echte Fonts temporär zu downloaden und zu verwenden und das alles ohne Tricksereien. Microsoft kurbelte diese Variante schon 1998 an und gab dem damaligen Internet Explorer alle hierfür nötigen Funktionen mit. Leider bis vor kurzem nur mit dem so gut wie unbekannten Schriftformat EOT (Embedded OpenType), d.h. es liegen so gut wie keine nativen Schriften im EOT Format vor und die Konvertierung ist recht problembehaftet. Also von daher leuchtet es in gewisserweise ein, dass diese Variante nicht sehr oft zum Einsatz kam.
Doch vor ca. 1,5 Jahren bekam die Sache langsam Schwung, als die neueste Version des Safari andere Schriftformate unter @font-face unterstützte, True-Type und OpenType. Firefox 3.1 und Opera 10 werden in der Entwicklung aufschließen und dieses Funktion ebenfalls liefern. Aber wie geht es denn nun genau? Die Einbindung geschieht denkbar einfach per CSS, hier ein Beispiel:
p {font-family: MeinFont, arial, sans-serif;}
Das schöne an der ganzen Sache ist, dass alles ohne Spielereinen funktioniert und die Font-Darstellung in Sachen Geschwindigkeit, Stabilität und Oualität nichts zu wünschen übrig lässt. Diese Technik wurde sogar vor einigen Monaten als offizielle W3C-Technik vorgeschlagen, doch aufgrund einiger Lizenzprobleme und der Frage ob TrueType/OpenType oder EOT Standard werden sollen, wird die letztendliche Entscheidung wohl noch auf sich warten lassen.
Kurz zu der Lizenzproblematik: Schriften sind uhrheberrechtlich geschützt, verwendet also bitte ausschließlich echte OpenSource-Fonts, die unter die GPL oder die Open-Font-Licence fallen.
Verwandte Artikel:
» Google Analytics für Einsteiger – Teil 3 – ECommerce Tracking
» Google Analytics für Einsteiger - Teil 2 - Die API
» Google Analytics für Einsteiger
» E-Commerce iPhone Apps
» Twitter für Anfänger - Die 5 ersten Schritte
Francis Collis
Diese Methode scheint mir gleichermaßen simpel, wie vielversprechend. Der CSS-Ausdruck lässt größentechnisch im “Peanuts”-Breich ansiedeln, die einzige technische Schwachstelle erschließt sich mir durch die Abhängikeit zur oben genannten URL.
Ich für meinen Teil beschäftige mich nur bedingt mit gestalterischen Fragen, doch auf die Fontproblematik stößt man ja auch schon im seichten Teil der Thematik.
Ein letzendliches Urteil vermag ich aber erst abzugeben, wenn ich auch einen Blick auf die Alternativen werfen kann. Ich bin mir sicher, dass es ein großes Ringen um DIE Einbindungs-Methode geben wird, was in Anpassungsorgien z.B. von Browser-Entwicklungsseite ausarten kann. Verschiedene Methoden, verschiedene Browser, verschiedene Entwickler, aber der Anspruch, der Gesamtheit der User und Designer Zugang zu alternativen Font-Arten zu gewähren – Da müssen sich fast die strukturellen Fehlerquoten häufen.
Bin auf jeden Fall gespannt auf die kommenden Präsentationen zu den anderen Methoden.
Hallo Thomas,
vielen Dank für Deinen Kommentar! Über typeface.js und sIFR werde ich in Kürze etwas schreiben. Ich seh allerdings @font-face als eine gute Lösung für alle Beteiligten an, man wird sehen
Öhm..sagmal Francis sollen die ganzen Umbrüche, also in den Code?! Gehört das so? Eher nicht, oder?
@Sebastian – Sorry, die br gehörten da natürlich nicht rein (sind ja jetzt auch raus), hat irgendwie das Plug reingefuscht