CSS3 Web Fonts: test pratico

Istruzioni d’uso per i Web Fonts, nuovo modulo dei CSS3.

Con i CSS2 è possibile avere un buon controllo sui font utilizzati in una pagina web. Basta dichiarare un elenco di font, e se il primo non è disponibile il browser cercherà il secondo, fino all’esaurimento dei font dichiarati.

Le cose però sono state sviluppate ulteriormente con i CSS3, che vedono l’introduzione dei Web Fonts.

Cosa sono i Web Fonts? Sono un miglioramento che consente tramite CSS di far scaricare automaticamente all’utente dei font non installati sul proprio sistema operativo. In questo modo le pagine saranno visualizzate esattamente come pensato dal graphic designer, senza bisogno di ricorrere a tecniche di image replacement.

In realtà il documento del W3C che parla di Web Fonts è stato creato il 2 Agosto 2002, ma come noto dalla dichiarazione di uno standard all’utilizzo pratico il cammino è lungo. Ne parlo ora perchè Safari 3.1 è il primo browser a supportarli, consentendo di iniziare ad usare questa tecnica.

Niente infatti vieta di utilizzare i Web Fonts, che saranno trascurati dai browser che non li supportano.

Per usarli, è sufficiente inserire all’interno del CSS una dichiarazione di questo tipo, indicando il percorso per scaricare il font:

@font-face {
font-family: 'Bimini';
src: url('bimini.ttf');
}

A questo punto sarà possibile usare il font dichiarato (Bimini) senza preoccuparsi della sua presenza sul computer dei visitatori:

h1 { font-family: Bimini, Arial, sans-serif; }

Da notare che se si vuole usare il nuovo font in grassetto, va dichiarata anche questa variante:

@font-face {
font-family: 'Bimini';
font-weight: bold;
src: url('bimini.ttf');
}

Stesso discorso per il corsivo e le altre combinazioni a disposizione.

Se avete Safari 3.1 e volete testare i Web Fonts, ho preparato una pagina demo. Utile anche per chi vuole vedere il CSS in pratica.

A questo punto potete utilizzarli liberamente, al momento solo chi usa Safari avrà un’esperienza migliore.

Il mio consiglio però è di farlo in maniera responsabile. Ricordate che dovreste usare solo font gratuiti con licenza di libera distribuzione, e soprattutto che verranno scaricati dal browser dei visitatori. Considerando che esistono font dal peso superiore ai 100kb, valutate con attenzione ogni cosa prima di usare i Web Fonts.