Tra le cose più importanti per il branding e l’aspetto del vostro sito web, ci sono i font. Un font scelto con cura può trasmettere personalità, rendere più leggibili lunghi passaggi di testo e rafforzare il vostro marchio nella mente delle persone.

Però non potete semplicemente scaricare qualsiasi font e usarlo sul vostro sito. Prima ci sono alcune cose da prendere in considerazione.

Dove potete trovare i web font, quali font sono compatibili con l’HTML, e quali sono “web safe” e possono essere utilizzati su qualsiasi sito web? Li esploreremo tutti in questo articolo.

Cominciamo!

Font HTML: Cosa Sono i Web Font?

I caratteri tipografici hanno una ricca storia, ma i font, come li conosciamo oggi, sono entrati in uso con l’avvento dei computer e di internet. I font digitali avevano bisogno di un trattamento speciale per essere resi sugli schermi. E quando sono entrate in gioco diverse dimensioni di schermo e dispositivi, le cose si sono complicate.

Google Fonts è una collezione di font web di tendenza

Google Fonts è una collezione di font web di tendenza

Quando si tratta di font digitali, ce ne sono di tipi diversi. Alcuni sono destinati principalmente alla stampa e al graphic design. Questi tendono a essere grandi e inadatti ai siti web, ma sono perfetti per creare delle grafiche. Ci sono anche font “web safe” che si trovano sulla maggior parte delle macchine.

Ma per il web design, quelli che dovete cercare sono i web font, caratteri tipografici appositamente progettati per essere visualizzati perfettamente sul web e su una varietà di dispositivi. Potete anche usare i web font nelle email o in altri servizi online.

Ci sono alcune cose che rendono i web font diversi dai normali font scaricabili per il desktop. Per esempio, spesso non possono essere usati con programmi sul vostro computer; devono essere caricati su un server e usati sul web.

Sono anche progettati per essere leggibili su diversi schermi e per diverse dimensioni. Possono essere stilizzati con i CSS (per l’applicazione di grassetto o corsivo, colori e altri attributi) e offrire supporto per altre condizioni come il rendering da destra a sinistra.

Anche se i web font non vengono installati sui vostri dispositivi o su quelli dei vostri visitatori, ci sono comunque dei modi speciali per visualizzarli affinché chiunque visiti il vostro sito possa vederli.

Potete scaricare questi font come al solito e caricarli sul vostro server, oppure usare uno speciale servizio di web font hosting che li incorpora sul vostro sito senza richiedere un download.

Se hai a cuore il branding e l'aspetto del tuo sito, scegliere un font web safe è fondamentale nel tuo processo di design. ✨ Ecco 10 ottime soluzioni 👇Click to Tweet

Quali Font Si Possono Usare in HTML?

Alcuni font non sono fatti per essere usati sul web, quindi quali possono essere inseriti nel vostro sito HTML?

Essenzialmente, sul vostro sito potete usare qualsiasi font scaricabile. Tutto quello che dovete fare è caricarlo e configurarlo correttamente, e questo dovrebbe bastare per visualizzarlo sul vostro sito web.

Il font Scribble non è pratico per le pagine web

Il font Scribble non è pratico per le pagine web

Anche se tecnicamente potete usare qualsiasi font sul vostro sito, farlo non è sempre l’idea migliore. Dovreste cercare font specifici per il web, non font destinati a essere usati nella stampa o nel graphic design. Alcuni font sono così stilizzati o destinati a dimensioni di testo così grandi che non si visualizzano correttamente su un sito. Con un font web, questo non è un problema.

Ci sono anche questioni di licenza di cui preoccuparsi quando si usano font desktop sul proprio sito (o si usano font web per il design di stampa). Usare un font con un mezzo diverso da quello per cui è stato acquistato può mettervi nei guai. Assicuratevi di leggere attentamente la licenza del vostro font prima di acquistarlo.

Potete anche cercare alcuni host che, attraverso piani gratuiti o a pagamento, vi permettono di usare una semplice chiamata HTML per rendere i loro font sul vostro sito web.

A ogni modo, il font che usate deve essere caricato correttamente ed essere del tipo di file corretto:

Con questi tipi di file, sarete poi in grado di usare i font in tutto il vostro sito e di stilizzarli con HTML e CSS.

Ci sono anche font sicuri per il web che di solito funzionano universalmente in tutti i browser e programmi.

Cosa Sono i Font Sicuri per il Web?

Un problema con la maggior parte dei web font è che non c’è garanzia che si visualizzino correttamente sul vostro sito web. A differenza del graphic design, dove potete semplicemente creare un’immagine in un programma e stamparla per la distribuzione, un browser deve rendere i web font ogni volta che qualcuno apre la pagina. Se i vostri font non riescono a caricarsi, potreste ritrovarvi con un sito web vuoto e rotto.

