Ormai da decenni siamo abituati a vedere il web sempre attraverso gli stessi font. Arial? Times New Roman? Georgia? Verdana? Tahoma? Bando alle ciance! Liberiamoci una volta per tutte da questi font web-safe.

Le vedete con lo stesso font le scritte qui sotto?

CoseNonJaviste
CoseNonJaviste Gothic

No? E’ l’ora di cambiare browser!

Un po’ di storia…

Sin dalla notte dei tempi del web solo un tipo di font regnava sovrano, ovvero il Terminal. Con l’avvento della grafica mamma Microsoft ha tentato di creare dei “core fonts for the web“, cioè un set di font presente in tutte le macchine Windows e interpretabile dal browser, con lo scopo di dare un certo standard agli sviluppatori web. Purtroppo il progetto è fallito per motivi di licenze ma i font citati precedentemente sono rimasti come riferimento per il web per quasi la totalità dei siti in circolazione.

Nel mondo della comunicazione il font è fondamentale: rafforza il concetto che con esso viene veicolato a tal punto che può diventare parte integrante di esso. Basti pensare per esempio che General Electric ha un suo font ufficiale (GE Inspira) utilizzato dai dipendenti per scrivere i documenti o che la stessa Microsoft ha progettato il font di Windows Vista e 7 (Segoe UI) in modo che ispirasse sicurezza e robustezza all’utilizzatore del sistema operativo. Perché non applicare questi concetti ad un sito web?

Web font

Sin dai tempi del “core fonts for the web” i browser sono capaci di renderizzare le pagine web con i font presenti sulla macchina che li visualizza: cosa succede però se un sito richiede un font non presente sulla macchina dell’utente? Beh, con molta probabilità verrà sostituito o con un Arial o con un Times New Roman. E’ per questo che esiste la categoria sopra citata dei font web-safe: siamo così sicuri di usare font presenti in tutti i sistemi operativi. Grazie ai nuovi browser che supportano le specifiche CSS3 è possibile indicare al browser dove scaricarsi il font necessario. In realtà si tratta di una specifica CSS2 che però è sempre stata ignorata per nostra sfortuna… vediamo come funziona.

Il piccolo test “CoseNonJaviste” all’inizio del post usa proprio il supporto ai web font del vostro browser: il primo infatti è un semplice testo dentro un tag span, il secondo invece è un’immagine che serve per fare il confronto. Come si ottiene questo risultato? Basta dichiarare in cima alla pagina (o al file css) il seguente codice:

