Cufon - fonts for the people

In attesa che lo standard CSS3 ci permetta di utilizzare la direttiva @font-face nella dichiarazione delle famiglie di caratteri (e magari di non dover ricorrere a formati diversi EOT TT etc per 'coprire' i diversi browser) esiste una valida alternativa come sempre basta di Javascript, un linguaggio che non solo non risente dell'età ma innerva sempre più le soluzioni avanzate per il web.
Parlo di cufón - fonts for the people, una libreria Javascript per il font replacement grazie alla quale possiamo inserire qualunque tipo di carattere (purché la  licenza d'uso ne permetta l'inclusione in file XHTML), senza dover per forza limitarci a utilizzare font di sistema sicuramente presenti sui pc dei navigatori.
Le uniche due limitazioni, ma davvero minime a fronte dei benfici che ci consente dal punto di vista grafico, sono che il testo 'scritto' con Cufon non è selezionabile e il Js non supporta la giustificazione.
L'utilizzo di Cufon è davvero semplice: per prima cosa occorre scaricarsi lo script, di cui non pubblico il link diretto poiché viene spesso aggiornato, dal sito  è evidentissimo il pulsante di download!

Il secondo passo è generare il file Javascript contenente l'oggetto JSON che descrive il nostro font, passaggio reso estremante semplice dall'abbondante spiegazione (in inglese) che il modulo di conversione on line fornisce.
Ottenuti i due file inseriamo nella sezione head del nostro documento le istruzioni


 
  <script src="js/cufon.js" type="text/javascript">
  <script src="js/nome.font.js" type="text/javascript">

 
sempre facendo attenzione ai percorsi!
Le API di Cufon prvedono diversi metodi, illustro il più semplice e immediato (non che gli altri sian complessi, ma per quelli invito alla consultazione della documentazione online ...), il metodo Cufon.replace().
Come primo parametro dei due possibili Cufon richiede il tag da utilizzare per il rimpiazzo del font, ad esempio
 

<script type="text/javascript">
			Cufon.replace('h1', { fontFamily: 'Italia Std' });
		</script>

Tutti i testi inseriti in header1 saranno visualizzati con il nostro font!
Il secondo parametro è opzionale e prevede fontFamily hover separate textShadow (vedi doc).
La flessibilità di Cufon ci permette moltissime cose, sempre invitando a consultare la documentazione ufficiale sopra indicata vediamo come fare a non far applicare nel nostro esempio Cufon indiscriminatamente a tutti gli elementi H1:
 Cufon.replace('h3:not([class=noreplace])');
semplicemente indicando allo script che in presenza di una determinata classe non deve esercitare la trasformazione.
 
Per concludere, al termine del documento inseriamo
  <script type="text/javascript>

<!-- Cufon.now(); // -->

</script>

 
 

Semplicissimo no? E chi smanetta sui CMS? Per Wordpress lo trovate qui, per Joomla lo trovate qui ...