Caratteri self-hosted

I caratteri self-hosted sono file di caratteri pubblicati dai tuoi server anziché da quelli di un fornitore di caratteri di terze parti (ad esempio, Google Fonts).

È 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 di rendimento per pubblicare un carattere self-hosted il più rapidamente possibile: utilizzo di dichiarazioni dei caratteri incorporati e utilizzo del formato di carattere WOFF2.

  • Dichiarazioni di caratteri incorporati: l'incorporamento delle dichiarazioni @font-face e font-family nel 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 utilizzare preload per caricare i caratteri nelle dichiarazioni dei caratteri incorporati.

  • WOFF2: tra i caratteri moderni, WOFF2 è il più recente, ha il supporto browser più ampio e offre la migliore compressione. Poiché utilizza Brotli, WOFF2 comprime il 30% in modo migliore di WOFF.

Per migliorare ulteriormente le prestazioni, ti consigliamo di utilizzare l'impostazione secondaria dei caratteri. L'impostazione secondaria dei caratteri è la pratica di suddividere il file di un carattere in sottoinsiemi più piccoli, in genere con l'obiettivo di rimuovere i glifi inutilizzati. Ciò può ridurre notevolmente le dimensioni del file di un carattere. Gli strumenti per creare sottoinsiemi di caratteri includono fontkit, subfont e glyphhanger.

Per ulteriori informazioni sulle best practice per i caratteri self-hosted, consulta la pagina relativa all'utilizzo dei caratteri self-hosted.

Esempio:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>