Webfonts – ein Selbstversuch

Nur damit ich meinen Schützlingen irgendwann mal erzählen kann, wie man »echte« Schriften auf seine Website bringt, habe ich mich heute dem typekit Selbsttest unterzogen.

In den letzten Monaten wurden auf allen online Kanälen die verschiedenen technischen Möglichkeiten diskutiert – über einen online-Service ausleihen (typekit, kernest etc.) oder für’s web linzensieren und im web-Format in die website einbauen (EOT/light, WOFF etc.).

Der Service von typekit wurde nach ein paar Monate Testbetrieb vor wenigen Wochen für alle freigeschaltet, aber so richtig verlockend und vor allem gut lesbar fand ich kaum eine der angebotenen Schriften.
Gestern dann gingen Teile der fontfont-Bibliothek von FontShop International online. Ein guter Grund, noch einmal näher hinzuschauen.

Zuerst ist jedoch immer noch desillusionierend festzustellen, dass bezüglich guter Darstellung auf dem Bildschirm keine der angebotenen Schriften den gut gehinteten Systemkollegen Georgia, Lucida et al das Wasser reichen kann. Meines Erachtens nach sollten die neuen Möglichkeiten lieber für Überschriften und ähnliches genutzt werden, als allen Lesetext im Netz in einen großen Haufen Matsch zu verwandeln. Das kann jeder selbst im »specimen« Bereich der typekit-Website ausprobieren, wo die Schriften auch in kleineren Größen und leichteren Schnitten dargestellt sind oder auf den ersten webfont-specimen-Seiten, die sich aufgemacht haben, beim Beurteilen der Schriften mit realistischem content zu helfen.

Wir bringe ich nun solche Schriften auf meine website?

Ich habe einen kostenlosen trial-account bei typekit angelegt. Ein simple Sache von 20 Sekunden. Die Website ist schön und übersichtlich, die Preisgestaltung und Beschreibung der Features der einzelnen Abo-Varianten, plans genannt, transparent. Es gibt, neben dem kostenlosen, einen einfachen Plan für 16,80 Euro im Jahr mit fünf Schriften, einen mittleren »Portfolio«-Plan mit unbegrenzt vielen Schriften zu 33,70 und einen für heavy-user und knapp 170 Euro.

Als zweites gibt man die url seiner Website ein, auf der die Schriften erscheinen sollen. Sodann bekommt man zwei Zeilen Java-code ausgespuckt, den man bitte auf seiner Seite plaziert und zwar dort, wo das mit dem header steht.

Das war nach weniger als einer Minute Vorbereitungszeit bisschen viel für mich. In einem cms-organisierten blog muss man als Anfänger erst mal rausfinden, wo sich eine solche Datei vielleicht befinden könnte. Glücklicherweise ergooglete ich mir ein wp-plugin, das die nötigen Zeilen an der richtigen Stelle automatisch einsetzt. Nach leichtem installing-hassle hatte ich so nach gut 20 Minuten dann den code irgendwo vergraben.

Jetzt darf man endlich auf die Seiten mit den Schriften, um sich unter den eher unbrauchbaren trial-library-fonts die am wenigsten unbrauchbaren rauszusuchen. Wollen wir das hier wirklich auf websiten lesen? Natürlich nicht. Typekit bietet mir ja auch an, in meinem »kit« für jede Schrift zu spezifizieren, welche Arten von Text auf meiner Seite darin erscheinen sollen:

Was? Ich habe hatte keinen Schimmer, was ein selector ist, geschweige denn, wie einer heisst, den ich gerne hätte. Aber es gibt ja css tutorials im Netz, die muss man eben schnell mal in fünf Minuten überfliegen. Und einfach alles in das Selektor-Feld schreiben, was halbwegs nach Überschrift klingt, also h1, h2, auf »publish« drücken … nichts tut sich. Dann eben im (zugegeben sehr sehr gut gemachtem) support-forum schauen. Leider hat kaum einer eine so blöde Frage, wie ich. Ich schnappe Begriffe wie .post h1 a auf und begebe mich parallel in die Abgründe meiner stylesheet-Dateien. Immer noch nichts auf meiner Seite zu sehen.

Alle Hemmungen sind verflogen, ich suche nach Fragmenten, wo etwas mit »Georgia« vorkommt und gebe wahllos Begriffe wie .entry-title in den typekit-editor ein, kommentiere Schriftstile im stylesheet mutig aus, hoffe, dass mir nicht gleich alles um die Ohren fliegt. Und siehe da, einer meiner Selektoren muss wohl richtig gewesen sein. Es erscheint eine fette unförmige Überschrift. Ein webfont. Ich bin dabei. Ich mache mit. Aber mit code und so reicht mir erst mal für heute.

Vielleicht finde ich irgendwann noch mal heraus, wie all die anderen, die keinen browser haben, der webfonts unterstützt (IE) meine alte fette Georgia sehen können und wir hier einen leichteren Schnitt der FF Enzo. Vielleicht ist das aber auch nicht so wichtig. Wenn mich die dezente Werbeanzeige, die sich heute auf meine website unten rechts geschlichen hat, nervt, versuche ich den Belzebub eben wieder mit kreativer code-Jonglage loszuwerden.

[update 2011: inzwischen verwende ich die Schrift Ibis RE auf dieser Seite, serviert von Webtype.]