Web font, ovvero il ritorno di @font-face

This is an old article, from a time I thought I’d be writing this blog in Italian. Now I’ve changed my mind and everything new is supposed to be in English. Since there is nothing particularly interesting or original in these old posts, I’ll just leave them here in Italian. If you can’t read Italian, you’re not missing much.

Ormai non passa giorno senza che qualcuno mi chieda come includere i font in una pagina web, cosa che un tempo risultava impossibile e costringeva controvoglia a usare delle immagini quando si doveva assolutamente usare un determinato font.

Partendo dai due fondamentali post del solito Paul Irish, vediamo come funziona @font-face e perché funzioni così.

Aggiornamento 11 aprile 2011: La sintassi che viene descritta in questo articolo è stata superata da una più nuova, ne parlo in quest’altra pagina dedicata all’argomento. Potete comunque leggere anche questa pagina per le motivazioni che stanno dietro alla sintassi.

@font-face {
     font-family: 'MioFont';
     src: url('MioFont.eot');
     src: local('☺'), 
          url('MioFont.woff') format('woff'),
          url('MioFont.ttf') format('truetype'),
          url('MioFont.svg#webfonttGgFgCkX') format('svg');
     font-weight: normal;
     font-style: normal;
     font-variant: normal
}

La dichiarazione (da mettere nel file CSS) sembra complessa, ma in realtà è semplicissima.
Innanzitutto si definisce come si chiamerà il font quando lo richiameremo con font-family.

Dopodiché si passa a definire i vari formati dei file:
il file .eot serve per Internet Explorer, dal 4 (!) in poi;
il file .woff serve per Safari, Chrome, IE dal 9 e Firefox dalla 3.6;
il file .ttf (o .otf) serve per versioni la 3.5 di Firefox, per versioni vecchie di Safari e Chrome e per Opera dalla 10 [EDIT, 24/11/2010: dalla versione 4.2 di iOS, uscita ieri, .ttf è supportato anche da iPhone, iPod e iPad.];
il file .svg serve per iPhone/iPod/iPad.

Se volete più dettagli sul supporto li potete trovare su webfonts.info.

Il .woff è il migliore tra tutti i formati, anche perché è già compresso. Uno degli aspetti da tenere in considerazione quando si parla di web font infatti è anche il peso. Tranne in casi eccezionali è meglio non includere 20 font diversi in una pagina (o un sito), perché peserebbe parecchio e, probabilmente, sarebbe anche brutta da vedere.

La faccina ☺ che vedete indicata in “local” serve per escludere che qualcuno possa avere un font che si chiama in quel modo. Infatti “local” servirebbe a indicare il nome di un file che un utente potrebbe avere già installato, per evitare lo scaricamento del file stesso. Risulta però una soluzione migliore evitare questo (remoto) caso, anche perché nessuno ci assicura che il suo file corrisponda davvero al font che noi vogliamo. Perché includere “local”, quindi? Perché Internet Explorer non lo capisce… e quindi si ferma (dopo aver scaricato il suo file .eot). Senza “local”, Internet Explorer continuerebbe e scaricherebbe anche gli altri file, per lui totalmente inutili! Inoltre cercherebbe di usare l’ultimo valore, da lui non supportato… e quindi niente web font.

Ma dove trovarli questi font utilizzabili sul web? Per fortuna, nell’ultimo anno, sono nati diversi siti che forniscono questi font… siti che seguono modalità di commercializzazione molto diverse. Font Face Face Off riassume questi vari servizi in una semplice tabellina, ma vediamo brevemente i vari modelli:
- Gratuito, con download: la cosa forse più semplice e che molti preferiscono. Una volta scaricati i font, li si possono mettere direttamente sul proprio sito e servirli direttamente da lì. I kit di download forniscono già tutti i formati e il codice CSS di esempio (es. Font Squirrel);
- Gratuito, con hosting sul sito del fornitore del servizio: in genere con limitazioni al numero dei domini e delle visite. E con l’obbligo di mostrare un badge. (es. TypeKit, Fonts.com);
- A pagamento, con download: come sopra, con una cifra che si paga una sola volta all’atto dell’acquisto (es Fontspring);
- A pagamento, con hosting sul sito del fornitore del servizio: come sopra, senza limitazioni (o limitazioni più larghe) e senza badge (es. TypeKit, Fonts.com).

Se invece già avete un font la cui licenza permette l’utilizzo sul web, potete crearvi da soli il “kit” usando il generatore di Font Squirrel.

Ricordate, se servite direttamente i file dal vostro server, di aggiungere al vostro web-server il supporto per i file .woff e .svg, perché potrebbero non essere supportati nativamente. Su Apache basta aggiungerli nel file .htaccess. Ecco la sezione completa del supporto font (dall’HTML5 Boilerplate, tanto per cambiare):

AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType font/woff                      woff

Su IIS invece, nel web.config in <system.webServer> <staticContent>

<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />

Un “problema” (se lo si vuole considerare tale) che spesso sorge con i web font è il cosiddetto FOUT (Flash of Unstyled Text) su Firefox, quella frazione di secondo prima che Firefox riesca a caricare i font in cui mostra il testo nel suo font “normale”. Solo con Firefox succede e la soluzione più semplice è quella di utilizzare la libreria JavaScript Modernizr. Che in realtà serve a mille altre cose (di cui parleremo un’altra volta), ma che nella sua recentissima versione 1.6 sistema anche questo problema.

Infine, brevemente, una curiosità. Tutto questo, in realtà, non ha assolutamente niente a che fare con l’HTML5. Infatti, non solo, ovviamente, si sta parlando di CSS (che non fanno parte dell’HTML), ma @font-face in realtà non è nemmeno una novità del CSS3, essendo già presente nella CSS2 Recommendation del 1998! Vero è che @font-face è stato poi rimosso nelle versioni successive (2.1, ma nella 3 è tornato), non essendo ancora pronto per il mondo. Internet Explorer comunque lo integrò subito – cosa più unica che rara – ma con il suo formato proprietario .eot, che per molti anni è stato difficile da ottenere. In realtà sarebbe stato comunque anche abbastanza inutile, non essendo supportato da nessun altro browser. Solo da poco più di un anno, con l’introduzione in Firefox 3.5 e in Chrome, i web font sono diventati realtà, una realtà che può “liberarci” dai soliti Arial, Tahoma e Verdana.

Aggiornamento 11 aprile 2011: La sintassi più aggiornata la trovate in quest’altra pagina dedicata all’argomento.

3 Comments

  1. It’s hard to find your website in google. I found it on 20 spot, you
    should build quality backlinks , it will help you to
    get more visitors. I know how to help you, just search in google – k2 seo tricks

  2. Please let me know if you’re looking for a article author for your blog.
    You have some really great articles and I believe I
    would be a good asset. If you ever want to take some
    of the load off, I’d love to write some articles for your blog in exchange for a link back to mine.
    Please shoot me an email if interested. Thanks!

  3. I read a lot of interesting content here. Probably you spend a lot
    of time writing, i know how to save you a lot of work,
    there is an online tool that creates readable, google friendly posts in minutes, just search in google – laranitas free content
    source

Leave a Reply

Required fields are marked *.