Einige meiner Kunden hätten gern ihre Hausschrift auf der Webseite. Dafür habe ich sogar mal eine Flashseite bauen müssen, nur damit der Lieblingsfont auch zuverlässig angezeigt werden konnte. Das ist ebenso wie das altbekannte Image-Replacement so ganz und gar nicht barrierefrei. Da bis heute die meisten Kunden mit Barrierefreiheit nicht viel am Hut haben (wollen), bemühe ich mich immer um Techniken, die zugänglich sind und ohne großes Rampenlicht im Hintergrund wirken. Jetzt habe ich mal einen genaueren Blick auf @font-face geworfen. Damit lassen sich Webfonts in eine Website einbetten. Diese Methode beschränkt sich auf die Einbettung per CSS, anders als Cufón und sIFR, die mit Javascript und Flash arbeiten.
Inzwischen können eigentlich alle modernen Browser mit Non-Websafe-Schriften umgehen und wenn der Internet Explorer (IE) sein „Spezialfutter“ bekommt, kann der das auch – selbst die älteren Modelle. Als Font-Versionen kommen u.a. TrueType (.ttf ), OpenType (.woff) und der Embedded Open Type (.eot) für den IE infrage. Die Webfonts lädt man auf den eigenen Server und kann sie dann mit @font-face in ein Stylesheet einbetten. Danach lassen sie sich wie gewohnt per font-family ansprechen. Eine Anleitung mit Code-Beispiel gibt es auf Elmastudio. Dort sind auch einige Quellen erwähnt, wo man freie Schriften bekommt und Tools, mit denen sich die eigene Schrift in die o.g. Formate umwandeln lässt. Unbedingt darauf achten, dass die Schriften für diese Verwendung freigegebenen oder lizenziert sind!
Problem beim Webfonts einbetten
Nachdem ich mein @font-face Kit bei Font Squirrel runtergeladen und den mitgelieferten CSS-Code eingebaut hatte, sah ich meine neue Schrift in allen Browsern, sogar im IE7. Nur der Firefox – Version 3.6 – wollte partout nicht. Irgendwas stimmte mit meiner CSS-Datei nicht, denn die Beispieldatei aus dem Kit lief problemlos. Inzwischen bin ich schlauer: Der @font-face-Code muss nicht nur am Anfang der CSS-Datei stehen, er darf auch unter keinen Umständen innerhalb von @media all oder ähnlichen Anweisungen stehen. Nachdem ich das geschnallt habe, klappt es jetzt auch mit dem @font-face.