Includere font non standard nei nostri siti

Molti ignorano il fatto che sia possibile con pochi passi includere nei siti web font differenti dai soliti font standard. Non è necessario essere dei maghi della programmazione o chissà cosa.

Ci viene in aiuto un sito, Font Squirrel:

Nella pagina linkata sopra sono presenti una miriade di font suddivisi per categoria. Selezioniamo il nostro preferito. Abbiamo la possibilità di esaminarlo più nel dettaglio, guardare la mappa caratteri e fare delle simulazioni, poi clicchiamo sulla voce @font-face Kit e successivamente sul pulsante Download @font-face Kit.

Scaricati i file è ora di caricarli sul nostro sito. Il file zip è comprensivo di una demo, di un css e del font in diversi formati, ttf, eot, woff, svg, quest’ultimi necessari per la corretta visualizzazione nei diversi browser.

A questo punto non ci resta che inserire nel foglio di stile il codice presente nel file stylesheet.css, per intenderci quello tipo @font-face{ … } facendo attenzione a mettere il percorso esatto dove c’è l’url del font. In questo modo diciamo al browser di scaricare il font.

Ora dobbiamo dirgli di usarlo! Sarà fatto come un comune font, cioè con font-family: ‘NomeFontCaricato’.

Consiglio di non esagerare includendo tutta la famiglia di font se non è proprio necessario, risulterebbe più pesante in termini di kb.

Questa tecnica funziona sulla maggior parte dei browser e dispositivi mobili:

Firefox 3.5+
Opera 10+
Safari 3.1+
Chrome 4.0.249.4+
Internet Explorer 4+
iPad e iPhone

Lo stesso Font Squirrel mette a disposizione un generatore di kit, @font-face Generator, nel caso in cui non ci soddisfino i font già presenti possiamo caricarne uno dal nostro pc è generare tutti i file necessari.