Convertire TTF in WOFF2

Per ospitare un font sul proprio sito si parte da qui: WOFF2 è il formato che tutti i browser attuali scaricano per primo ed è il contenitore più leggero per i dati TrueType già in proprio possesso. Questa pagina genera anche la regola CSS che lo carica.

oppure trascina qui File TTF, OTF, WOFF … ·

Max 95 MB per file· Fino a 20 file· Eliminati dopo 30 minuti

Output

Converti in

I file vengono elaborati sui nostri server ed eliminati dopo 30 minuti.

Come usare questo strumento

1
Caricare i file TTF
Aggiungi tutti i pesi e gli stili che intendi usare, fino a 20 file da 95 MB ciascuno. Funzionano anche i TTF variabili, che mantengono i propri assi.
2
Lasciare attivo il CSS e, se possibile, creare un subset
Includi il CSS @font-face è già selezionato. In Impostazioni avanzate imposta Caratteri da mantenere su Latino di base o Latino + accenti se il sito è in una lingua occidentale, e valuta di impostare Hinting su Rimuovi.
3
Convertire in WOFF2
Premi Converti in WOFF2 e scarica i font insieme al file .css. Carica entrambi sul sito e collega il foglio di stile oppure incolla la regola nel tuo.

Risposta

Come convertire TTF in WOFF2 per il mio sito?

Carica il file .ttf, lascia selezionato Includi il CSS @font-face e premi Converti in WOFF2. Ottieni il file .woff2 più un file .css con una regola @font-face che lo richiama.

Perché WOFF2 è il formato di web font da usare

Un TTF è un insieme di tabelle non compresse: contorni, metriche, crenatura, nomi. Il WOFF2, pubblicato come W3C Recommendation nel 2018, mantiene esattamente quelle tabelle ma le comprime con Brotli, l'algoritmo rilasciato da Google nel 2015, dopo aver riorganizzato i contorni dei glifi perché si comprimano meglio. I test di Google indicano che il WOFF2 è in media circa il 30% più piccolo del vecchio WOFF, e il browser ripristina i dati originali del font dopo il download, quindi la forma delle lettere non cambia.

I font bloccano il rendering, quindi le loro dimensioni contano più di quanto suggeriscano i kilobyte. Finché il web font non arriva, il browser nasconde il testo o mostra un font di riserva, e uno scambio tardivo può spostare il layout. File più piccoli riducono questa finestra, e due opzioni la riducono ancora: Caratteri da mantenere elimina i glifi che le tue pagine non mostrano mai, e Hinting impostato su Rimuovi elimina istruzioni che comunque telefoni e schermi ad alta densità ignorano. Conserva i TTF originali per l'uso desktop; WOFF2 in TTF può estrarre un web font in seguito, ma non può ripristinare i glifi eliminati da un sottoinsieme.

Dimensione del file: TTF e WOFF2 a confronto

TTF, set di caratteri completo

100%

Tabelle del font non compresse, come installate su un desktop

Valore tipico per un font di testo multi-scrittura

WOFF2, sottoinsieme Latino di base

spesso 10–25%

Compressione Brotli e meno glifi; varia in base al font

La regola @font-face per un font WOFF2

Regola di esempio; sostituisci i nomi ed elimina unicode-range se non hai creato un sottoinsieme

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

Supporto di WOFF2 nei browser, versione per versione

2014
Chrome 36
Il browser di Google è il primo a decodificare il WOFF2 per impostazione predefinita.
2015
Firefox 39
Mozilla attiva la decodifica del WOFF2 per impostazione predefinita.
2016
Edge 14
Il primo Edge di Microsoft aggiunge il WOFF2 con Windows 10 Anniversary Update.
2018
W3C Recommendation
La specifica è definitiva; a quel punto anche Safari su macOS e iOS decodifica il WOFF2.

TTF

Font TrueType

TTF è il formato di font TrueType sviluppato da Apple alla fine degli anni Ottanta e rilasciato nel 1991, poi concesso in licenza a Microsoft. Definisce i contorni dei glifi con curve quadratiche e include istruzioni di hinting che rendono il testo nitido sugli schermi. TrueType è supportato da ogni sistema operativo desktop, elaboratore di testi e app di grafica. Mancano alcune funzioni tipografiche avanzate di OpenType e i file sono più grandi rispetto ai formati per font web.

Compressione: Senza perdita
Trasparenza: –
Animazione: –
Introdotto: 1991 · Apple

Convertitore TTF

WOFF2

Web Open Font Format 2

WOFF2 è la seconda versione del Web Open Font Format, basata sulla compressione Brotli di Google e pubblicata come Raccomandazione W3C nel 2018. I file sono circa il 30% più piccoli del WOFF, il che velocizza il caricamento delle pagine. Ogni browser moderno supporta il WOFF2, ed è il formato consigliato per i font web. I sistemi operativi desktop e le app di grafica non possono installarlo direttamente.

Compressione: Senza perdita
Trasparenza: –
Animazione: –
Introdotto: 2018 · W3C (Google)

Convertitore WOFF2

TTF in WOFF2 racchiude un font da desktop nel contenitore compresso con Brotli che i browser preferiscono, così gli stessi glifi arrivano ai visitatori in meno byte; la pagina inversa serve a chi deve installare un font trovato sul web.

Domande frequenti su TTF in WOFF2

Serve ancora un fallback TTF o WOFF accanto al WOFF2?

Per i siti pubblici di oggi, in genere no. Chrome, Edge, Firefox e Safari leggono il WOFF2 da anni, e i pochi browser che non lo fanno, come Internet Explorer 11, raramente giustificano un file in più. Aggiungi l'output di TTF in WOFF come seconda voce src solo se le tue statistiche mostrano visitatori di questo tipo.

Perché il font WOFF2 supera ancora i 100 KB?

La compressione riduce solo lo spazio occupato dai glifi, non il loro numero. Un font che copre latino, cirillico, greco e vietnamita li include tutti. Per portare un font di testo a poche decine di kilobyte serve creare un sottoinsieme con le sole scritture che mostri davvero.

A cosa serve font-display: swap?

Indica al browser di mostrare subito il testo con un font di riserva e di passare al tuo web font appena arriva, invece di nascondere il testo durante il download. Aggiungila alla regola @font-face come nell'esempio sopra, oppure usa optional se preferisci evitare uno scambio tardivo su connessioni lente.

Si può convertire un TTF di Google Fonts in WOFF2 e ospitarlo sul proprio server?

Sì. Le famiglie di Google Fonts sono rilasciate con SIL Open Font License o Apache License, che consentono entrambe la conversione e l'hosting in proprio. Ospitare il file da sé evita anche una richiesta a un server di terzi.

Il WOFF2 funziona nelle newsletter via email?

Solo in alcuni client. Apple Mail e Mail di iOS caricano i web font tramite @font-face, mentre Gmail e la maggior parte delle versioni di Outlook li ignorano e mostrano il font di riserva. Indica sempre un font di sistema sicuro nello stack di font di un'email.

Convertire TTF in WOFF2

Convertitore di font

Come usare questo strumento

Caricare i file TTF

Lasciare attivo il CSS e, se possibile, creare un subset

Convertire in WOFF2