CSS: web fonts e regola @font-face: consigli per l'uso

  • CSS
  • Gabriele Romanato

Quando si parla di web fonts e della regola @font-face c'è sempre qualcosa che resta taciuto, causando quindi dei problemi qualora si volesse modificare l'esempio preso da un articolo o tutorial. In questo articolo vorrei evitare di trascurare dei dettagli importanti. Vediamo quali sono.

Procurarsi i web fonts

I web fonts vengono rilasciati in quattro formati principali per essere compatibili con tutti i browser e i dispositivi. Essi sono:

  1. EOT
  2. WOFF
  3. TTF
  4. SVG

In genere quando scaricate un web font trovate già i quattro file corrispondenti nei formati citati. Qualora non fosse così, in genere dovete convertire il file del font in vostro possesso nei vari formati.

Potete usare un servizio online (ce ne sono decine), ma tenete presente che questa operazione è permessa e possibile solo se la licenza d'uso del font prevede l'uso sul Web come web font.

Se così non fosse, non potete usare il font sul web. Se lo fate, state violando la licenza d'uso del font e questo potrebbe avere delle ripercussioni future sul vostro sito, perchè scoprire il font in uso su un sito è un'operazione semplicissima.

Vi consiglio di iniziare la vostra ricerca su Font Squirrel, dove potete trovare i web font già scaricabili e utilizzabili con la regola @font-face.

La regola @font-face in pratica

La regola @font-face che si usa attualmente è una combinazione di hack e workaround per supplire alle differenze nell'interpretazione da parte di alcuni browser.

Se abbiamo ad esempio scaricato il font Junction, la prima cosa da fare è aprire il file TTF con il nostro visualizzatore di font e leggere l'intestazione del font, ossia il suo nome. Nel nostro caso è Junction Regular.

Quindi registriamo subito la famiglia del font in questo modo:


@font-face {
    font-family: 'JunctionRegular';
    /* continua */
}

Quindi per usare il font nel nostro CSS dovremo far riferimento a JunctionRegular.

Poi vengono le dichiarazioni per Internet Explorer che supporta solo il formato EOT (si presuppone che il file CSS sia nella stessa directory dei font):


@font-face {
    font-family: 'JunctionRegular';
    src: url('Junction-webfont.eot');
    src: url('Junction-webfont.eot?#iefix') format('embedded-opentype'),
    
    /* continua */
    
}

Poi le restanti dichiarazioni per gli altri browser e dispositivi:


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

}

Dato che stiamo usando la variante regular del font, usiamo anche le proprietà font-weight e font-style su normal.

Usare i web fonts

Consiglio di inserire la regola @font-face in un CSS da collocare nella stessa directory dei web fonts. Quindi possiamo usare la direttiva @import all'inizio del nostro CSS principale:


@import url(fonts/junction/junction.css);

body {
	font-family: Arial, sans-serif;
	width: 40%;
	margin: 2em auto;
	line-height: 1.4;
}

h2 {
	font-family: JunctionRegular, sans-serif;
	text-transform: capitalize;
}

E questo è il risultato:

[caption id="attachment_2641" align="aligncenter" width="691" caption="Il web font visualizzato correttamente"][/caption]
Torna su