Come utilizzare i Web Fonts nel CSS - WeSchool


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.





















Videolezione "Background CSS, sfondi multipli e il loro utilizzo in una pagina HTML"

























    const isRelatedVideo = 1;

 
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.

