Quando abbiamo come obiettivo quello di progettare un sito web, la regola per quanto riguarda la scelta dei font è chiara e netta: è necessario utilizzare font standard.
Il loro grande vantaggio deriva dal fatto che, poiché sono già installati sul dispositivo, non è necessario scaricare nuovi file per visualizzare il contenuto di una pagina. E il fatto che non vengano trasferiti dei dati non solo riduce il numero di comunicazioni con il server e quindi abbrevia anche il tempo di caricamento della pagina.
Ecco una lista di font sicuri per il web che generalmente non creano problemi:
- Arial
- Brush Script MT
- Comic Sans
- Courier New
- Garamond
- Georgia
- Helvetica
- Impact
- Lucida Console
- Palatino
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Utilizzare i caratteri non predefini
Se volete aggiungere un web font al vostro sito, avete alcune opzioni. 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);
}
È necessario invece prestare molta attenzione a quale web font si utilizza nel proprio sito web, in quanto e’ elemento può avere un impatto rilevante per il caricamento della pagina.
Esistono diversi modi in cui i caratteri web influiscono sulle prestazioni:
- RITARDO NEL RENDERING DEL TESTO: se un carattere Web non è stato caricato, i browser in genere ritardano il rendering del testo. In molte situazioni, questo ritarda il First Contentful Paint (FCP). In alcune situazioni, ciò ritarda anche il Largest Contentful Paint (LCP).
- SPOSTAMENTI DI LAYOUT: la pratica dello scambio di caratteri ha il potenziale di causare cambiamenti di layout .
In questo caso sono presenti 6 font diversi che devono essere caricati, inoltre tutti questi caratteri danno luogo ad altre problematiche:
Ecco un altro dettaglio sugli errori che il browser incontra nel momento di eseguire il rendering della pagina:
Come migliorare la gestione dei web font:
Convertire i file TTF in WOFF2:
Il nuovo protocollo per migliorare le prestazioni di caricamento si chiama WOFF2.
Questo nuovo protocollo fornisce una versione compressa dei font a tutto vantaggio del tempo di caricamento.
Dichiarazione in linea:
Migliorare la prestazioni di caricamento sarebbe buona prassi dichiarare in line i font che si vogliono caricare sulla pagina:
Preload o Preconnect?:
Nel caso dei web font è importante utilizzare il rel=”preconnect” se si vogliono caricare font come quelli messi a disposizione da Google.
Il preload al contrario andrebbe a peggiorare il tempo di caricamento della pagina in quanto comunque farebbe una chiamata server a una risorsa esterna:
Le “Famiglie di caratteri” invece sono insiemi di font che prevedono diverse tipologie di caratteri come il Bold, l’Italic, il Light ecc. e con il caricamento di un’unica cartella si avranno a disposizione molte variabili per gestire i testi delle pagine, anche in questo caso a vantaggio delle performance.
Font-display:
font-display informa il browser su come procedere con il rendering del testo quando il font web associato non è stato caricato.
senza entrare troppo nel dettaglio di tutte le tipologie la discriminante maggiore è tra font-display: optional che è l’approccio più performante in quanto i web font reagiranno in non più di 100ms e non comporteranno variazioni di layout, mentre se l’aspetto “estetico” è una componente irrinunciabile anche e soprattutto a discapito delle performance dovremmo inserire font-display: swap.
Rimuovere i caratteri non necessari
Un font può incorporare un numero maggiore o minore di caratteri a seconda del numero di lingue supportate. Se non si dispone dell’utilizzo di tutte le lingue, è possibile rimuovere dai file un certo numero di caratteri utilizzati solo in determinati alfabeti e ridurne così notevolmente le dimensioni.
- Identificazione del numero di lingue supportate dal font
Dopo aver scelto e scaricato un font da Dafont.com, inviare il file .otf a FontDrop per scoprire il numero di lingue supportate da questo font (qui 69 lingue). - Selezionare i caratteri e gli alfabeti di cui hai bisogno
Utilizzando lo strumento gratuito di Everything Fonts , seleziona solo i caratteri e gli alfabeti che desideri conservare e quindi carica di nuovo il file, senza fronzoli.
