201019Okt

Awesome Fontstacks: Schriftarten-Sets erstellen

Um auf einer Website individuelle Schriftarten verwenden zu können, bieten sich inzwischen komfortable Möglichkeiten an, da moderne Browser das Einbetten von TTF-, OTF- oder WOFF-Fonts per "@font-face" erlauben. Durch intelligente Font Stacks können somit entsprechenden Benutzern die gewünschten Schriftarten präsentiert werden, während bei älteren Browsern die Fallback-Fonts verwendet werden.
Auf der Seite Awesome Fontstacks stehen momentan 58 solcher Schriftarten-Sets bereit, die verschiedene Web-Fonts enthalten.

Awesome Fontstacks

Das Schriftbild einer Website kann auf der Seite für verschiedene Bereiche definiert werden: So können Schriftarten für Überschriften, Fließtexte und Dekorationen ausgewählt werden. Als finale Ausgabe erscheint der fertige CSS-Code, der alle notwendigen Deklarationen enthält. Zu den Schriftarten zählen diverse Kreationen wie "Droid Sans", "Coolvetica" oder "Yanone Kaffeesatz". Die Sets sind aufeinander abgestimmt und geben daher insgesamt ein rundes Bild ab. Für Alternativen zur Verdana-Welt finden sich auf der Seite also schöne Exemplare.

Kommentare

Don schrieb am 21.10.2010 #1

danke für den Tip, das hab ich gebraucht :).
War schon am überlegen, mir so etwas in der Art selbst zu basteln, zumindest eine Preview Seite, für verschiedene Fontstacks. …aber wie es meistens ist, gibt immer wen, der hat’s schon gemacht.

..die nehmen glaub ich Paul Irish’s font-face embedding Methode, wenn ich das richtig gesehen hab.

Das Problem, was ich neulich hatte ist, überhaupt rauszubekommen, welche Font im Endeffekt schließlich vom Browser gerendert wird? Der Inspektor bei Webkit Browser zeigt mir auch nur den Fontstack (font-family) unter geerbten bzw. berechneten Styles? Hast du da evtl. eine Idee, ich glaub mit Firebug ist das auch nicht möglich oder – kenn mich da nicht so aus?

Agathe schrieb am 21.10.2010 #2

Das ist eine schöne Alternative zu Google Font Directory: http://code.google.com/webfonts. Diese Methode habe ich bisher bei einigen Projekten verwendet. Danke für den Tipp!

Matthias schrieb am 21.10.2010 #3

Das Projekt ist auf jeden Fall inspirierend :-)

Ich bin nicht sicher, ob man wirklich die final genutzte Schriftart einsehen kann, die der Browser schließlich verwendet. Im Endeffekt wird nur der Schriftname angezeigt und mit dem lässt sich nicht so viel anfangen..