# Font preload: five files, not twenty

Font preload serves only the first-screen characters: here 5 files for 171,368 bytes out of 20 declared faces. How to choose them and what to measure.

> Page: https://ui.eneawork.it/blog/font-preload-strategia
> Markdown: https://ui.eneawork.it/blog/font-preload-strategia.md

*2026-11-01*

Il preload dei font va riservato ai caratteri che compaiono nel primo schermo. Qui sono 5 richieste per 171.368 byte, contro 20 dichiarazioni @font-face nel foglio fonts.css.

La home di https://ui.eneawork.it, letta il 1 novembre 2026 alle 16:02 UTC, dichiara 5 preload di font per 171.368 byte: inter-400-latin.woff2 48.256, averia-serif-libre-400-latin.woff2 38.404, averia-serif-libre-700-latin.woff2 38.712, general-sans-500-s2.woff2 22.904 e general-sans-600-s3.woff2 23.092. Il foglio fonts.css pesa 5.428 byte e contiene 20 facce: le altre 15 non sono precaricate. Byte misurati con curl -sS e %{size_download}; gli header rispondono max-age=31536000, immutable. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Riferimento: MDN, licenza CC BY-SA 2.5.

## I cinque file in preload

I cinque file coprono il testo e i titoli visibili subito. Il foglio dichiara 20 facce perché ogni famiglia ha più pesi e sottoinsiemi: le altre 15 arrivano solo quando una pagina le usa davvero, e su una pagina che non le usa non costano nulla.

## Il markup corretto

crossorigin serve anche sullo stesso dominio: senza, il browser scarica il font due volte, una per il preload e una per la regola @font-face, e il preload non aiuta più.

## Il comando

curl -sS -o /dev/null -w "%{size_download}\n" https://ui.eneawork.it/fonts/inter-400-latin.woff2

Il comando stampa i byte di un file; ripetilo per ogni preload e somma. Il numero da confrontare è il peso del resto del primo schermo, non il totale del sito.

## La limitazione

Un preload sbagliato toglie banda a ciò che conta: se una faccia non compare senza scorrere, i suoi 38 KB arrivano prima del testo utile. I font woff2 sono già compressi, quindi gzip non li riduce, e la cache immutable fa pagare il costo solo alla prima visita.

## Dove continuare

Nel catalogo EneUI: 111.985 componenti, 1.556 blocchi e il record sidebar, dove la tipografia arriva dal foglio globale. Le guide: font-display e layout shift e il CSS critico; il confronto tra font gratuiti per interfacce aiuta a scegliere prima di misurare.

## FAQ

### Quanti font conviene precaricare?

Solo quelli usati sopra la piega, di solito due o tre. Ogni preload in più compete con il contenuto principale per la stessa banda.

### Perché serve crossorigin su un font dello stesso dominio?

I font sono richieste in modalità CORS anche quando arrivano dallo stesso host. Senza l'attributo il preload non corrisponde alla richiesta del CSS e il file viene scaricato due volte.

### Meglio preload o font-display swap?

Servono a cose diverse. Il preload riduce il tempo di arrivo del file, font-display decide cosa mostrare mentre il file non è pronto. Usa entrambi.

### I font woff2 si comprimono con Brotli?

No, il formato è già compresso e un secondo passaggio aggiunge pochi byte. Il risparmio arriva dal numero di facce servite, non dalla compressione.

### Come verifico che il preload funzioni?

Nel pannello Network il font deve comparire una volta sola, con priorità alta e senza una seconda richiesta dal CSS. Se ne vedi due, manca crossorigin o il percorso non coincide.