Ci sono numerosi metodi per sostituire gli ormai noiosi fonts supportati dai browser web come Arial, Verdana, Courier, etc con altri “non-nativi” e sicuramente più accattivanti.
Tra i più famosi vorrei citare il vetusto sIFR basato su Flash, la proprietà CSS3 @font-face che sta piano piano prendendo piede, l’ottimo servizio Typekit purtropppo a pagamento e altri metodi basati su javascript come Typeface e Cufón.
Cufón
Senza un motivo ben preciso, forse perché mi sono trovato bene quando ho avuto modo di provarlo, vorrei analizzare il funzionamento di quest’ultimo.
Come precedentemente accennato, si tratta di un metodo completamente basato sui javascript, perciò, chi non li avesse abilitati non vedrebbe alcuna differenza (ma si presuppone che nessuno abbia di questi problemi al giorno d’oggi).
Come si procede?
Nella prima parte del procedimento dobbiamo creare un file javascript che contenga le informazioni riguardo al font che andremo ad usare.
Nella seconda parte andrà applicato alla pagina HTML.
Generare il Font
- Si sceglie il font che vogliamo usare. Con questo intendo che dovremo proprio procurarci il file .TTF .OTF o .PFB e tenerlo a portata di mano. Procuriamoci anche le versioni corsive e in grassetto se riteniamo possano tornarci utili
- Andiamo sul sito http://cufon.shoqolate.com/generate/.
- Nella parte alta della pagina ci sono quattro campi in cui possiamo caricare il file del font nella sua versione regolare, quella in grassetto, quella in corsivo e quella in grassetto corsivo. Solamente la prima è obbligatoria. Nel mio caso, voglio usare la versione regolare e quella in grassetto, quindi caricherò solo queste due.
- Fatto ciò, è importante assicurarsi di aver messo un segno di spunta per accettare l’EULA che dichiara che il font scelto permette il Web Embedding. Per evitare di avere problemi riguardo a questo punto, consiglio vivamente l’utilizzo di font completamente Open Source come quello in esempio (Titillium).
- Saltando tutte le impostazioni che ci vengono messe a disposizione, andiamo in fondo alla pagina e stavolta dobbiamo accettare i termini del contratto del servizio Cufón.
- Let’s do this! Dovrebbe partire il download di un file .font.js contenente tutte le informazioni riguardo al font caricato. Il file in questione potrebbe avere un nome assurdo e molto lungo, possiamo rinominarlo senza problemi.
Applicazione
- Sempre dal sito di Cufón facciamo click su download per scaricare il file javascript (cufon-yui.js) che contiene il “motore” vero e proprio di Cufón.
- Apriamo un foglio HTML e nella sezione <head> carichiamo prima il cufon-yui.js e successivamente il file .font.js del font opportunamente rinominato, assicurandoci che i link siano corretti.
<head> ... <script type="text/javascript" src="js/cufon-yui.js" ></script> <script type="text/javascript" src="js/TitilliumCufon.font.js" ></script> ... </head> - Aggiungiamo un po’ di contenuto fittizio alla pagina. Aggiungiamo anche dei titoli nei tag H1, H2, H3, etc perchè è a questi che generalmente viene applicato il cufon per motivi di accessibilità e per non appesantire troppo i tempi di caricamento della pagina. In definitiva, direi che non è buona pratica sostituire il font a tutto il testo, ma è pur sempre fattibile.
- Tornando nel <head> possiamo finalmente caricare lo script indicando quali tag HTML sostituire con il nuovo font in questo modo.
<script type="text/javascript"> Cufon.replace('h1,h2,h3,h4,h5,h6'); //I nomi dei tag vanno separati con le virgole </script> - Aprendo la pagina HTML nel browser, il risultato dovrebbe essere qualcosa del genere (tutto dipende dalle impostazioni usate nel css).
<h2>Titolo di qualche genere</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p> <h3>Altro titolo lorem ipsum dolor sit amet</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
Ulteriori impostazioni
Quando abbiamo attivato lo script al punto 4, ci siamo limitati a indicare una serie di tag HTML, ma è possibile designare classi o ID specifici utilizzando i selettori CSS.
Se per esempio volessimo applicare il font a tutto ciò che ha la classe “font” basterà indicarla in questo modo.
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
//Usa i classici selettori CSS .font per la classe e #font per l'ID
</script>
Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
//Usa i classici selettori CSS .font per la classe e #font per l'ID
</script>
Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4,h5,h6,.font',{ hover: 'true' });
</script>
Aggiornamento
Se Cufon non dovesse funzionare su browser obsoleti tipo IE6, IE7 o le versioni di Firefox inferiori alla 3.5, potete risolvere il problema caricando un framework javascript (tipo jQuery), prima dell’inclusione di Cufon-yui.js, in questo modo:
<head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="js/cufon-yui.js" ></script> ... </head>
Il problema è dovuto al fatto che questi browser non riconoscono i selettori css tipo .nomeClasse o #nomeId.
Di seguito vi lascio il link ad una pagina demo molto sempliciotta che mostra i risultati ottenuti e il download del pacchetto con tutti i file (compreso il font). Alla prossima! 
Il font usato nell’esempio, Titillium, è completamente Open Source e può essere scaricato nella versione completa dal sito ufficiale.
Sottoscrivi il nostro Feed
Lascia un commento Feed dei commenti