Schriften mit @font-face
20. September 2011 ute
So ganz allmählich lassen sich Schriftarten sinnvoll einsetzen, die nicht auf dem Rechner des jeweiligen Nutzers installiert sind. Es gibt viele freie Schriften, die dafür genutzt werden können, jedoch für deutschsprachige Blogs eignen sich nicht alle.
uteles Blog als erste Testecke, siehe Screenshot.
Um einen Überblick über die Schriften zu haben und weil ich eine eigene Auswahl aus Schriften mit Umlauten wollte, habe ich mir eine eigene Seite für Schriften angelegt. Vorsicht, es dauert einen Moment bis die Seite vollständig geladen ist (eher nicht mobil geeignet): http://www.miradlo.info/schriften/
Es gibt Browser – insbesondere manche ältere Browser – die die Schriften nicht darstellen können. Für die Schriftenseite ist das natürlich ungeschickt, aber für den Alltagseinsatz ist es kein Problem, denn mit Angabe von Alternativschriften wird alles korrekt angezeigt, nur eben nicht so hübsch.
@font-face
Die Einbindung der Schriften, die dann vom jeweilien Browser runtergeladen und angezeigt werden, mache ich mit @font-face im CSS. Im Internet Explorer sollte es wohl bereits ab IE 6 klappen, zumindest bei meinen Tests. Aktuelle Browserversionen von Opera, Safari, Chrome usw. kommen gut damit zurecht, der Firefox kann es seit Version 3.5. Der Konqueror mag bei mir nicht, obwohl ich die Einbindung so mache wie auch empfohlen. Unterm Strich sind die Schriften für mich ein zusätzlicher Hingucker, schön wenn es angezeigt wird, aber wenn es halt mal nicht klappt ist es auch nicht schlimm.
Ladezeit für Schriften
Auf einem üblichen Rechner mit DSL fällt es kaum auf und durch Angabe etwaige bereits vorhandener Systemschriften muss auch nicht in jedem Fall die Schrift geholt werden. Der Browser speichert die Schriften, damit ist es schlimmstenfalls beim ersten Aufruf nötig die Schriften zu holen. Für den üblichen Webeinsatz spricht also nichts dagegen es zu nutzen.
Mobile Geräte
uteles Blog brauchte im explizit abgewählten mobile-Theme auf dem iphone im lokalen Netz rund 3 Sekunden, mit ein bissel weniger starkem Zugang ist das dann keine so gute Idee. Sprich beim Einsatz im Alltag wäre es sinnvoll mobile Themes anzubieten, die ohne die speziellen Schriften auskommen.
Freie Schriften und Umlaute
font-squirrel bietet eine große Auswahl und eine Schrift kann mit einem Kit runtergeladen werden, mit dem die Einbindung dann recht einfach klappt, siehe auch: @font-face-Tipp
Leider ist in der Übersicht nicht erkennbar, ob eine Schrift mit Umlauten zurecht kommt, das lässt sich mit dem Testdings probieren, da wird angezeigt, was man eingibt. Es gab einige Schriften, die mir gut gefallen haben, die jedoch deshalb nicht in Frage kommen, weil sie keine Umlaute darstellen. Die ein oder andere, die ich jetzt mit eingebunden habe, kommt mit dem “ß” nicht zurecht. Je nach Einsatzzweck, kann das für Überschriften jedoch trotzdem noch akzeptabel sein. Keine Umlaute sind dagegen ein klares no-go.
Effekte und Probleme
Einige Schriften sind sehr verspielt und damit schwer lesbar, aber für spezielle Überschrifteneffekte oder andere spezielle Ansichten ist das ja durchaus mal akzeptabel. Die ein oder andere Schrift bietet nicht alle Font-Formatierungen an, die CSS an sich kennt. Teils übernimmt dann der Browser die Darstellung, das klappt nicht überall so hübsch, wie bei Schriften, die selbst einen fetten oder kursiven Stil anbieten.
Alles wird gut 
Noch ist nicht alles gut, ein Browser ist nach wie vor keine Textverarbeitung mit allen Möglichkeiten von Schriften. Aber aus meiner Sicht ist es ein großer Schritt weg von Webseiten, die nur mit den paar üblichen Schriften auskommen müssen, die bislang im Web einigermaßen übergreifend unterstützt wurden. Was mir gut gefällt ist das problemlose Fallback auf Alternativen und dass eine Schrift nicht jedesmal runtergeladen werden muss. Ein klarer Vorteil für Stammleser einer Seite. Wenn sich die Schriften verbreiten, wird es auch seltener, dass eine Schrift noch nicht installiert ist.
Es ist noch nicht alles gut, es braucht noch intensives Testen im Umgang damit, aber ich bin fürs Erste völlig zufrieden, dass es jetzt einen Weg gibt, der ohne Flash, Bilder oder sonstige Krücken auskommt um eine besondere Schrift anzubieten.
Ähnliche Beiträge
Wir erstellen Webseiten, Blogs, Webapplikationen und mehr...
Der Beitrag wurde am Dienstag, den 20. September 2011 um 09:40 Uhr veröffentlicht und wurde unter tipps, web abgelegt.
Dir gefiel der Artikel? Dann abonniere doch den RSS Feed 
oder abonniere die Beiträge per E-Mail. Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen.
Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
