Font nuovi nelle nostre pagine web - Typeface.js e simili

Quando creiamo il tema di un sito web ci capita spesso di pensare (o utilizzare, magari negli schemi grafici) a caratteri particolari. Purtroppo, come molti di voi sapranno, esiste una lista sicura (caratteri compatibili e visualizzabili nei vari sistemi) di font molto limitata.

Per ovviare al problema si possono usare immagini, filmati flash, ecc. Un’altra soluzione è l’utilizzo di alcuni javascript ad-hoc che pensano a visualizzare il testo correttamente con il carattere da noi scelto.

Uno di questi servizi è Typeface.js.

Typeface.js

Grazie a Typeface.js in pochi passi possiamo mostrare il font che vogliamo ai nostri visitatori. L’utilizzo è semplicissimo. La guida ci indica i 3 passi necessari:

1. scaricare e caricare lo script javascript di typeface.js nella pagina interessata;
2. convertire il font e caricare lo script derivato nella pagina interessata;
3. inserire il testo che vogliamo visualizzare con uno specifico font definendo quest’ultimo nello stile css (esempio:

   <div class="myclass typeface-js" style="font-family: Helvetiker">Testo</div>

   ).

Vi consiglio di leggere la guida per ulteriori informazioni. Per capire il nome del font da utilizzare basta cercare nel js relativo alla voce fontfamily, verso la fine del file.

Nel caso al caricamento del font (per la conversione) visualizzaste l’errore:

Error: This font’s vendor has indicated that it is not permissible to embed this font.

uno dei modi per ovviare al problema è scaricare FontCreator (è disponibile anche una versione demo valida per 30 giorni).

Aprite con questo programma  il font in questione, selezionate Format->Settings quindi la scheda General. A questo punto premete sul pulsante Edit alla voce “Font Embedding - Licensing rights”. Quindi deselezionate la casella “Editable embedding”, confermate (2 volte) e salvate (File->Save as).

A questo punto il font potrà essere caricato senza problemi.

Ricordiamoci di fare attenzione alla pesantezza dei file che utilizziamo.

Ecco dei servizi alternativi:

• Scalable Inman Flash Replacement (sIFR)  - http://www.mikeindustries.com/blog/sifr/ - utilizza flash e javascript;
• True Font Family - http://www.truefontfamily.com/.

NB:
nel caso abbiate notato strani comportamenti del sito in questi giorni, è perché sto cambiando hosting. Pazientate!