Per questo motivo, alcuni proprietari di siti web scelgono di affidarsi solo a font sicuri per il web (o font “web safe”). I font web safe sono preinstallati sulla maggior parte dei sistemi, e questo garantisce che possano essere visualizzati correttamente su tutti i dispositivi tranne che in quelli più sconosciuti. Tendono anche a caricarsi molto più velocemente dei font web, che possono invece essere abbastanza lenti.

Arial è un font sicuro per il web molto comune

Arial è un font sicuro per il web molto comune

Se tutto ciò che vi preoccupa è massimizzare le prestazioni e assicurare che il vostro sito visualizzi correttamente i font, allora i font web safe fanno per voi.

Ecco una lista di font sicuri per il web che generalmente non creano problemi:

Ci sono anche decine di altri font sicuri per il web, ma questi che abbiamo elencato sono i più onnipresenti sui dispositivi.

Tra tutti questi, Arial, Times New Roman, Helvetica e Courier New sono i più sicuri. Nonostante siano considerati sicuri per il web, alcuni degli altri non funzionano su certi sistemi operativi.

Il problema è che a meno che non stiate gestendo qualcosa come un sito governativo o un semplice sito informativo, non vale la pena sacrificare il vostro branding evitando la maggior parte dei font. I font sicuri per il web sono leggibili, ma sono anche troppo generici e abusati.

È molto meglio scegliere un set di font più bello e unico da usare sul vostro sito web, soprattutto perché c’è una soluzione al problema dei font web che non riescono a caricarsi: i font fallback (o font di riserva).

Una Nota sui Font Stack

I font stack, noti anche come font di riserva, sono l’unica ragione per utilizzare font web audaci e creativi.

Non importa cosa fate o quali precauzioni prendete, ci sarà sempre qualcuno che non sarà in grado di caricare i vostri font. Forse hanno Javascript disabilitato, quindi i vostri font ospitati non vengono visualizzati correttamente, o qualcosa va storto nel codice e impedisce la visualizzazione dei font che avete caricato. O forse un certo font può non essere compatibile con il dispositivo di alcune persone.

Grazie ai font di fallback, è facile caricare un font sicuro per il web se qualcosa va storto. I font fallback funzionano selezionando un font che l’utente ha installato in base alla famiglia di font:

Ricordate che i stack di font sono un raggruppamento di font; è del tutto possibile avere più font di riserva in sequenza. Assicuratevi solo di avere sempre un font sicuro per il web nel vostro stack, così da avere sempre la possibilità di comunicare il vostro marchio con un font simile se quello principale fallisce.

Come Aggiungere Font con l’HTML

Se volete aggiungere un web font al vostro sito, avete alcune opzioni.

Per gli utenti di WordPress, il modo più semplice per ottenere i font sul vostro sito è tramite un plugin. I due più popolari sono Easy Google Fonts e Use Any Font. Il primo semplifica il processo di aggiunta di Google Fonts al vostro sito web, mentre UAF vi permette di caricare direttamente i font sul vostro sito.

Se non state usando WordPress, o non volete fare affidamento su un plugin, il processo richiederà qualche ritocco manuale.

In primo luogo, è possibile utilizzare i font ospitati altrove, come con Google Fonts. Le istruzioni qui dipendono da quale servizio scegliete. Con Google Fonts, dovreste incorporare il font che volete usare nel vostro <head> e poi richiamarlo quando volete usarlo.

Potete anche ospitare localmente i font che avete scaricato da internet sul vostro sito web. Questo può essere preferibile perché non avrete bisogno di affidarvi a servizi di terze parti.

Fortunatamente, questo è molto facile da fare se avete un web font correttamente configurato. Basta caricare i file sul vostro server, potete usare la regola @font-face nel vostro foglio di stile per definirlo. Per esempio:


@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Poi potete usare il tag font-family per richiamare il vostro font ovunque vogliate nel documento HTML.

Stilizzare i Font con HTML e CSS

Una volta che il vostro font è caricato in modo sicuro sul vostro sito web, potete stilizzarlo con HTML e CSS. Anche se avete poche conoscenze di programmazione, stilizzare un font è abbastanza facile. Potete cambiare il colore del testo, il colore dello sfondo, la dimensione, lo stile o il peso.

Nota: se avete lavorato con le vecchie versioni di HTML, potreste ricordare il tag <font>. Questo non è più supportato e non dovrebbe essere usato. Potete invece dare uno stile al testo con i CSS o con un elemento di stile HTML.

Per prima cosa, potete cambiare il carattere con i codici di colore. Potete usare un nome di colore come “rosso”, un codice RGB o un valore HEX. Questo viene impostato con la proprietà color in questo modo:


p {

color: blue;

}

O in un singolo elemento di stile HTML:


<p style="color:blue;">Text.</p>

Per il colore di sfondo vale lo stesso, ma usando l’attributo background-color.


p {

background-color: blue;

}

Poi è il turno della dimensione del font. Questa può essere espressa in pixel, percentuali o ems (che vanno bene per la progettazione di siti responsive).

 p {

font-size: 16px;

}

Oppure:

<p style="font-size:200%;">Text.</p>
Impostare la dimensione del font usando i CSS

Impostare la dimensione del font usando i CSS

