Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 17 di 59
  • livello principiante
Indice lezioni

Web Fonts

Come utilizzare qualunque font sulle proprie pagine web
Come utilizzare qualunque font sulle proprie pagine web
Link copiato negli appunti

Aggiornamento a cura di: Marco Pontili

Per non utilizzare solo font standard, attraverso i CSS3 è possibile inserire "qualsiasi" web font in una pagina web e farlo scaricare all'utente. In questo modo, anche quando il font non fosse presente nel computer di chi sta visitando la pagina, il browser provvederà prontamente a scaricarlo e utilizzarlo per la renderizzazione dei testi.

Esistono 2 tecniche principali per utilizzare web fonts:

  • usare un font residente sul nostro computer, inserendo il file del font con diverse estensioni nel server web del sito che stiamo realizzando
  • usare un servizio esterno con web font pronti all'uso da richiamare nei fogli di stile, come Google Web Fonts (gratuito) o Typekit (a pagamento)

Scegliete sempre dei "fallback", cioè uno o più font "di riserva" per i browser più obsoleti o meno performanti che non accettano Web fonts. La compatibilità fra browser è molto buona, ma è meglio prima dare un'occhiata allo stato attuale con strumenti come questa tabella di riferimento e capire se i requisti del progetto permettano l'utilizzo di web fonts.

Attenzione ad usare troppi web fonts, appesantirà di molto il caricamento delle pagine! Infatti ogni file deve essere scaricato dal browser nel computer di ogni utente. Meglio quindi non abusarne: 3, massimo 4 font possono bastare anche per un portale e per pagine complesse.

Se scegliamo un servizio largamente usato come Google Web Fonts, ci sono comunque ottime possibilità che i vostri font siano già residenti nella cache del browser di buona parte dei nostri utenti. D'altro canto utilizzando un servizio di terze parti e non si ha pieno controllo di tutto...

Google Web Fonts

Attenzione anche alla formattazione dei web fonts. Con i fogli di stile è meglio essere molto specifici con peso, stile e dimensione dei testi. Altrimenti, c'è la reale possibilità che la renderizzazione fra browser avvenga in maniera non uniforme, vanificando le aspettative grafiche promesse.

Per approndimenti tecnici, è disponibile una pagina della Guida CSS3 su HTML.it che spiega come usare i web fonts

Licenze di utilizzo dei font

È importante fare attenzione alle licenze d'uso dei font. Esistono font utilizzabili gratuitamente sul web, altri che posso essere utilizzati solo a stampa e altri ancora solo in determinate condizioni.

Ti consigliamo anche