Se stai servendo font TTF sul tuo sito web, stai inviando circa il 30% in più di dati di quanto necessario. WOFF2 consegna lo stesso carattere in un file significativamente più piccolo, e tutti i browser moderni lo supportano. Ecco come convertire — e perché conta per le prestazioni del tuo sito.
Perché WOFF2?
WOFF2 (Web Open Font Format 2.0) utilizza la compressione Brotli per ridurre le dimensioni dei file font di circa il 30% rispetto al TTF, senza perdita di qualità. I glyph delle font, il hinting, il kerning e tutte le caratteristiche tipografiche vengono preservati identicamente. Quando un browser carica un file WOFF2, lo decomprime allo stesso dato del TTF originale.
L'impatto sulle prestazioni è reale. I font sono risorse che bloccano il rendering — il browser non visualizzerà il testo finché i font non saranno caricati. Un TTF da 120KB che diventa un WOFF2 da 84KB significa che il testo appare più velocemente, soprattutto su connessioni mobili. Google Core Web Vitals misurano direttamente questo: font più piccoli migliorano Largest Contentful Paint (LCP) e riducono Cumulative Layout Shift (CLS) dovuto allo scambio di font.
Il supporto browser è universale. Chrome, Firefox, Safari e Edge supportano tutti WOFF2. Gli unici browser che non lo supportano sono Internet Explorer e vecchi browser Android — entrambi ben al di sotto dell'1% del traffico globale.
Come convertire
Utilizzo di WOFF2 in CSS
Una volta che hai il tuo file WOFF2, riferisciti ad esso nel tuo foglio di stile. Elencare WOFF2 per primo con un fallback TTF per massima compatibilità:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}La direttiva font-display: swap indica al browser di mostrare immediatamente il testo di fallback e di sostituire il font personalizzato una volta caricato, eliminando il testo invisibile durante il caricamento del font.
Conformità alle licenze dei font
Molte licenze commerciali per font includono clausole che limitano l'upload di file font a servizi web di terze parti. Questo crea un problema: devi convertire in WOFF2 per prestazioni, ma la maggior parte degli strumenti di conversione richiede l'upload del font su un server.
Naturalmente, controlla sempre i termini specifici della licenza del tuo font. Ma la natura esclusivamente locale della conversione di Morph elimina la preoccupazione di conformità più comune.
Altre conversioni di font
Morph supporta anche OTF a WOFF2, WOFF a WOFF2, TTF a OTF e ogni altra combinazione di TTF, OTF, WOFF e WOFF2. Hai bisogno di font gratuiti per iniziare? Sfoglia più di 1.500 font gratuiti nella libreria dei font di Morph.