2025 · 10 · 02 · 3 min

Font loading strategy: come evito il FOUT su ogni progetto

Flash of Unstyled Text è uno dei problemi di performance più visibili e più evitabili. La strategia che uso da tre anni senza compromessi sulla velocità.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

Passo 1: self-hosting del font. Niente Google Fonts o Adobe Fonts — i file vanno nel progetto. Elimina il DNS lookup esterno e la dipendenza da servizi terzi.

Passo 2: font subsetting. Se il sito è solo in italiano e inglese, non ho bisogno del subset greco e cirillico. Tool di riferimento: pyftsubset o Fonttools. Il risparmio medio è 40–60% sul peso del file.

Passo 3: font-display: swap con font stack di sistema ben calibrato. Il testo appare subito con il font di sistema, poi viene sostituito quando il font personalizzato è pronto. Il CLS deve essere minimo — il font di sistema scelto deve avere metrica simile.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?