Cufon: una alternativa per visualizzare font non di sistema

Dopo il fenomeno sIFR, ecco arrivare (già da un po', in verità) un'altro sistema facile ed indolore per utilizzare nel nostro sito web font non di sistema.
Chi lavora nel mondo del web design sa che i font di sistema sono quei font che si trovano nativamente in ogni sistema operativo, e che quindi sono installati nel 99% dei computer.
A questa famiglia appartengono:
- font serif (con le grazie): Times New Roman, Georgia
- font sans-serif (a bastoncino): Arial, Tahoma, Verdana, Lucida, Comic Sans (ormai sulla via del declino)
Una via di mezzo tra font serif e sans-serif è il Trebuchet.
Esistono poi altri font che vengono forniti con i sistemi Apple (ad es. Helvetica) e con i sistemi Microsoft (ad es. Calibri), ma non è detto che siano presenti in entrambi i sistemi (ad es. per Windows il font Helvetica è solo a pagamento).

Supponiamo di aver creato la nostra grafica con un bel font handwritten, ad esempio un Rolina (font gratuito - ma accertiamoci sempre che la licenza EULA per il font permetta il Web Embedding senza Adobe Flash)... come fare per mostrarlo correttamente nelle nostre pagine web?

La prima soluzione, quella adottata per anni, è di usare un semplice Image Replacement. Facile, non disturba i motori di ricerca... ma se dobbiamo modificare qualche parola, ecco che ogni volta ci tocca rifare l'immagine con il testo. Un po' scomodo.
La seconda soluzione è il conosciutissimo sIFR, per usare il quale serve comunque avere Adobe Flash.
C'è poi, per CSS 3, la possibilità di usare la nuova proprietà @font-face.

Però la soluzione che voglio illustrarvi oggi è quella con Cufon, e si basa tutta su javascript.

Ecco i semplici passaggi per usare il vostro font preferito nel sito:

1) Andate sul sito ufficiale: http://cufon.shoqolate.com/generate/
2) Selezionate il vostro font (nelle varianti regular, bold, italic e bold italic) ATTENZIONE! Su windows dovrete prima copiare i vostri file font in una cartella diversa da Windows/Fonts.
3) Compilate il resto del modulo e salvate il js che otterrete all'interno del vostro sito.
4) Scaricate l'ultima release di cufon: http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i (alla data attuale) e salvatela all'interno del vostro sito
5) Collegate i due js alla vostra pagina, e indicate nella funzione Cufon.replace() gli elementi che dovranno essere scritto con il vostro font (esempio qui sotto).
6) FINITO! :)

Esempio:
<script type="text/javascript" language="javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" language="javascript" src="js/Rolina.font.js"></script>
<script type="text/javascript">
Cufon.replace('#titolo', {hover: true});
</script>