2'

Come utilizzare i Web Fonts nel CSS

Sicuramente vi sarà capitato di voler utilizzare un carattere particolare per i titoli o i testi del vostro nuovo layout ma, come abbiamo visto in una precedente lezione, siamo costretti ad utilizzare una piccola cerchia di caratteri che vengono considerati universalmente compatibili.

Questo era vero fino a qualche anno fa perché grazie alla introduzione dei web font adesso siamo in grado di utilizzare qualsiasi carattere vogliamo.

Perché i Web Font?

Come abbiamo detto, fino a poco tempo fa, non ci era possibile inserire font particolari all’interno delle nostre pagine questo perché tutto dipendeva dalla libreria di font che il vostro visitatore aveva installato all’interno del proprio computer, quindi se non possedeva un determinato font non poteva neanche visualizzarlo.

Ma grazie agli sviluppatori CSS oggi siamo in grado di utilizzare l’infinita libreria di font disponibili sul web con una semplicità mai vista fino ad ora; infatti ci sarà possibile installare un nuovo font sulle macchine dei nostri visitatori semplicemente dichiarando il font con la regola @font-face. Diamo uno sguardo da vicino a questa regola:

Come possiamo vedere, al rigo 1, viene utilizzato il selettore @font-face per permetterci di dichiarare il nuovo font con una regola che conosciamo molto bene, font-family. Andiamo adesso ad analizzare le regole che ci permettono di collegare il font.

  • Riga 7: uso local() per permettere al browser di caricare la versione locale del font, se presente;
  • Riga 8 - 10: grazie a url() posso indicare un percorso per scaricare il font e con format() sono in grado di specificarne il formato.

Le regole url() e format() vengono ripetute più volte per assicurarci che i vari browser siano in grado di riconoscere il formato più adeguato e di comportarsi di conseguenza.

Ma se volete andare sul sicuro e non volete diventare matti a cercare tutti i formati per ogni singolo font che volete utilizzare vi consiglio vivamente di visitare il sito Google Web Font e seguire i semplici passi per utilizzare il vostro font preferito.