Web fonts in 5 minuti

Oggi mi rivolgo ai webdesigner che han bisogno di trovare una risposta al classico dilemma dei font standard che si devono usare nei siti. Finalmente nelle specifiche CSS 2 e 3 questo problema è stato risolto.
Riporto qui un’articolo di HTML.it che può essere molto utile: Web fonts con i CSS in 5minuti.

Stanchi dei soliti Verdana, Arial e Georgia? Se la risposta è sì, è bene sapere che oggi è finalmente giunto il momento in cui osare, parlando di tipografia sul web, si può. Per usare i vostri font preferiti e servirli all’utente in un modo facile ed efficace, non è più necessario ricorrere a tecniche alternative come la sIFR, possiamo affidarci a quanto fissato nelle specifiche CSS (2 e 3) a proposito dei cosiddetti web fonts.

Con questa definizione ci si riferisce di solito ai font impostati in un foglio di stile che l’utente può scaricare per visualizzare una pagina secondo le caratteristiche tipografiche fissate dall’autore.

Il fatto che sia un argomento caldo di questi mesi non significa che sia una novità. La svolta deriva dal fatto che oggi è estesa praticamente a tutti i principali browser la possibilità di sfruttare il download di font. Tutto quello che andremo a vedere in questo articolo funziona infatti su Internet Explorer 4 e versioni successive, Firefox 3.5, Safari 3.1 e versioni successive, Opera 10. Al momento su Google Chrome il supporto dei web fonts può essere attivato seguendo queste istruzioni, ma è presumibile che presto, in una delle prossime release, l’opzione sarà impostata di default.

Cosa ci serve: trovare i font giusti

L’unica cosa di cui abbiamo bisogno è… un font! Ma attenzione! Non tutti i font possono essere liberamente distribuiti, essendo la maggior parte protetti da ferree licenze commerciali relative al loro uso. Niente paura però. Per fortuna non mancano sul web eccellenti risorse a cui attingere per trovare font liberamente distribuibili e utilizzabili. Un sito da cui partire è FontSquirrel. Non solo offre una vasta collezione di interessanti caratteri tipografici, ma può aiutarci a superare un grosso ostacolo.

Tra i browser citati in precedenza, infatti, Firefox, Safari e Opera supportano i due formati di font più comuni, TrueType e OpenType. Internet Explorer, invece, supporta il formato EOT.

Significa che nel nostro CSS, se vogliamo servire a tutti i browser lo stesso font, dovremo far riferimento alla versione TrueType (oppure OpenType) e a quella EOT. Ciò comporta quasi sempre la necessità di dover convertire font TrueType/OpenType nel formato supportato da Microsoft. Possiamo farlo usando programmi specifici come TTF2EOT per la conversione da TrueType a EOT, e FontForge per la conversione da OpenType a EOT (ma in questo caso il font dovrà essere prima convertito in TrueType).

Un po’ complicato vero? Ecco allora come FontSquirrel può venirci in aiuto. Il sito offre per ciascun font la possibilità di scaricare un pacchetto zip chiamato ‘kit’. Ogni kit contiene la versione TrueType e quella EOT del font, insieme a un CSS di esempio e a una demo. Comodissimo. Se intendete usare un font non reperibile su FontSquirrel, però, l’unica via che vi rimane è quella della conversione tra formati.

Per l’esempio che andremo a realizzare, abbiamo scaricato due kit, quello del font Black Rose e quello del font ArmWrestler.

Una volta scompattato il paccheto zip, è sufficiente prelevare i file con estensione .ttf ed .eot e inserirli nella cartella da cui saranno resi disponibili per il download all’utente.

Il CSS

Una volta stabilito il font (o i font) da usare, non rimane che mettere mano al nostro CSS. La regola di base che ci serve poggia sulla direttiva @font-face. Ecco il codice usato nell’esempio:

@font-face {
font-family: 'ArmWrestler Bold';
src: url('ArmWrestler.eot');
src: local('ArmWrestler Bold'), url('ArmWrestler.ttf') format('truetype');
}

@font-face {
font-family: 'Black Rose Regular';
src: url('BLACKR.eot');
src: local('Black Rose Regular'), url('BLACKR.TTF') format('truetype');
}

Prima osservazione. Bisogna definire una regola @font-face per ciascun font che intendiamo utilizzare (nel nostro caso sono due).

E ora occhio all’ordine perché è cruciale:

  1. con font-family assegniamo un nome al font; è quello che useremo successivamente quando dichiareremo nel foglio di stile la famiglia di font; possiamo assegnare qualunque nome, ma è sempre conveniente fare riferimento a quello ufficiale del font;
  2. subito dopo, con il primo src, definiamo l’URL del font in formato EOT per Internet Explorer;
  3. infine, impostiamo l’URL del font in formato TrueType (o OpenType); la sintassi è diversa rispetto a quella vista in precedenza perché usando la direttiva local facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina (per approfondimenti su questo aspetto rimando a questo post uscito sul nostro blog).

Fatto. Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell’esempio abbiamo usato solo un elemento h1 e un paragrafo:

h1{font: 42px 'Black Rose Regular', Georgia, serif;}
p {font: 12px 'ArmWrestler Bold', Arial, serif;}

Come si vede, nulla cambia rispetto a quanto già sappiamo. Ci siamo limitati ad aggiungere i nomi dei font stabiliti in precedenza e a impostare i font alternativi, più che mai necessari visto che chi non naviga con i browser già citati non potrà visualizzare i font scaricabili.

Questo è tutto. Il consiglio finale è di valutare sempre due elementi.

Intanto il peso in kb dei font. Font troppo pesanti, su connessioni lente, possono produrre un effetto poco gradevole: fino a quando il download non sarà completo, il testo non sarà disponibile all’utente, almeno alla prima visita, visto che il salvataggio nella cache risolve le cose per le visite successive.

La seconda cosa a cui prestare attenzione è la resa sulle diverse combinazioni browser/sistema operativo. Solo il test diretto potrà farci scoprire se uno specifico font risulta poco leggibile.

I file usati nell’esempio sono disponibili per il download.

Share Button

3 Comments

  1. Bellissimo questo sito, non lo conoscevo ancora, sarà che visito troppo spesso solo siti in inglese.

    Ovviamente mi sono abbonato al feed spero che mi ispiri per i miei prossimi progetti.

    A proposito come hai creato lo sfonto del blog (quello arcobaleno?) hai qualche tutorial da consigliare?

  2. Mi spiace constatare che il tuo bell’articolo ha una piccola pecca…. chi utilizza Chrome, come me, probabilmente non riesce a leggelo o per lo meno io non vedo niente se lo apro col browser della Google, mentre con Explorer e Firefox si.
    ;)

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>