E per ultimi ci sono lo stile e il peso del carattere, o il corsivo e il grassetto. Per il testo inclinato, usate il tag “italic”.

.italic {

font-style: italic;

}

Mentre per il grassetto:

.bold {

font-weight: bold;

}
Impostare lo stile del font usando i CSS.

Impostare lo stile del font usando i CSS.

Potete anche usare i tag HTML al loro posto. Per il corsivo, potete usare:

<em>

per un testo che deve trasmettere enfasi, oppure

 <i> 

per un testo che deve distinguersi visivamente.

E per il grassetto, usate:

<b> o <strong>

Per esempio:

<b>Bold Text</b>

o

<strong>Sono importante.</strong>

Dove Trovare i Font HTML?

Se volete usare un host di font di terze parti o scaricarli, dovete sapere quali sono i posti migliori per trovare i font. Ci sono centinaia di distributori sul web, ma solo una buona manciata sono noti per essere fonti affidabili per i font. Eccone alcuni:

Vuoi ottimizzare i tuoi font per avere il massimo delle performance? Il nostro hosting ottimizzato per le prestazioni include un CDN che supporta HTTP/2, con larghezza di banda gratuita inclusa. Scopri i nostri piani

Google Fonts

Google Fonts

I 10 Migliori Font HTML

Ci sono migliaia di font web là fuori, ma da dove cominciare? Qui vi mostriamo dieci semplici font HTML che starebbero benissimo su qualsiasi sito web. Si tratta di font sicuri per il web, quindi dovrebbero funzionare su quasi tutti i dispositivi. Sono anche ottimi font di riserva.

Se avete bisogno di qualcosa di più eccitante, abbiamo un sacco di articoli sui font corsivi, calligrafici e moderni.

1. Arial

Un esempio del font Arial

Un esempio del font Arial

Arial è il più noto di tutti i font. Non è il più bello, ma è semplice e utile in una varietà di situazioni.

2. Times New Roman

Anche Times New Roman è un font estremamente comune. È più adatto se gestite un sito più formale. Questo font serif non è particolarmente accattivante, ma non è nemmeno particolarmente distraente.

3. Palatino

Un esempio del font Palatino.

Un esempio del font Palatino.

Palatino potrebbe suonarvi familiare, dato che è spesso usato nella stampa di libri. Ora è un elegante font digitale incluso di default su molti dispositivi.

4. Verdana

Verdana è noto per essere molto facile da leggere, ed è bellissimo anche a grande dimensione. Questo sans serif è una buona alternativa all’Arial.

5. Courier New

Un esempio del font Courier New

Un esempio del font Courier New

Ricorda il testo della vecchia macchina da scrivere: Courier New è un grande design monospace per i siti che propendono per un look vecchio stile ma leggibile.

6. Calibri

Un esempio del font Calibri.

Un esempio del font Calibri.

Calibri è un font sans serif semplice e grazioso che viene fornito di serie con programmi come Microsoft Office. Tuttavia, è un font proprietario, quindi è spesso supportato solo su sistemi operativi Windows.

7. Georgia

georgia

Un esempio del font Georgia.

Questo font serif arrotondato è ispirato al font Garamond, che è un font web safe simile. Se avete bisogno di un font formale non così serio come il Times New Roman, è una buona scelta.

8. Garamond

Un esempio del font Garamond

Un esempio del font Garamond

Molto simile a Palatino, Garamond è un font classico usato spesso per la stampa di libri. Nonostante sia stato aggiornato per i sistemi operativi moderni, sembra ancora abbastanza vecchio stile.

9. Didot

Un esempio del font Didot.

Un esempio del font Didot.

La spaziatura minima delle lettere su questo font serif gli dà un aspetto unico. È possibile trovarlo sulla maggior parte dei dispositivi Apple.

10. Tahoma

Un esempio del font Tahoma.

Un esempio del font Tahoma.

Questo font pulito era un carattere predefinito nei vecchi sistemi operativi Windows. Il suo aspetto più audace lo fa risaltare quanto basta senza distrarre.

Assicurati che il tuo sito non solo abbia un bell'aspetto ma anche che funzioni correttamente scegliendo uno di questi font web safe ✨Click to Tweet

Riepilogo

Scegliere dei web font che vengano visualizzati bene sul vostro sito web, siano leggibili e diano personalità al vostro brand è importante.

Ci sono vari siti web dove è possibile installare font gratuiti o scaricare quelli con licenza a pagamento, e in questo articolo abbiamo offerto alcuni esempi di buoni font per iniziare.

Non siete obbligati ad attenervi solo ai noiosi font sicuri per il web che avete visto in giro su internet per decenni. Grazie ai font di fallback, potete usare qualsiasi font che vi piace e impostare un font di riserva da usare se quello principale non si carica.

Se state usando questi font HTML sul vostro sito web, nelle email, o nel vostro logo, assicuratevi di fare molti test, così il vostro sito rimane leggibile, e la tipografia si integrerà bene con il resto del vostro design.


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.