Guest post del web designer Andrea Scuotto
La regola CSS @font-face permette di visualizzare una pagina web con un determinato font anche se questo non è presente sul sistema operativo dell’utente. Tutti i browser principali ora supportano questa regola.
Regola, grazie alla quale, non ci si deve accontentare più di usare solo i font più comuni installati già sui nostri computer.
Non è, però, tutto così semplice. Ci sono vari ostacoli in cui vi potreste imbattere.
Potreste, infatti, non aver la licenza legale che vi autorizza all’uso del font scelto sul web. Oppure, anche avendo la licenza, potreste non sapere come scrivere la regola CSS di @font-face in modo che vada bene per ogni browser. Per esempio, infatti, se il nostro font avesse estensione TTF non sarebbe supportato da Internet Explorer che è, invece, compatibile solo con i file Embedded OpenType (estensione EOT).
Allora cosa fare?
Ci viene in aiuto, in questi casi, Font Squirrel, un sito che fornisce font ad uso commerciale da scaricare gratuitamente.
Ecco come procedere.
Dopo aver cercato il font che ci serve, ad esempio uno molto simile a un carattere di cui non avevamo la licenza ma che ci tenevamo ad utilizzare, clicchiamo su “@font-face Kit” e dopo aver lasciato spuntato tutte le possibili estensioni (TTF, EOT, WOFF, SVG) scarichiamo un file zip, un “kit”.
Il kit che contiene file dei caratteri in vari formati, un demo html e un file css. Questo file contiene un codice css che armonizza finalmente la regola @font-face con ogni tipo di browser.
Ora dobbiamo solo copiare e incollare la regola in un nostro progetto ed il gioco è fatto.
Link: Font Squirrel