Che cos’è un file WOFF2?

WOFF2 è un formato binario, che ha senso solo per un programma che lo conosce. Si usa per il web.

L’estensione è .woff2 e il nome per esteso è Web Open Font Format 2. Contano entrambi meno di ciò che il file può contenere, ed è di questo che parla il resto della pagina.

W3C lo ha pubblicato nel 2018. La specifica è WOFF 2.0.

L’età serve saperla per un motivo pratico: più un formato è vecchio, più programmi hanno avuto tempo di impararlo.

È pubblicata per intero, quindi la si può implementare partendo dal documento invece che per osservazione: è per questo che il formato compare in così tanti programmi, ed è per questo che file scritti vent’anni fa si aprono ancora. Una specifica pubblicata però non è la stessa cosa di una esente da royalty: dove un formato incapsula un codec, le licenze sui brevetti restano una questione a parte che lo standard non risolve.

WOFF2 conserva il suo contenuto esattamente. Risalvarlo non cambia nulla, quindi puoi aprirlo, modificarlo e risalvarlo quante volte vuoi senza accumulare danni: è questo che ne fa un formato di lavoro e non di consegna.

fonttools e FontForge lo leggono, e così fanno quasi tutti i programmi dello stesso tipo.

Quando un file non si apre, il formato è raramente il problema: più spesso è il programma a essere più vecchio di lui. Convertire in qualcosa di più vecchio è la via d’uscita affidabile, ed è a questo che serve il resto di questo sito.

Qualsiasi browser attuale lo legge.

Puoi quindi metterlo su una pagina o allegarlo a un messaggio senza chiederti che cosa abbia installato chi lo riceve.

WOFF2 è pensato per essere consegnato, non per lavorarci dentro. Modificarne uno è possibile e raramente piacevole; la strada sensata passa dall’originale e da una nuova esportazione.

Il WOFF2 non è un formato di font nel senso in cui lo sono TrueType e OpenType. È un involucro: le stesse tabelle di font, compresse con Brotli e ottimizzate per il modo in cui i dati dei font sono organizzati, più una piccola quantità di metadati. Aprite un WOFF2 e ciò che ne esce è il TTF o l’OTF che vi era entrato.

Per questo è l’unica scelta sensata per un sito web e inutile sul desktop. Esiste per rendere il file più piccolo durante il trasporto, tipicamente dal trenta al cinquanta per cento rispetto all’originale, e i sistemi operativi non lo installano perché non c’è nulla da installare che l’originale non avesse già.

Un font arriva su una pagina tramite una regola @font-face: un nome di famiglia, il file, e il peso e lo stile che quel file rappresenta. Il nome è arbitrario e locale al vostro foglio di stile — non deve corrispondere a come lo chiama la fonderia — e le dichiarazioni di peso e stile sono ciò che permette al browser di scegliere il file giusto quando il testo è impostato in grassetto o corsivo.

L’errore più comune è dichiarare un solo file per una famiglia e poi usare il grassetto nel design. Il browser non si rifiuterà: sintetizzerà un grassetto sfumando il peso normale, e il risultato è visibilmente peggiore del vero grassetto che sta inutilizzato nella stessa cartella. Una regola @font-face per file, con valori onesti di peso e stile, è tutta la disciplina richiesta.

Un tipico font commerciale copre latino, latino esteso, cirillico, greco, simboli valutari e diverse centinaia di glifi che nessuno sul vostro sito digiterà mai. Tutto questo viene scaricato da ogni visitatore.

Il subsetting lo riduce ai soli caratteri effettivamente necessari, e il risparmio di solito supera di gran lunga quello ottenuto dalla compressione. Un font desktop di 300 KB ridotto al latino di base e convertito in WOFF2 arriva spesso attorno ai 25 KB. Fate entrambe le cose, in quest’ordine, e state attenti al subsetter: istruito a mantenere solo i caratteri usati, scarterà volentieri anche le tabelle di legature e alternative, e il CSS che le attiva a quel punto non fa nulla.

Un browser a cui è stato detto di usare un font non ancora scaricato deve decidere cosa fare con il testo nel frattempo. Per impostazione predefinita aspetta — fino a tre secondi nella maggior parte dei browser — e non mostra nulla. Questo è il lampo di testo invisibile, ed è la ragione più comune per cui un sito con font personalizzati sembra lento.

La soluzione è una riga: font-display: swap nella regola @font-face. Il testo viene disegnato immediatamente in un font di riserva e si riadatta al font reale quando arriva. Il riadattamento è visibile ed è molto meno grave di una pagina vuota. font-display: optional va oltre — se il font non è pronto quasi subito, per quella visita non viene usato affatto, il che elimina del tutto il riadattamento al costo che alcuni visitatori non vedano mai il carattere tipografico.

Caricare i font da un servizio di terze parti un tempo era più veloce perché i visitatori arrivavano con il file già in cache da un altro sito. Non è più vero da quando i browser hanno partizionato le cache per sito — ogni visitatore ora lo scarica di nuovo, e la richiesta costa una connessione in più verso un altro server prima ancora che il font inizi a caricarsi.

Ospitare il font in proprio è ora l’opzione più veloce in quasi ogni caso, e rimuove anche una terza parte dal percorso della richiesta, il che conta sia per la normativa sulla privacy sia perché il sito continua a funzionare quando il servizio di qualcun altro non lo fa. Il precaricamento di uno o due font che appaiono sopra la piega resta l’ultimo accorgimento utile.

No. Il WOFF2 è supportato da ogni browser attuale da anni, incluso Safari e i browser mobili, e la catena di ripieghi che un tempo accompagnava ogni regola @font-face — WOFF, TTF, EOT, SVG — è ormai archeologia.

Dichiarare solo il WOFF2 è il consiglio attuale. Qualsiasi cosa non riesca a leggerlo è abbastanza vecchia da ripiegare su un font di sistema, il che è un esito perfettamente accettabile e considerevolmente migliore che servire cinque copie dello stesso carattere tipografico a tutti solo perché un browser che nessuno usa abbia il suo preferito.

Convertire un font desktop in WOFF2 richiede pochi secondi ed è frequentemente una violazione della licenza con cui è arrivato. Le licenze desktop coprono l’installazione del font sui computer e la creazione di cose con esso; l’uso web è normalmente una licenza separata, venduta a parte, spesso a un prezzo legato alle visualizzazioni mensili.

Le licenze aperte sono l’eccezione che vale la pena conoscere: i font rilasciati sotto la SIL Open Font License possono essere convertiti, ospitati in proprio e ridotti liberamente, a condizione di non essere venduti da soli e di non riutilizzare i nomi riservati. Questo copre gran parte di ciò che si trova sui siti di font gratuiti, ed è il motivo per cui tanta parte del web è composta in una manciata di famiglie aperte.