Webfonts – Besserung in Sicht!

15 Juli 2010
Armin Göpfert

Bisher waren Screen-Designer bei der Gestaltung von Internetseiten auf Systemschriften- und grafiken beschränkt, weil es bisher keine wirklich stabile und Cross-Browser konforme Alternative gab. Man konnte sich damit behelfen, in dem man die gewünschten Schriften als Grafiken anlegte, doch der Nachteil bei Grafiken ist, dass diese im HTML nur als <img /> Tag im Code stehen und nicht als HTML-Text.

Im Zeitalter von SEO (Search Engine Optimization) verschenkt man beim Einsatz von Grafiken wertvolles Potential bei Google. Üblicherweise werden Headlines zwischen <H1> Tags platziert. Google wertet diese aus und listet bei einem Suchtreffer die relevanten Internetseiten im Suchergebnis. Wenn zur Gestaltung der Überschriften nur Grafiken eingesetzt werden, verschenkt man dieses doch sehr wichtige Potential.

Für mich gibt es 3 verschiedene Ansätze, individuelle Schriften ohne Einsatz von Grafiken für die Ausgabe im Browser zu nutzen.

Methode: sIFR

Bei dieser Methode wird der Font aus einer Kombination von CSS, JavaScript und Flash erzeugt. Diese Technologie funktioniert zu 90% mit allen modernen Browsern. Doch es gibt auch Nachteile dieser Methode. Wenn im Webbrowser das Flash-Plugin oder JavaScript abgeschaltet ist, wird die Schrift nicht gerendert, sondern es wird alternativ auf eine Systemschrift zurückgegriffen.

Diese Einschränkung ist aber gut zu verkraften, da heute fast alle Internetuser das Flash-Plugin und JavaScript aktiviert haben. Ein wirklicher Nachteil für sIFR ist, wenn noch andere Flash-Objekte (Intros, Videos, Banners etc.) in einer Seite integriert sind. Denn hier kann man je nach Aufbau Probleme mit den Ebenen (z-index) bekommen. Zum Teil verdecken gerenderte Texte vorhandene Flash-Objekte, was zu unschönen und nicht akzeptablen Effekten führen kann. Auch die Pixel genaue Positionierung der gerenderten Schrift ist ein Problem.

Infos unter:

http://wiki.novemberborn.net/sifr3/

Methode: cúfon

Bei dieser Methode wird über ein Script der gewünschte Font (TTF, OTF, PFB, Postscript) in Vektoren umgewandelt und per JavaScript in die Webseite eingefügt. Diese Methode funktioniert auch in allen modernen Browsern. Cúfon benötigt nicht wie sIFR zusätzlich Flash, da die Ausgabe komplett über JavaSript funktioniert. Das Zusammenspiel mit anderen Objekten und unterschiedlichen Ebenen funktioniert gut.

Die Schrift wird über ein <canvas> Objekt per JavaScript in das HTML eingefügt. Hier allerdings kann es auch wie bei sIRF beim Wunsch einer pixelgenauen Positionierung zu Problemen kommen. Cúfon konvertiert nur Schriften die keinem Copyright unterliegen. Über die cúfon Webseite werden beim Schriften-Upload diverse Einstellmöglichkeiten geboten, welche für den Designer sehr hilfreich sein können. Alles in Allem eine sehr gute Lösung, individuelle Schriften im Web einzusetzen.

Infos unter:

http://cufon.shoqolate.com/generate/

Methode: @font-face

Diese Methode bettet über CSS @font-face {font-family: ‘meineSchrift ‘ } die gewünschte Schriftart ein. Eine einfache Methode ohne JavaScript und Flash, die eine perfekte Positionierung und genaues Rendern der Schrift ermöglicht. Es gibt für diese Lösung genau zwei Nachteile.

Die Schriften dürfen keinem Copyright unterliegen

Diese Technologie wird bisher nur in aktuellen Browsern wie Safari ab Version 3.1, Opera ab Version 10, Firefox ab Version 3.5 und Google Chrome ab Version 4 unterstützt. Alleinig der Internet Explorer unterstützt diese Methode ab Version 4, die es seit 1997 gibt. FontShop aus Berlin bietet eine Reihe von Webfonts an, die ohne Einschränkungen in Webseiten eingebunden werden können.

Infos unter:

http://www.fontshop.de

http://www.webfonts.info

Mein Fazit:

sIFR – Mit leichten Schwächen eine gebräuchliche Lösung.

Cúfon – Besser als sIFR, da es ohne Flash auskommt.

@font-face – Zukünftig beste Lösung die ich kenne, jedoch funktioniert sie bisher nur bei Einsatz moderner Browser.

  CSS3  HTML5  Sonstiges