È estremamente importante pubblicare i caratteri rapidamente: un caricamento più rapido dei caratteri non solo significa che il testo sarà visibile all'utente prima, ma ha anche un grande impatto sul fatto che un carattere provochi variazioni del layout. Se un carattere non può essere caricato prima che sia necessario, in genere si verifica una variazione del layout quando il carattere viene scambiato. Le dimensioni di questa variazione del layout possono variare a seconda di quanto il carattere di riserva corrisponda al carattere web. Per vedere questo fenomeno in azione, guarda la demo e confronta le variazioni del layout che si verificano con una connessione veloce e una lenta.
L'esempio riportato di seguito combina due tecniche relative al rendimento per caricare un carattere di terze parti
il più rapidamente possibile: utilizzo di dichiarazioni dei caratteri incorporati e utilizzo dei
suggerimenti delle risorse preconnect. Sebbene questo snippet di codice mostri come caricare i caratteri da Google Fonts, queste tecniche si applicano anche ad altri fornitori di caratteri di terze parti.
Dichiarazioni dei caratteri in linea: l'incorporamento delle dichiarazioni
font-familynel documento principale, anziché includere queste informazioni in un foglio di stile esterno, consente al browser di determinare quali file dei caratteri verranno utilizzati nella pagina senza dover attendere il download di un file del foglio di stile separato. Questo è importante perché in genere i browser non scaricano file dei caratteri finché non sanno che sono utilizzati nella pagina. Nella maggior parte dei casi, è preferibile utilizzarepreloadper caricare i caratteri nelle dichiarazioni dei caratteri incorporati.Preconnessione: il modo consigliato per caricare Google Fonts è utilizzare il tag
<link>insieme ai suggerimenti sulle risorsepreconnect. Il suggerimento per la risorsapreconnectstabilisce una connessione anticipata con l'origine di terze parti. Nello snippet di codice riportato di seguito, il primo suggerimento della risorsa imposta una connessione per il download del foglio di stile del carattere; il secondo suggerimento della risorsa configura una connessione per il download dei file dei caratteri.
Esempio:
HTML
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>