Utilizzare dei font custom su una pagina web

Tramite le specifiche Cascading Style Sheets Level 3 (CSS3) è possibile utilizzare (Embed) dei font personalizzati in una pagina web.
I font possono essere nel formato True Type (TTF) o Open font (OTF).
Per utilizzare un font custom è sufficiente inserire questa dichiarazione nel foglio di stile:

CSSCopia

@font-face{
  font-family: SgartFont;
  src: url('http://www.sgart.local/mySgartFont.ttf');
}

a questo punto è possibile usare il nuovo font. Vedi anche CSS3 font-face

CSSCopia

h1{
  font-family: SgartFont;
}

Tutto questo funziona correttamente con Firefox (testato dalla 3.5 in poi), Safari (testato sulla 5.1.1), Crome (testato sulla 14) e Internet Explorer 9.

Discorso a parte per le versioni di Internet Explorer inferiori alla 9 in quanto non supportano il formato TTF neil formato OTF, ma usano un formato proprietario Embedded OpenType (EOT). Quindi per mantenere la compatibilità con le versioni precedenti di Explorer, vanno inclusi entrambi i tipi di font nel CSS.
La sintassi corretta è:

CSSCopia

@font-face{    
  font-family: SgartFont;
  src: url('(mySgartFont.eot');    
  src: local(SgartFont), url('/mySgartFont.ttf') format('opentype');
}

specificando gli attibuti src esattamente in questo ordine. Questo dovrebbe funzionare da Internet Explorer versione 5 ma lo testato solo sulla versione 7 e 8.

Per convertire un file TTF o OTF in EOF si può usare questo sito web ttf -> oef oppure l'utility Microsoft WEFT

Vedi anche Making CSS Custom Font works with IE, Firefox, Opera and Safari