@font-face {
   font-family: "BankGothic";
   src: url('bankgthl-webfont.eot');
   src: url('bankgthl-webfont.eot?#iefix') format('embedded-opentype'),
       url('bankgthl-webfont.woff') format('woff'),
       url('bankgthl-webfont.ttf') format('truetype'),
       url('bankgthl-webfont.svg#BankGothic') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face definisce una nuova font family chiamata “BankGothic”, il cui font può essere reperito dal nostro server in tutti i formati dichiarati dall’attributo src. Avremo potuto caricare esclusivamente il ttf del nostro font sul server, ma per una maggiore compatibilità tra browser è bene fornire formati alternativi. Per semplificarci la vita, ogni produttore di browser ha seguito sempre la sua strada e questo è il risultato… Per riuscire a essere più generici possibile dobbiamo avere a disposizione il font nelle versioni:

  • TrueType/OpenType TT (.ttf);
  • OpenType PS (.otf);
  • SVG (.svg);
  • Embedded OpenType (.eot);
  • Web Open Font Format (WOFF, .woff).

Come fare a reperire tutti questi formati? Semplice, grazie a Fonts Squirrel! Tramite il suo FontFace Generator possiamo dargli in pasto il nostro ttf e ottenere un pacchetto completo di formati alternativi, documentazione d’uso e script css già pronto da incollare nella nostra pagina!

Siamo liberi così di usare tutti i font che vogliamo a condizione che possediamo il file del font e soprattutto che il font non sia vincolato da qualche licenza (questione un po’ spinosa…). Se vogliamo essere liberi invece da qualsiasi responsabilità possiamo affidarci a babbo Google e usare i Google Web Font: ci sono a disposizione diversi font da usare liberamente ed in continuo aggiornamento. Come usarli? Non abbiamo neanche bisogno di scaricarli perché vengono prelevati direttamente dai loro server. Prendiamo per esempio il font Zeyada: carichiamo il font con


e applichiamo font-family: 'Zeyada' al testo interessato, ottenendo:

CoseNonJaviste

Non notate un font particolare? Abbiamo già consigliato di cambiare browser? Purtroppo @font-face non viene riconosciuto dai browser più vecchi, e non possiamo costringervi (ma consigliarvi si!) ad aggiornare il vostro browser. Sul sito WebFonts.info troviamo tutte le informazioni che ci servono come la lista dei browser compatibili o di uno strumento (Modernizr) necessario per determinare se @font-face è supportato da un browser. Tramite Modernizr, si riesce a controllare il caso in cui @font-face non sia supportato da un browser permettendoci di gestire soluzioni alternative.

Piano B: le alternative a @font-face

Fortunatamente c’è sempre il piano B! Se non siamo fortunati e @font-face non è supportato, tramite Modernizr possiamo usare una delle soluzioni alternative, chiamate font replacement che la rete offre.

Cufon

Una delle alternative più usate in rete: esiste anche un plugin per WordPress. Tramite un generatore, trasforma un font ttf in un JavaScript che a runtime, a seconda del browser del client, trasforma i font della pagina in SVG o usa il tag <canvas> dove supportato.

TypeKit

Molto semplice da configurare: basta creare un account, selezionare il font desiderato e caricare il CSS e il JavaScript giusto che si occupa di tutto il resto. Controindicazioni? Scelta limitata di font per l’account gratuito.

sIFR

Scalable Inman Flash Replacement è un font replacement basato sull’uso combinato di Flash e JavaScript per sostituire i font di una pagina. Una delle prime controindicazioni è che, usando Flash, non è supportato da iPhone e da qualche telefono Android di fascia bassa.

FLIR

FaceLift Image Replacement è un font replacement simile al precedente ma usa esclusivamente JavaScript e genera immagini a runtime al posto del testo. Per eseguire la conversione usa veramente il font ttf, non una sua versione in Flash. Anche di questo esiste un plugin per WordPress.

Conclusioni

Abbiamo illustrato diverse tecniche per deciderci ad abbandonare i vecchi web safe font e tuffarci nello spericolato mondo dei @font-face. Per i magnanimi che desiderano mantenere la compatibilità anche con browser più vecchi, l’accoppiata Modernizr + Cufon è altamente consigliata!

83 Posts

Sono un software engineer focalizzato nella progettazione e sviluppo di applicazioni web in Java. Presso OmniaGroup ricopro il ruolo di Tech Leader sulle tecnologie legate alla piattaforma Java EE 5 (come WebSphere 7.0, EJB3, JPA 1 (EclipseLink), JSF 1.2 (Mojarra) e RichFaces 3) e Java EE 6 con JBoss AS 7, in particolare di CDI, JAX-RS, nonché di EJB 3.1, JPA2, JSF2 e RichFaces 4. Al momento mi occupo di ECM, in particolar modo sulla customizzazione di Alfresco 4 e sulla sua installazione con tecnologie da devops come Vagrant e Chef. In passato ho lavorato con la piattaforma alternativa alla enterprise per lo sviluppo web: Java SE 6, Tomcat 6, Hibernate 3 e Spring 2.5. Nei ritagli di tempo sviluppo siti web in PHP e ASP. Per maggiori informazioni consulta il mio curriculum pubblico. Follow me on Twitter - LinkedIn profile - Google+