Una delle novità più interessanti introdotte con i CSS3 è costituita dalla proprietà @font-face, tramite la quale è possibile caricare nel browser dell’utente che visualizza il nostro sito un font non di sistema, vale a dire non pre-esistente nel suo PC o Mac.

Prima di analizzare come procedere, è opportuno dare qualche indicazione di base:

1) evitiamo di trasformare le pagine web in … guazzabugli di caratteri di ogni tipo e specie.
Ciò per salvaguardare la leggibilità dei contenuti, nonché il buon gusto!

2) ogni font aggiuntivo comporta il caricamento di un file, quindi richiede qualche istante (soprattutto in Internet Explorer).
Occorre stare attenti a non usare font troppo pesanti e a non caricarne troppi nella stessa pagina.

3) è indispensabile testare la resa del carattere nei diversi browser, anche rispetto alle dimensioni.
Questo passo è fondamentale anche se si usa un foglio di stile di reset che uniforma la risposta dei browser alle dimensioni, appunto, del font.

4) bisogna prevedere sempre un’alternativa di tipo standard, per i browser meno recenti che non supportano la proprietà font-face ed in generale, se qualcosa va storto.
Occorre inoltre controllare che le dimensioni del font alternativo siano compatibili con quelle del font principale.

Posti questi principi di base, vediamo dunque due modi per procedere:

Continua a leggere→