Skip to content

Schriften mit @font-face

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.

Trackbacks

Keine Trackbacks

Kommentare

Noch keine Kommentare

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck