05 - Font Optimization: Subsetting, Variable Fonts e font-display

Font Optimization: Subsetting, Variable Fonts e font-display

I font web sono spesso il fattore trascurato nelle ottimizzazioni performance. Un sito che usa Google Fonts senza ottimizzazione puo caricare tra i 300KB e 800KB di solo font - risorse che bloccano il rendering, impattano il LCP e causano layout shift durante il font swap. Con le tecniche giuste, quella stessa tipografia puo richiedere meno di 60KB e non causare alcun shift visibile.

Il mercato dei font web e cambiato radicalmente negli ultimi anni. I variable fonts permettono di includere tutte le varianti (regular, bold, italic) in un unico file invece di quattro o piu file separati. Il subsetting riduce i file rimuovendo i glifi non necessari. E le strategie font-display permettono di controllare esattamente il comportamento del browser durante il caricamento.

WOFF2: Il Formato Standard per i Font Web

WOFF2 (Web Open Font Format 2) usa la compressione Brotli, ottenendo una riduzione del 30-50% rispetto a WOFF e del 60-70% rispetto ai formati OTF/TTF originali. Il supporto browser e universale (100% dei browser moderni) quindi non e piu necessario fornire fallback WOFF o TTF per siti che targetizzano browser degli ultimi 5 anni.

/* Configurazione @font-face moderna: solo WOFF2 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Variable font: un unico file per tutti i pesi */
@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* range continuo */
  font-style: normal;
  font-display: swap;
}

Font Subsetting: Ridurre il File al Minimo Indispensabile

Un file font completo come Inter Regular contiene circa 2.400 glifi che coprono centinaia di lingue. Se il tuo sito e solo in italiano e inglese, hai bisogno di meno di 300 glifi. Il subsetting rimuove tutti i glifi non utilizzati, riducendo drasticamente la dimensione del file.

Subsetting con pyftsubset (Python)

# Installa fonttools
pip install fonttools brotli

# Subset per Latin Extended (caratteri italiani inclusi)
pyftsubset Inter-Regular.ttf \
  --output-file=inter-regular-subset.woff2 \
  --flavor=woff2 \
  --unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, \
              U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, \
              U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"

# Risultato tipico:
# Inter-Regular.ttf: 1.2MB (OTF originale)
# inter-regular-subset.woff2: ~52KB (riduzione del 95%)

Glyphhanger: Analisi e Subsetting Automatico

Glyphhanger scansiona il tuo sito (o HTML statico) e genera il subset minimo basato sui caratteri effettivamente usati:

# Installa
npm install -g glyphhanger

# Scansiona un sito e genera il subset per i font usati
glyphhanger https://tuosito.com --subset=/fonts/*.ttf --formats=woff2 --LATIN

# Scansiona file HTML locali
glyphhanger ./dist/**/*.html --subset=/fonts/*.ttf --formats=woff2

unicode-range: Subset Condizionali

La proprieta unicode-range in @font-face istruisce il browser a scaricare quel file font solo se la pagina contiene caratteri in quel range unicode. Questo e il meccanismo usato da Google Fonts per servire subset diversi a utenti con lingue diverse:

/* Subset Latin di base - scaricato per tutti */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* Subset Cirillico - scaricato solo se la pagina usa cirillico */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  font-weight: 400;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Variable Fonts: Un File per Tutte le Varianti

I variable fonts (introdotti nella specifica OpenType 1.8) permettono a un singolo file di contenere un continuum di varianti lungo uno o piu assi di variazione. Gli assi piu comuni sono:

• wght (weight): da 100 a 900
• wdth (width): condensed, normal, expanded
• ital (italic): da upright a italic
• slnt (slant): inclinazione del carattere
• opsz (optical size): ottimizzazione per dimensioni diverse

/* Variable font con asse weight */
@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Uso di font-variation-settings per control granulare */
h1 {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 700;
  /* Oppure usando direttamente variation settings */
  font-variation-settings: 'wght' 700, 'opsz' 32;
}

p {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 400;
  font-variation-settings: 'wght' 400, 'opsz' 16;
}

/* Animazione fluida del peso con variable fonts */
.title-animated {
  font-family: 'Inter Variable', sans-serif;
  transition: font-variation-settings 0.3s ease;
}

.title-animated:hover {
  font-variation-settings: 'wght' 800;
}

Savings Reali con Variable Fonts

Le Strategie font-display

