@font-face

Il metodo @font-face del CSS3 per includere i font non di sistema sulle proprie pagine web è riconosciuto ormai da tutti i principali browser. È interessante notare che Internet Explorer lo supporta già nelle versioni IE6, IE7 e IE8, particolare fondamentale per essere considerato una reale soluzione cross-browser. In questi vecchi browser, tuttavia, la retro compatibilità sussiste solo incorporando font TTF impacchettati come EOT (un utile strumento a questo scopo è EOTFast, un convertitore gratuito di font da TTF a EOT compresso).

Alcuni servizi online come Font Squirrel, offrono font già "impacchettati" nei seguenti formati:

  • TTF - Per quasi tutti i browser, eccetto IE e iPhone
  • SVG - Per iPhone e iPad
  • EOT - Solo per IE
  • WOFF - Emergente, formato compresso, simile a eot

Anche Font Squirrel offre una discreta libreria di font tra cui scelgiere (gratuiti o a pagamento). Rispetto alla soluzione Google Web Fonts, però, qui potrete pure convertire un font in vostro possesso (sempre nel rispetto delle licenze di utilizzo!) tramite l'applicazione @font-face generator.


Utilizzo

Dopo aver selezionato dal sito ufficiale www.fontsquirrel.com/fontface il font, il subset di caratteri ed i formati che volete incorporare nelle vostre pagine web, scaricate il webfont kit contenuto nel file ZIP indicato ed estraetelo nella cartella del vostro progetto. Volendo ad esempio includere il noto font Lobster, dovremo utilizzare il seguente codice:

<style type="text/css" media="screen">
@font-face {
    font-family: 'Lobster13Regular';
        src: url('Lobster_1.3-webfont.eot'); /* IE9 Compat Modes */
        src: url('Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('Lobster_1.3-webfont.woff') format('woff'), /* Modern Browsers */
        url('Lobster_1.3-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
        url('Lobster_1.3-webfont.svg#Lobster13Regular') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
</style>

A questo punto basterà usare nei vostri stili il nome del font in uno dei modi seguenti (è sempre bene specificare anche un font alternativo o di default):

>h1 { font-family: 'Lobster13Regular', cursive; }
#titolo { font-family: 'Lobster13Regular', serif; }
.paragrafo { font-family: 'Lobster13Regular', sans-serif; }

 

Demo

Esempio di utilizzo di @font-face per includere in una pagina web il font Lobster, scaricabile gratuitamente da Fontsquirrel.

 

Per commenti, scriveteci.