Font per il web: WOFF2 è il facile 64%, il subsetting è l'altro 30

I font bloccano il rendering e sono pesanti. Un solo peso può pesare più di tutte le immagini sopra la piega. Due modifiche riducono un tipico font per il web a una frazione di quanto pesa un TTF grezzo, e la maggior parte dei siti non fa nessuna delle due.

WOFF2: il 64% gratuito

WOFF2 è un contenitore per font che comprime le tabelle dei glifi con Brotli e una trasformazione calibrata per i dati dei font. Non è un carattere diverso: è lo stesso font, più piccolo, ed è supportato da ogni browser in uso.

Abbiamo convertito 40 font reali (TTF di Google Fonts) in WOFF2:

È la singola modifica con il maggiore impatto che puoi fare su un font per il web, e non costa nulla: stessi glifi, stesso rendering, un solo passaggio di build. Se servi .ttf o anche .woff, stai distribuendo da due a tre volte i byte senza motivo.

Subsetting: l’altro 30

Ecco la parte che quasi nessuno fa. Apri il TTF di un Google Font e di solito contiene molto più del latino: cirillico, greco, vietnamita, punteggiatura estesa, simboli. Un sito in lingua inglese lo scarica tutto e non ne rende nemmeno una parte.

Il subsetting elimina i glifi che una pagina non userà mai. Abbiamo sottoposto a subsetting gli stessi 40 font su un intervallo latino (0-2AF più la punteggiatura comune del web e l’euro) con hb-subset:

Rileggi quell’ultima riga: 22 MB di TTF diventano circa 1 MB una volta che converti in WOFF2 e mantieni solo i glifi che una pagina latina usa: un taglio del 95%. Il solo WOFF2 ha portato 22 MB a 7 MB; il subsetting ha portato 7 MB a 1 MB. I due effetti si sommano, ed è nel secondo che sta la sorpresa.

Come fare subsetting senza rompere nulla

Il subsetting è lossy nell’unico modo che conta: i glifi che elimini spariscono. Fallo deliberatamente.

• Elimina solo ciò che non servi. Un sito latino fa subsetting sul latino. Un sito multilingue mantiene gli intervalli che rende.
• Usa unicode-range in @font-face. Distribuisci più subset (latino, latino esteso, cirillico…) e lascia che il browser scarichi solo quelli che il testo di una pagina tocca davvero. È esattamente come Google Fonts serve i font, e puoi farlo anche con i tuoi.
• Attento al testo generato dagli utenti. Se gli utenti possono digitare qualsiasi cosa (nomi, emoji, altri sistemi di scrittura), un subset rigidamente solo-latino mostrerà tofu (□) per i glifi mancanti. Mantieni un subset più ampio, o un fallback su font di sistema, per queste superfici.
• L’hinting è di solito eliminabile. Sui display moderni ad alta densità, l’hinting TrueType porta poco e costa byte; eliminarlo riduce ulteriormente il file, anche se conviene verificare se supporti Windows a bassa densità.

Cosa fa Patu con un font

Invia a Patu un TTF, OTF o WOFF e restituisce WOFF2. Passa il testo o gli intervalli unicode di cui la pagina ha bisogno e li sottopone a subsetting nello stesso passaggio: il percorso del 95%, non solo quello del 64%.

# convert + subset to the glyphs this page actually uses
curl -X POST "https://patu.dev/v1/compress?subset-text=$(cat page.txt)" \
  -H "X-Api-Key: $PATU_KEY" -H "Content-Type: font/ttf" \
  --data-binary @Inter.ttf -o Inter.woff2

La conversione in WOFF2 è la modifica che tutti dovrebbero già aver fatto. Il subsetting è quella che trasforma un font da una voce di peso pagina reale a un errore di arrotondamento.

Metodo e dati: 40 font reali (TTF di Google Fonts); WOFF2 tramite woffify, subsetting tramite hb-subset su 0-2AF,20AC,2018-201F,2010-2014. Le riduzioni sono la mediana rispetto al TTF sorgente; l’aggregato è la somma dei byte di tutti e 40.