Ho visto in rete tantissimi tutorials che spiegano come inserire un font personalizzato nel proprio sito web, ma qual’è il metodo veramente sicuro per poterlo visualizzare in tutti i browser? Semplice, usare la regola CSS @font-face. Ora vi spiego come fare.

Trovare il font adatto

La prima cosa che dovete ovviamente cercare è quella di trovare il Font adatto al vostro scopo. Assicuratevi che sia Free e di libero uso, esistono molteplici siti che permettono si trovarli.

Una volta che lo avete individuato scaricatelo nel vostro Desktop e per renderlo compatibile nel web recatevi su questo sito transfonter.org poi fate l’upload del vostro Font, generate il Font ed il gioco e fatto. Vi compariranno ben 4 voci con la relativa estensione.

Queste sono tutte le estensioni che vi servono. Ora basta implementarlo nel vostro foglio di stile, solitamente style.css. Nell’esempio ho usato il font “Crysta”.

Regola CSS molto Cross-Browser

Ecco che nel vostro style CSS dovrete inserire questa stringa, assicurandovi che il nome corrisponda esattamente a quello dei 4 file generati, attenzione perché è case-sensitive, ovvero riconosce maiuscole e minuscole!

Tutto qua, ed avrete il font personalizzato a dovere anche sul vostro sito o template!