Subset di font

Come creare il subset di un font

1. Controlla la licenza. Il subsetting crea una copia modificata del font. Le licenze aperte come la SIL Open Font License (OFL) e Apache 2.0 lo consentono; molte licenze commerciali desktop e web no, o solo a determinate condizioni. Leggi prima la licenza del tuo font.
2. Trascina un file TTF, OTF o WOFF nell’area di caricamento, o cliccaci sopra per sceglierne uno. Il pannello Font originale mostra la famiglia, il formato, la dimensione del file, il numero di glifi e il numero di caratteri mappati dal font.
3. Scegli i Caratteri da conservare: Latino di base, Latin-1, Latino, come in Google Fonts, Francese e Cifre e segni numerici si possono combinare. Aggiungi i tuoi caratteri in Caratteri da un testo (viene conservato ogni carattere distinto del testo) o in Intervalli Unicode, scritti come in CSS: U+0020-007E, U+2013, U+04??.
4. Spunta Rimuovi l’hinting se vuoi il file più piccolo possibile.
5. Clicca su Crea il subset. Il motore (circa 650 KB) si carica la prima volta, poi il font viene elaborato sul tuo dispositivo.
6. Confronta le dimensioni in Risultato, guarda l’Anteprima del subset, poi usa Scarica TTF (o OTF) e Scarica WOFF e copia la regola CSS @font-face.

Il file del font non lascia mai il tuo computer: viene letto, ridotto e reimpacchettato nel browser.

Non esiste un preset specifico per l’italiano, ma non serve: Latin-1 contiene già tutte le lettere accentate italiane (à, è, é, ì, ò, ù e le maiuscole). Aggiungi Latino, come in Google Fonts se ti servono anche il simbolo dell’euro, le virgolette tipografiche o il trattino lungo.

Cosa fa il subsetting

Un font contiene spesso centinaia o migliaia di glifi: cirillico, greco, vietnamita, simboli, varianti. Una pagina scritta in italiano ne usa solo una piccola parte. Questo strumento esegue hb-subset, il subsetter del motore di testo HarfBuzz (lo stesso codice usato da Google Fonts e da molti strumenti di build), compilato in WebAssembly. Conserva i glifi dei caratteri selezionati, più quelli che le funzioni OpenType richiedono per mostrarli (legature come “fi”, maiuscoletto e forme accentate quando sono raggiungibili dai tuoi caratteri), ed elimina il resto. Le tabelle di crenatura e di layout vengono ridotte di conseguenza.

Risultati tipici: un font completo latino + cirillico + greco da 300 KB può scendere a 20–30 KB per un testo in italiano o francese, e un font per un logo ridotto alle lettere di una sola parola pesa spesso pochi kilobyte.

La riga Non presenti nel font elenca i caratteri richiesti che il font non contiene. I browser li disegneranno con un font di ripiego.

Formati di output e unicode-range

• TTF/OTF: il subset mantiene il tipo di contorni dell’originale (TrueType o CFF).
• WOFF: lo stesso font con ogni tabella compressa con zlib. Lo leggono tutti i browser attuali. Un file WOFF in ingresso viene prima decompresso.
• WOFF2 non è disponibile: la sua compressione Brotli e le sue trasformazioni delle tabelle non hanno un encoder nel browser, e nemmeno i file WOFF2 si possono leggere qui. Converti prima il WOFF2 in TTF (per esempio con fontTools). Il tuo server può anche comprimere al volo il TTF/OTF con gzip o Brotli.

La regola CSS @font-face elenca per primo il file WOFF, imposta font-display: swap e aggiunge un unicode-range costruito dai caratteri effettivamente presenti nel subset. Con unicode-range, il browser scarica il file solo quando la pagina usa uno di quei caratteri: puoi così dividere una famiglia in più file (per esempio latino e cirillico) e lasciare che ogni visitatore carichi solo ciò che gli serve. Modifica il Nome font-family perché corrisponda al nome usato nel tuo foglio di stile.