WOFF2

WOFF2 è stato sviluppato da Google ed è diventato una Raccomandazione W3C nel marzo 2018. Si basa sul concetto originale di WOFF, ma sostituisce la compressione zlib con Brotli — un algoritmo di compressione anch'esso sviluppato da Google — che raggiunge rapporti di compressione significativamente migliori.

Ma WOFF2 non è semplicemente "WOFF con una migliore compressione". Introduce una trasformazione di preelaborazione che ristruttura i dati del font prima della compressione, rendendoli sostanzialmente più comprimibili. Per i contorni TrueType, ciò significa applicare la codifica predittiva alle coordinate dei glifi — codificando ogni punto come un delta rispetto a un valore previsto anziché come una coordinata assoluta. Il risultato è un flusso di byte molto più ridondante che Brotli riesce a comprimere in modo aggressivo.

Questo approccio in due fasi — preelaborazione specifica per il dominio seguita da compressione di uso generale — è il motivo per cui WOFF2 produce costantemente i file di font più piccoli rispetto a qualsiasi altro formato.

WOFF2 applica un pipeline di compressione in due fasi ai dati del font sorgente:

• Fase 1: Trasformazione di preelaborazione — trasformazioni specifiche per il font ristrutturano i dati per massimizzare la comprimibilità. Per i contorni dei glifi TrueType, questo utilizza la codifica predittiva delle coordinate — ogni punto viene codificato come la differenza rispetto a una posizione prevista, producendo numeri molto più piccoli. Trasformazioni simili vengono applicate ad altre tabelle del font.
• Fase 2: Compressione Brotli — i dati preelaborati vengono quindi compressi con Brotli, che combina la compressione a finestra scorrevole LZ77 con la codifica di Huffman e un dizionario statico integrato. Brotli ottiene una compressione del 20-30% migliore rispetto a zlib sui dati tipici dei font.

Sul lato browser, il processo si inverte: decompressione Brotli seguita da trasformazioni inverse per ricostruire le tabelle originali del font. Nonostante il passaggio aggiuntivo, la decompressione di WOFF2 è in realtà più veloce di quella di WOFF1 — Brotli è stato progettato per una decodifica rapida e il file più piccolo si trasferisce più velocemente in rete.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Si noti che è presente un solo src — solo WOFF2. Con una copertura browser superiore al 97%, molti progetti moderni non necessitano più di un formato di fallback. La direttiva font-display: swap indica al browser di mostrare immediatamente il testo con un font di fallback mentre il font icona si carica, evitando il testo invisibile.

WOFF2 gode di ampio supporto in tutti i browser moderni. L'unica lacuna significativa è Internet Explorer, che è stato ritirato da Microsoft nel giugno 2022.

La copertura globale combinata si attesta intorno al 97%. Il restante ~3% è composto quasi interamente da installazioni legacy di IE e browser mobili molto datati.

Per illustrare il vantaggio di compressione di WOFF2, di seguito sono riportate le dimensioni tipiche dei file per un font icona contenente 200 glifi:

Il risparmio aumenta con set di icone più grandi. Un font con 500 glifi potrebbe essere di 200 KB in TTF, 120 KB in WOFF e solo 82 KB in WOFF2. Su migliaia di caricamenti di pagina, questi kilobyte si traducono direttamente in tempi di rendering più veloci e costi di banda ridotti.

Sempre. WOFF2 dovrebbe essere il formato predefinito per qualsiasi distribuzione di font icona basata sul web. Offre i file più piccoli, la decompressione più veloce e un supporto browser quasi universale.

L'unico scenario in cui non si userebbe WOFF2 è quando si punta a Internet Explorer — in tal caso, abbinarlo a WOFF come fallback:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

I browser moderni scaricheranno il file WOFF2; IE 11 ricorrerà a WOFF. Tutti ricevono il font, tutti lo ricevono compresso.