Caratteri di terze parti

È 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.

Esempio:

<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>

Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.

Ultimo aggiornamento 2024-03-13 UTC.