Una collezione di font gratuiti per usare @font-face nei CSS

Parlando di Dive into HTML 5, abbiamo anche tessuto le lodi delle scelte tipografiche adottate sul sito grazie all’uso nei CSS di font particolari e incorporati nella pagina tramite @font-face.

In effetti, la possibilità  di far scaricare un font specifico, senza quindi doversi preoccupare che esso sia presente sul PC dell’utente, apre vie straordinariamente interessanti, soprattutto ora che tale funzionalità  è supportata da tutti i principali browser.

Come molti sanno, uno dei problemi nell’adottare questa soluzione deriva dal fatto che Internet Explorer supporta come formato il solo EOT. Cià rende necessario, ogni volta, avere a disposizione o creare la versione EOT di un font TrueType. Il tutto deve poi avere corrispondenza nelle regole CSS:

/* IE6/7/8 - Questa dichiarazione deve essere all'inizio */
@font-face {
  font-family: nomeDelFont;
  src: url( /nomeDelFont.eot );
}
/* Firefox 3.5/Safari/Opera 10 */
@font-face {
  font-family: nomeDelFont ;
  src: url( nomeDelFont.ttf );
}

Sul sito Font Squirrel è possibile scaricare dei veri e propri kit per l’uso di @font-face. In un singolo pacchetto si trovano le versioni EOT e TTF del font prescelto e un CSS di esempio. Comodo. Ampia la scelta dei font gratuiti messi a disposizione.