Cufón bietet neue typografische Möglichkeiten im Web
Was ist Cufón?
Cufón wurde unter dem Dach von Github Social Coding Network entwickelt. Simo Kinnunen, einer der Entwickler, bietet mit diesem Tool eine einfache Schriftersetzungsmethode mit Schriftsätzen, die nicht dem Webstandart entsprechen – sprich man kann jedbeliebige Schrift im Netz verwenden, sofern sie lesbar ist. Auch die Überschrift der Einträge werden mit Cufón umgesetzt : }

Was macht Cufón?
Es konvertiert die Schriften, die Sie hier sehen sind, in ein propriätäres Format, die eine Render Engine auf Basis von JavaScript nutzt. Es funktioniert also gänzlich ohne Flash oder Bildmaterial, ein grosser Vorteil zum Pendant sIFR. Mehr zur Technik findet ihr hier.

Wir arbeiten jetzt schon seit geraumer Zeit mit Cufón in unseren Kundenprojekten und können nur bestätigen was schon viele vor mir geschildert haben. Die Schrifteinbettung mit Cufón geht sehr leicht von der Hand, zumal man ja nur zwei Javascript Files inkludieren und per Javascript die Klassen (z.B. H1 für Überschriften) definiert, die man gerne umgewandelt haben möchte. Bezüglich Einrichtung von Cufón werde ich weiter unten noch im Detail darauf zu sprechen kommen.

Bevor wir Cufón kannten, nutzten wir sIFR 3 welches aus unserer Erfahrung auch sehr gute Ergebnisse liefert, aber in Punkto Bedienung und Erstellung der Schriftdatei ziemlich kompliziert ist und mit Cufón in diesen Belangen nicht mithalten kann.

Wie richte ich Cufón ein?
Wie schon oben erwähnt benötigt man zwei Javascript Dateien, die man sich zuerst holen muss. Dannach bauen wir die Scripts in eine Beispielseite ein.

1. Zuerst muss man das erste Basis-Javascript herunterladen. Dieses gibt es in der komprimierten oder unkomprimierten Version.
2. Konvertiere eine Schrift Deiner Wahl in eine Javascript-File. Dies geht ganz einfach via Cufón Generator. Wenn Ihr alles richtig gemacht habt, erhaltet Ihr eine Datei die so heissen könnte: Din_400.font.js
3. Nun inkludiert man diese beiden Javascripts in den -Tag Deines Testdokumentes:

   <script src='scripts/cufon-yui.js' type='text/javascript'></script><br />
   <script src='scripts/Din_400.font.js' type='text/javascript'></script>

4. Für den Internet-Explorer müssen wir noch explizit eine Zeile Javascript setzen. Diese wird direkt vor dem gesetzt:

   <script type='text/javascript'>Cufon.now()</script>

   Die Zeile bewirkt, dass die zu ersetzende Schrift beim laden nicht flackert.

5. Nun deklarieren wir welche Elemente mit unserer Schrift ersetzt werden soll. Dieser könnte so aussehen:

   <br />
   <script type='text/javascript'>
   	Cufon.replace('h1');
   </script><br />
   

   oder

   <br />
   <script type='text/javascript'>
   	Cufon.replace('h1')('h2')('blockquote');
   </script>

   Alternativ kann man auch falls man ein JavaScript Framework verwendet wie zum Beispiel jQuery, direkt die Selektoren ansteuern, was man sonst nicht kann.
   Hier ein Beispiel wenn man das Ankerelement mit der ID #nav ansteuern will:

   <br />
   <script type='text/javascript'>
   	Cufon.replace('#nav a')
   </script><br />
   

6. Ihr könnt auch mehrere Schriftsätze auf verschiedene Elemente anwenden.
   Dazu ruft man einfach die Schriften beim Cufon.replace auf:

   <br />
   <script src='Vegur_300.font.js' type='text/javascript'></script><br />
   <script src='Myriad_Pro_400.font.js' type='text/javascript'></script><br />
   <script type='text/javascript'>
   	Cufon.replace('h1', { fontFamily: 'Vegur' });
   	Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
   </script><br />
   

7. Zu guter letzt modifiziert man die zu ersetzende Elemente via CSS, genau gleich wie man es normalerweise tun würde. Beispiel: color: #333;, font-size: 12px; oder text-transform: uppercase;

Das wäre alles! Einfach oder?
Momentan wird Cufón von folgenden Browsern unterstützt: IE 6/7/8, Firefox 1.5+, Safari 3+, Opera 9.5+, und Google Chrome. Für zusätzliche Informationen bezüglich Benutzung, Styling und Hilfestellung findet ihr hier.

Hier einige Testseiten:

Testseite mit BauerBodoni

Testseite mit Eurostile

Testseite mit Voluta

Cufón ist ein fester Bestandteil meiner Webgestaltung geworden, probiert es selbst aus und vielleicht wird das Tool auch Euch in seinen Bann ziehen : ]

Fragen und konstruktive Kritik sind immer willkommen.
Viel Spass beim experimentieren!

Weitere Informationen findet ihr unter:
Sorccu / Cufon [Englisch]
Diskussionsrunde [Englisch]