La proprieta font-display controlla come il browser gestisce la visualizzazione del testo durante il caricamento del font web. La scelta della strategia giusta dipende dal trade-off tra FOIT (Flash of Invisible Text) e FOUT (Flash of Unstyled Text), e dal loro impatto su CLS e LCP.

font-display: swap (la piu comune)

Il browser mostra subito il testo con il font di sistema (FOUT), poi sostituisce con il font web quando e disponibile. Nessun FOIT, ma potenziale CLS se i font hanno metriche diverse. La scelta giusta per la maggior parte dei siti.

font-display: optional (per performance massima)

Il browser mostra il testo con font di sistema. Il font web viene scaricato in background ma usato solo se disponibile entro un periodo brevissimo (circa 100ms). Se la connessione e lenta, il font di sistema viene usato per sempre durante quella sessione. Nessun FOUT, nessun CLS, ma il font web potrebbe non essere mai mostrato su connessioni lente. Ideale per siti dove la performance supera l'estetica.

font-display: fallback (il compromesso)

Il browser ha un brevissimo periodo di block (circa 100ms) poi mostra il fallback, e sostituisce con il font web solo se disponibile entro 3 secondi. Dopo 3 secondi, il font di sistema rimane per tutta la sessione. Un buon compromesso tra FOIT e FOUT per font che impattano molto sull'identita visiva.

Confronto Visivo delle Strategie

Eliminare il Font Swap CLS con le Metriche Override

La tecnica piu efficace per eliminare il CLS causato da font-display: swap e allineare le metriche del font fallback a quelle del font web. Le proprieta CSS size-adjust, ascent-override, descent-override e line-gap-override permettono di fare questo con precisione millimetrica.

/* Trova i valori corretti per Inter su Arial come fallback */

/* Metodo 1: Usa lo strumento Fallback Font Generator di Malte Ubl */
/* https://screenspan.net/fallback */

/* Metodo 2: Calcola manualmente le metriche */
/* Inter: UPM 2048, ascender 1984, descender -494, line-gap 0 */
/* Arial: UPM 2048, ascender 1854, descender -434, line-gap 67 */

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  /* size-adjust: rapporto tra le dimensioni complessive */
  size-adjust: 107.64%;
  /* Override delle metriche verticali */
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* Usa sempre il fallback ottimizzato come secondo nella stack */
body {
  font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;
}

Preconnect e Preload per Font di Terze Parti

Se usi Google Fonts o altri CDN di font di terze parti, le connessioni DNS e TLS verso quei domini aggiungono latenza. Le direttive preconnect e preload nella <head> riducono questo overhead:

<!-- Per Google Fonts: preconnect ai domini necessari -->
<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=Inter:wght@400;700&display=swap"
      rel="stylesheet">

<!-- Ancora meglio: self-hosting con preload diretto -->
<link
  rel="preload"
  href="/fonts/inter-variable.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

Self-Hosting vs Google Fonts: Il Confronto

La scelta tra self-hosting e Google Fonts dipende da diversi fattori. Il self-hosting offre piu controllo, migliori performance e nessuna dipendenza da servizi di terze parti. Google Fonts offre comodita e caching condiviso tra siti (anche se quest'ultimo beneficio e diminuito con le moderne restrizioni di privacy dei browser).

Per la massima performance, il self-hosting con variabile fonts e subsetting personalizzato e la scelta ottimale. Per rapidita di implementazione senza sacrificare troppo la performance, Google Fonts con le direttive preconnect corrette e accettabile.

/* Pipeline completa per self-hosting ottimizzato:
   1. Scarica i font originali (OTF/TTF) dal sito del font designer
   2. Crea subset con pyftsubset per Latin + caratteri speciali necessari
   3. Converti in WOFF2
   4. Carica i file in /public/fonts/
   5. Configura gli header HTTP per il caching long-term
*/

/* Nel server (es: nginx) */
location ~* \.(woff2)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  add_header Access-Control-Allow-Origin "*";
}

Conclusioni

L'ottimizzazione dei font web e uno degli interventi a piu alto rapporto impatto/ effort nelle ottimizzazioni performance. Partire da font non ottimizzati di 400KB e arrivare a subset variable font di 60KB con metriche override per eliminare il CLS richiede qualche ora di lavoro una tantum ma ha benefici permanenti su LCP, CLS e bandwidth per ogni visitatore.

La strategia raccomandata nel 2026: self-hosting con variable fonts in WOFF2, subsetting per Latin Extended, font-display: swap con metriche override per il font fallback, e <link rel="preload"> per il font del corpo del testo. Questo setup raggiunge performance native senza compromessi estetici.