webfont kit

Un po’ 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 tutti i web designers, ovvero il cross-browser. Il font che avevo utilizzato per la barra di navigazione non veniva visualizzato correttamente su tutti i browsers. Come ho risolto? Grazie al Webfont Kit! Corri a leggere l’articolo e vieni a scoprire come fare!

Con il termine cross browser 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.

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

EOT è specifico per Explorer.

WOFF è raccomandato per la standardizzazione del web da parte del W3C.

SVG è utilizzato da iPhones e iPads.

All’interno del Webfont Kit 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.

webfont kit

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 dimenticare di selezionarla!

webfont kit

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

Hai 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 hai scoperto altri metodi per aggirare questo tipo di problema sarei felice se lo condividessi con me e tutti gli altri commentando quest’articolo.

Share: