Webfont Kit: come inserire un custom font in un sito web

Un pò di tempo fa ho utilizzato la regola @font-face per strutturare un sito e, sfortunatamente, mi sono imbattuta in uno dei soliti e fastidiosissimi problemi che affliggono un pò tutti i web designers, ovvero il cross-browser.

Per chi non lo sapesse, con questo termine si intende la compatibilità di un sito web con i differenti browsers, in modo che questo venga visualizzato correttamente (e dunque allo stesso modo) qualsiasi browser utilizziamo.

 
Nel mio caso il problema era rappresentato dai links presenti nella navbar. Tramite appunto @font-face ho impostato un font scaricato dal web, constatando in seguito che Mozilla non riusciva a visualizzarlo. Ho riscontrato lo stesso problema su Explorer 8, sugli altri browsers invece (Chrome, Opera e Safari) tutto ok. Dopo averci sbattuto la testa per diversi giorni, ho trovato un articolo che conteneva la soluzione al mio problema, ma andiamo per ordine…

Che cos’è un Webfont Kit?

Per prima cosa, c’è da dire che se vogliamo usufruire di questa importantissima novità inserita nel CSS3, ci sarà più che utile sfruttare il pacchetto Webfont Kit.

Il Webfont Kit non è altro che un pacchetto contentente il codice CSS necessario per far visualizzare il carattere da noi scelto su tutti i browsers.

Il formato TTF va bene per la maggior parte dei browsers, eccetto IE

Il formato EOT è specifico per Explorer

Il formato WOFF è raccomandato per la standardizzazione del web da parte del W3C

Il formato SVG è utilizzato da iPhones e iPads

 
All’interno del Webkit Font troveremo anche altro, come un file di testo contentente la licenza del font e una pagina HTML che ci spiegherà come installare il kit sul nostro sito.

Come ottenere un Webfont Kit

Rechiamoci quindi su fontsquirrel e andiamo su WEBFONT GENERATOR. A questo punto clicchiamo su Add Fonts e carichiamo il carattere da cui vogliamo ottenere il nostro kit (carattere che in precedenza dobbiamo aver scaricato da fontsquirrel o da qualsiasi altro sito di fonts).

Webfont Kit: come inserire un custom font in un sito web

Come vedete, la prima opzione è settata su EXPERT, ed è proprio questo il passaggio fondamentale! Grazie a questa feature avremo infatti la possibilità di uno scaricamento avanzato e potremo gestire molte opzioni. Quella che interessa a noi è Base64 Encode, perciò non dimenticate di selezionarla!

Webfont Kit: come inserire un custom font in un sito web

Fatto questo possiamo finalmente scaricare il nostro fantastico Webkit Font. Non vi resta che seguire la guida inclusa nel pacchetto per installare il kit e godere della vista del nostro custom font su tutti i browsers!

Avete capito qual’è la soluzione? Ebbene si, l’opzione Base64 Encode permette una corretta visualizzazione anche sui browsers che fanno i capricci. Spero che quest’articolo possa essere utile a molti di voi. Se avete scoperto altri metodi per aggirare questo tipo di problema sarei felice se lo condivideste con me e tutti gli altri commentando quest’articolo.

Potrebbero interessarti anche...