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.

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

9 commenti su “CSS3 Web Fonts: test pratico”

  1. Devo dire che i web fonts sono la mia feature preferita del CSS3. Io comunque direi che usarli non sarebbe male. Certo sono con safari per ora si vedrebbero, ma con una font-family non ci sarebbe nessun problema, e su safari (e magari in futuro anche su opera, di sicuro, e si firefox, forse qui ci vorrà un pò di più) si vedrà magari qualcosa di meglio del solito font di sistema.

  2. Davvero interessante questa possibilità. Ma come funziona con i la questione dei font coperti da copyright?

  3. safari 3.1 mi piace questa news
    serve qualche particolare potenza del pc o è leggero come mozzilla?
    in effetti con IE mi capita di non vedere il giusto font, a volte basta inserirlo nel sistema a volte no.
    Un pò gnora in materia :P

  4. I link ai font sono errati, vanno messi relativi e non assoluti.
    ma testare la pagina di esempio prima di pubblicarla?

  5. Una precisazione per avere la compatibilità su tutti i pricipali browser (IE, Firefox, Chrome, Opera, Safari)
    Non basta nè soltanto il file .ttf come indicato da Tom, nè basta aggiungere il file .aot (per Internet Explorer), in quanto su Google Chrome non risulta compatibile.
    Per avere compatibilità anche su Chrome e comunque sul maggior numero di eventuali ulteriori browser, suggerisco di caricare e collegare il font in altre estensioni: qua sotto il codice di esempio con il quale ottengo la maggiore compatibilità.

    @font-face {
    font-family: ‘MatchbookMatchbook’;
    src: url(‘Matchbook.eot’);
    src: local(‘Matchbook Matchbook’), local(‘Matchbook’), url(‘Matchbook.woff’) format(‘woff’), url(‘Matchbook.otf’) format(‘opentype’), url(‘Matchbook.svg#Matchbook’) format(‘svg’);
    }

    A presto, buon web-fonts natalizi a tutti!!!!!