Webfont

In questo post vi spiegheremo brevemente come si incorporano font custom un sito e quali sono i problemi centrali.
La possibilità di incorporare font non installati sul sistema dell' utente esiste già da parecchi anni.
A partire da Internet Explorer 4 (1997) si può includere font per utenti che usano Internet Explorer in un formato proprietario della Microsoft, che si chiama eot.
Fino poco tempo fa (e ancora adesso) non c'era un formato standard di font che si poteva utilizzare. Microsoft promuoveva il suo eot, altri usavano ttf o svg, perciò c'era un caos totale.
Fortunatamente il W3C (l'autorità per lo sviluppo di standard web) si rendeva conto del problema e sceglieva il formato woff come standard universale per l'incorporamento di font.
Attualmente quasi tutti i browser importanti supportano (le versioni più recenti ovviamente) questo formato:

- Firefox a partire dalla versione 3.6
- Opera dalla versione 11.10
- Chrome dalla versione 6
- Internet Explorer dalla versione 9
- Safari e Safari Mobile: No (desktop: ttf, mobile: svg)


L'unico browser a non supportare ancora woff è Safari (sia la versione Desktop che Mobile).
Però anche Safari in futuro con l'uscita di OSX Lion e iOS5 avrà supporto per woff.

Al momento si deve utilizzare seguenti formati per garantire maggior compatibilità:

- woff per i browser moderni
- eot per Internet Explorer < 9
- ttf per Safari Desktop
- svg per Safari Mobile

Il processo di incorporare font ha inizio nella fase di Layout di un progetto con la scelta di scritte.
Per il testo di flusso noi consigliamo di utilizzare scritte di default (cercate su google "websafe fonts" per avere una lista) che sono preinstallati sul sistema dell' utente per evitare problemi come "salti" dell' intera pagina, quando il browser sostituisce le scritte default con quelli custom.
I font custom noi gli usiamo sopratutto per titoli o contenuti speciali come link o citazioni.
I problemi più importanti da considerare quando si sceglie un font per web sono due:

- Il font è ottimizzato per web, cioè è leggibile? (In che dimensioni verrà utilizzata?)
- Sotto che licenza è pubblicizzata?

Se il font è ottimizzato troverete spesso come descrizione nel readme che è incluso in gran parte delle scritte.
Però attenti! La dovete testare su tutti i browser importanti e su Mac e Windows (Ogni sistema e browser ha un rendering dei font diverso).

Ancora più importante è la licenza. Per evitare problemi legali dovete essere sicuri che il font si può incorporare con l'uso di @font-face.
Ogni volta che un utente nuovo apre il suo browser e visita il vostro sito, si scarica automaticamente la scritta sul suo computer.
In quel momento voi siete distributori del file.
Un font può essere pubblicato dall' autore con vari tipi di licenze; ci sono le licenze proprietari e altri come open source (gpl, sil...) e Creative Commons.
La regola principale è: Leggete con cautela la licenza e in caso di insicurezza, contattate l'autore.
E state attenti con nomi di licenze simili: Ci sono vari licenze Creative Commons per esempio, con certi potete incorporare la scritta con altri no.

La parte tecnica dell' incorporamento invece è piuttosto facile:
Prendete la scritta nei formati desiderati e gli mettete in una cartella vicino al vostro stylesheet. Nel stylesheet dovete create un nuovo elemento, il font-face:

@font-face { font-family: 'NomeCustom'; src: url('../fonts/nomefontfile.eot') format('eot'), url('../fonts/nomefontfile.woff') format('woff'), url('../fonts/nomefontfile.ttf') format('truetype'), url('../fonts/nomefontfile.svg#NomeCustom') format('svg'); font-weight: normal; font-style: normal; }

Questo codice definisce che con css potrete in futuro accedere alla font-family "NomeCustom".
L'utilizzo in se è business as usual:

h1 { font-family: 'NomeCustom'; }

Ecco, siamo già arrivati alla fine del nostro piccolo viaggio nel mondo dei webfont.
Una fonte utile per trovare scritte per web è www.fontsquirrel.com dove troverete font gratuiti ottimizati per web. Sotto il punto "@font-face kits" potrete scaricare kit completi dei font già pronti con un file html d'esempio.