Come utilizzare qualunque font nelle pagine web con Cufon

Uno dei più grandi limiti del web per i designer è la ristretta scelta data dai font utilizzabili sul web. Normalmente è possibile definire una o più famiglie di font tramite la proprietà font-family nei css, esprimendo tramite l’ordine quale famiglia utilizzare nel caso l’utente non abbia installato un determinato font.

Il grande problema è rappresentato dal fatto che non tutti i sistemi operativi hanno gli stessi font installati e solo poche famiglie di caratteri risultano comuni a tutti gli utenti.

Per far fronte a questo problema ed avere la possibilità di utilizzare un qualunque font su una pagina web è possibile utilizzare una tecnici di font replacement (nota anche come sIFR).

Esistono numerose tecniche per raggiungere il proprio obiettivo, una delle più recenti e funzionali è Cufon.

Cufon permette la sotituzione del normale web font con un altro, tramite uno script Javascript che utilizzando VML e Canvas permette una rapida sostituzione del testo con il carattere desiderato senza modificare il codice html.

Per iniziare ad utilizzare Cufon, creiamo una pagina html con del testo al quale sostituiremo il font con quello desiderato.

Come secondo step scarichiamo lo script di cufon, salviamolo in un file .js e colleghiamolo alla pagina html.

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

Ora andiamo a scegliere un font da utilizzare nella pagina (per questa operazione è indispensabile avere il file del font) ed utilizziamo lo script generator presente sul sito di Cufon .

Con questo comodo tool otterremo un file .js contenente tutte i dati per sotituire il font originale con quello desiderato.

Vediamo nel dettaglio i campi e a cosa servono:

Regular typeface - Campo obbligatorio, qua dovrete selezionare il file del font presente sulla vostra macchina

Bold typeface , Italic typeface, Bold Italic typeface – Campi opzionali, se il vostro font possiede un file per il grassetto, italico e il grassetto italico aggiungete in questi campi i rispettivi files. Questo passaggio è indispensabile per renderizzare il grassetto, l’italico e il grassetto italico di un font nella pagina web.

Use the following value as the font-family of the generated font – Serve per definire una nomenclatura standard per i diversi files che verranno generati ed evitare errori nei collegamenti.

EULA - Campo obbligatorio, con questo checkbox si conferma di avere il diritto di utilizzare un determinato font secondo la legge sulle proprietà d’intelletto.

Glyphs – I checkbox seguenti richiedono quali caratteri utilizzare dalla famiglia font, come suggerito nel form è sconsigliabile utilizzarli tutti in quanto il file risulterebbe molto pesante. Una buona combinazione è data da “uppercase”, “lowercase”, “numerals”, “punctation” e “basic latin” che mette a disposizione maiuscole, minuscole, numeri e punteggiatura mantenendo le dimensioni del file contenuto. E’ anche possibile aggiungere caratteri specifici non compresi nei precedenti checkbox tramite il form al termine di questa parte.

Security – In caso di font commerciali può essere obbligatorio limitare l’utilizzo di un font a uno o più domini, inserire gli url nel campo per limitarne l’utilizzo.

Scale the font to the following size - Permette di scalare il corpo del carattere riducendo così il peso dei singoli caratteri nella pagina. E’ consigliabile mantenere comunque un corpo superiore alle 256 unità per preservarne la qualità.

If allowed, optimized paths may differ from the original by at most – Definisce di quante unità rispetto all’originale verrà ottimizzato il singolo carattere, è sconsigliabile utilizzare quest’opzione per font con corpo ridotto.

Include kerning table – Aumenta la leggibilità del carattere ma anche il peso del javascript generato.

Gli ultimi due campi sono rispettivamente relativi alla condivisione dei dati e all’accettazione dei termini e delle condizioni del servizio.

Una volta completato cliccate sul pulsante in fondo e verrà generato uno o più files javascript con il nome del vostro font e il corpo (es.Marketing_Script_400.font.js), scaricatelo e linkatelo alla pagina html.

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

Ora è possibile inserire il codice javascript nella pagina per definire a quale applicare il font replacement

<script type="text/javascript">
   Cufon.replace('p');
</script>

E’ possibile definire anche più elementi a cui applicare la sostituzione

<script type="text/javascript">
  Cufon.replace(['h1','p']);
</script>

Esistono inoltre una serie di opzioni aggiuntivi per il funzionamento dell’hover o per l’utilizzo di sfumature di colore sul carattere, per una completa lista delle opzioni consultare la sezione styling del sito di Cufon.

Per un corretto funzionamento di Cufon la pagina html deve avere un doctype di tipo strict, inoltre per ottimizzare la velocità di rendering su ie si deve aggiungere questo script subito dopo il tag body

<!--[if IE]>
  <script type="text/javascript"> Cufon.now(); </script>
<![endif]-->

Una volta completati questi passaggi potete vedere un risultato simile a questa demo.

Coma abbiamo visto Cufon richiede poco tempo per l’implementazione e garantisce un ottimo risultato nonostante ciò ha i suoi limiti, vediamo di fare un bilancio di questa tecnica:

Vantaggi

- Semplice implementazione

- Compatibile su tutti i più recenti browser

- Non modifica il codice html

- Mantiene il codice leggibile per i motori di ricerca

Svantaggi

- Peso dei file javascript

- Esecuzione lenta su grandi quantità di testo

- Obbligatorio l’utilizzo di un doctype strict

Conclusioni

Nonostante i limiti rimane al momento la miglior tecnica di font replacement per prestazioni e qualità, c’è da sperare che in immediato futuro tutti i browser supportino le nuove specifiche per l’html 5 e migliorino i tempi di esecuzione del javascript in modo da avere migliori prestazioni sul rendering della pagina con questa tecnica.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , , . Contrassegna il permalink.

5 risposte a Come utilizzare qualunque font nelle pagine web con Cufon

  1. Nicolò scrive:

    Avevo usato questo metodo per “accontentare” qualche cliente,
    per blog o siti con molto materiale secondo me il limite più fastidioso è quello di non poter selezionare il testo, e per uno che come me vive di tasto destro su parola selezionata e “cerca su Google” e dura :-)

  2. graficando scrive:

    e di typekit cosa ne pensi?

  3. Andrea scrive:

    Ciao seguendo le tue indicazioni sono riuscito a usare cufon mi funziona su ie7 solo se nn meto:

    Cufon.now();

    • Mauro Accornero scrive:

      Cufon.now() serve per forzare l’esecuzione di cufon, si utilizza in internet explorer per evitare che i tempi di caricamento lenti (dovuti al motore di rendering trident) mostrino all’utente un fotn generico ed in seguito il font replacement. Puoi provare ad utilizzare i commenti condizionali per ie7 ma a mio pare anche nel caso provassi con un font replacement da css che è più leggero avresti comunque un primo rendering con il font che imposti di default nel css. Questa problematica è dovuta principalmente ai tempi di esecuzione del javascript su internet explorer, il mio consiglio è quello di lavorare sull’ottimizzazione dei tempi di caricamento, ridurre le dimensioni delle immagini, dell’html, css e javascript nel caso utilizzare smartoptimizer che aiuta a gestire la cache del sito e di cui trovi un articolo su questo blog. Puoi ottimizzare la pagina ma oltre un certo limite dipende dal browser che si utilizza e su quello purtroppo non ci si può fare nulla a parte cambiare browser.

  4. Davide scrive:

    Questo post mi è servito moltissimo. Grazie a te e a tutti coloro che decidono di non tenere tutta la conoscenza per sé ;)

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>