🚀 Come ridurre Font Awesome a 10 KB e velocizzare il tuo sito web
Le icone rendono i siti web intuitivi. Navigazione, social media, pulsanti di azione: ovunque servono piccoli segnali visivi che i visitatori riconoscono all'istante. Font Awesome risolve questo problema da 14 anni con una libreria di oltre 2000 icone gratuite che si collegano con una sola riga. Il problema è che quella singola riga porta con sé centinaia di kilobyte.
Il pacchetto completo di Font Awesome 7 Free pesa circa 150 KB per stile solo per i file webfont, senza il CSS. Aggiungendo il CSS (altri ~100 KB minificati), ogni primo caricamento della pagina consegna all'utente oltre 250 KB. Peggio ancora: se usi 8-10 icone su duemila, il browser scarica comunque tutto. Su rete mobile 4G, questo significa 2-3 secondi extra di attesa. Google PageSpeed penalizza questi carichi con una riduzione diretta del punteggio.
Ma il problema è risolvibile. Ti mostreremo come estrarre dalla libreria solo le icone effettivamente usate sul tuo sito e ottenere una dimensione finale di 10-15 KB senza perdere funzionalità. Tutti i metodi sono coperti: da quelli automatici a quelli manuali, dagli strumenti online alle utility CLI. Nessuna magia, solo tecniche che funzionano.
💡 Panoramica rapida:
- Analizza il tuo sito e compila un elenco delle icone Font Awesome effettivamente in uso
- Scegli il metodo di ottimizzazione adatto alla tua situazione: lo strumento online FontCut, l'utility CLI fa-subset o il meccanismo ufficiale Kit
- Per il massimo controllo, segui la strada manuale con FontForge o IcoMoon: richiede impegno ma ti dà il controllo completo sul file finale
- Genera il webfont ridotto e il CSS, sostituisci con essi la versione completa sul tuo server
- Misura la velocità prima e dopo: il miglioramento tipico del PageSpeed Score è di 20-40 punti
Perché ridurre Font Awesome?
Il motivo principale è la velocità di caricamento. Uno studio di Google mostra che il 53% dei visitatori mobile abbandona una pagina se impiega più di 3 secondi a caricarsi. Ogni 100 KB extra sul percorso critico di rendering aumentano il tempo fino al First Contentful Paint.
Font Awesome Free 7 contiene tre stili: Solid, Regular e Brands. In totale, sono oltre 2000 icone e circa 450 KB di file webfont compressi. Una tipica landing page o blog usa 10-20 icone, meno dell'1% della libreria. Il browser scarica tutto il resto per niente.
Il secondo motivo sono i Core Web Vitals. La metrica LCP (Largest Contentful Paint) dipende direttamente da quanto velocemente il browser riceve e renderizza i font. Un Font Awesome non ridotto blocca la resa del testo finché il webfont non viene caricato. Dopo il subsetting, il file diventa abbastanza piccolo che il browser lo riceve entro la prima richiesta di rete.
Il terzo motivo è il traffico mobile. Gli utenti con piani dati limitati non ti ringrazieranno per 400 KB extra su ogni pagina. Il subsetting ti restituisce il controllo sul tuo budget di caricamento.
Dati reali: ridurre un file webfont da 345 KB a 14,5 KB ha fatto salire il Lighthouse Performance Score da 52 a 89 punti su un progetto. La differenza è visibile a occhio nudo: la pagina diventa interattiva quasi istantaneamente.
Metodo 1: meccanismo ufficiale Kit (consigliato)
L'approccio più semplice e supportato è usare un Font Awesome Kit con subsetting integrato. Questo metodo funziona con un account gratuito e non richiede strumenti di terze parti.
Come funziona
Un Kit è un pacchetto Font Awesome personalizzato che configuri nella tua dashboard su fontawesome.com. Nelle impostazioni del Kit, c'è una sezione "Icon Selection" con due modalità:
- Per stile: selezioni gli stili che ti servono (Solid, Regular, Brands) e il Kit carica solo quelli scelti. Già in questo passaggio, tagli due stili su tre se ti serve solo Solid.
- Per icona: specifichi icone particolari tramite ricerca e il Kit genera un file che contiene solo quelle. Questa modalità fornisce la massima compressione.
Dopo aver salvato le impostazioni, il Kit ricostruisce automaticamente il pacchetto. Ottieni un tag <script> da inserire nel <head> del tuo sito. Il CDN di Font Awesome distribuisce la versione già ridotta. Nessun file locale, nessuna compilazione manuale.
Vantaggi dell'approccio Kit
- Nessuna necessità di scaricare e ospitare file: il CDN di Font Awesome distribuisce il pacchetto ridotto globalmente
- Quando aggiungi una nuova icona, aggiorni semplicemente l'elenco nelle impostazioni del Kit e la ricostruzione avviene automaticamente
- Funziona con Font Awesome Pro, inclusi gli stili Duotone e Sharp
- Supporta entrambe le modalità SVG+JS e Webfonts+CSS
Quando un Kit non è adatto
L'unica limitazione: un Kit ridotto non può essere scaricato sul proprio server con il piano gratuito. Se ospitare i font localmente è critico per te (rete interna, policy di sicurezza), un Kit non è un'opzione. Allora guarda i metodi 2 e 3.
Metodo 2: strumento online FontCut
Se non vuoi registrarti a Font Awesome o preferisci un file ZIP pronto da mettere nel tuo repository, prova FontCut.com. È un generatore online gratuito progettato specificamente per Font Awesome 6.4.0 e Bootstrap Icons.
Il processo ha tre passaggi:
- Seleziona un set di icone (Font Awesome Free 6.4.0, l'ultima versione disponibile)
- Seleziona le icone che ti servono nella griglia visiva
- Scarica un archivio ZIP con i file CSS e webfont, caricalo sul tuo server
Il risultato è un pacchetto autonomo da 10-15 KB che ospiti tu stesso. Lo strumento non richiede registrazione e l'anteprima mostra la dimensione finale in tempo reale.
Limitazione: FontCut usa FA 6.4.0, non la versione corrente 7.2.0. Per la maggior parte dei progetti, la differenza è trascurabile: le icone in stile solid non cambiano tra le versioni. Ma se ti servono icone aggiunte in FA 7 (pacchetti Pro+), FontCut non le offrirà.
Metodo 3: utility CLI fa-subset (per sviluppatori)
Il rilevamento automatico delle icone usate è l'approccio più preciso. L'utility fa-subset (Python, BSD-2-Clause, istruzioni su Dev.to) analizza il codice sorgente del tuo progetto, trova tutte le classi fa-* e genera un webfont ridotto contenente solo le icone effettivamente usate.
Installazione:
1 pip install fonttools
Esecuzione base (simulazione per analisi):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
L'utility restituisce un elenco delle icone trovate e la dimensione prevista del file ottimizzato. Senza il flag --dry-run, genera CSS e webfont pronti all'uso nella cartella ./optimised.
Punti di forza di fa-subset:
- Analizza file PHP, HTML, JS, Blade, Twig, Vue, React e qualsiasi file di testo nel progetto
- Gestisce le icone duotone (doppi codepoint in Font Awesome 6+)
- Può produrre un report JSON per pipeline CI/CD:
--report-json ./report.json --strict-styles - Funziona con temi WordPress, template Laravel e componenti React/Vue
Risultato reale in produzione: compressione da 803 KB (font + CSS) a 14,5 KB, una riduzione del 98%. L'utility è gratuita e non è legata ai servizi Font Awesome.
Metodo 4: IcoMoon (creatore visuale di font)
IcoMoon è un'applicazione web per creare font di icone personalizzati. È disponibile su icomoon.io/app. L'approccio è leggermente più complesso dei Kit ma offre una capacità unica: mixare icone da librerie diverse in un unico file.
Passaggio 1: seleziona il pacchetto Font Awesome
Vai su icomoon.io/app, clicca su «Add Icons From Library», trova Font Awesome nell'elenco e clicca su «Add».
Passaggio 2: seleziona le icone che ti servono
Nella finestra di selezione, marca tutte le icone usate sul tuo sito cliccandoci sopra. Puoi selezionare più librerie contemporaneamente (ad esempio, Font Awesome + Material Icons) e ottenere un unico file con icone da entrambi i set.
Passaggio 3: genera e scarica il font
Dopo la selezione, clicca sul pulsante «Generate Font» in fondo alla pagina. IcoMoon mostrerà tutte le icone selezionate e fornirà un pulsante «Download». L'archivio ZIP contiene i file webfont (woff, woff2, eot, svg, ttf), un file style.css e una demo demo.html.
Salva i file nel repository del tuo sito e collega style.css nel <head>. Se qualcosa è andato storto, apri demo.html dall'archivio: mostra esattamente come il font è collegato e utilizzato.
IcoMoon funziona bene quando devi mixare icone da set diversi o quando non vuoi dipendere in alcun modo dalla CDN di Font Awesome.
Metodo 5: potatura manuale con FontForge
Il metodo più laborioso ma anche quello che offre il massimo controllo. È adatto quando vuoi capire ogni byte del file finale o lavori in un ambiente senza accesso a servizi esterni.
Passo 1: localizza il font
Scarica Font Awesome dal sito ufficiale. Rimuovi il link CDN dal <head> se era presente. Estrai l'archivio nella repository del tuo sito.
Collega i CSS in locale:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Pulisci la cache del browser e ricarica il sito. Le icone dovrebbero apparire come prima, ma ora controlli tu i file sul tuo server.
Passo 2: rimuovi i file superflui
Dopo aver estratto l'archivio di Font Awesome, vedrai questa struttura di cartelle:
Per il funzionamento servono solo i file CSS e i webfont. I browser moderni richiedono solo il formato woff2, quindi i file ttf, eot e svg possono essere eliminati.
Elimina i sorgenti Less e SCSS se non prevedi di compilarli. Tieni solo css/ e fonts/ con il file fa-solid-900.woff2 (o l'equivalente per la tua versione).
Passo 3: modifica il webfont in FontForge
Scarica e installa FontForge (un editor di font gratuito e open source). Apri il file .woff2 tramite File → Apri.
Nell'interfaccia di FontForge, individua il pannello dei glifi. Per evitare di scorrere manualmente, vai su Encoding → Compact: tutte le posizioni occupate si sposteranno all'inizio.
Ora la parte più critica: tieni premuto Shift e seleziona tutti i glifi che il tuo sito NON utilizza. Eliminali (Edit → Clear). Tieni solo le icone effettivamente presenti nel tuo markup: social media, frecce, icone menu, loghi di brand.
Salva il risultato: File → Generate Fonts. Seleziona Web Open Font Format (woff2) e specifica il nome del file. Sostituisci il webfont originale nella cartella fonts/ con la versione potata.
Ricarica il sito e verifica tutte le icone. Se qualcuna è scomparsa, hai eliminato un glifo necessario: riapri FontForge e ripeti la selezione con più attenzione.
O forse conviene solo cambiare libreria?
A volte l'ottimizzazione migliore non è ottimizzare Font Awesome ma scegliere uno strumento che è più leggero in partenza. Le alternative moderne forniscono icone in formato SVG con tree-shaking a livello di import: solo le icone che importi esplicitamente finiscono nel bundle.
Tre opzioni che vale la pena considerare:
Lucide Icons: oltre 1460 icone, licenza MIT, successore diretto di Feather Icons. Icone su una griglia a 24px, stilisticamente vicine a FA, ma il pacchetto pesa pochi kilobyte con il tree-shaking. Per React/Vue/Svelte, componenti nativi con prop
size,colorestrokeWidth.Phosphor Icons: oltre 1400 icone in sei stili (thin, light, regular, bold, fill, duotone). Ogni icona si importa individualmente:
import { House } from '@phosphor-icons/react'. Nessuna zavorra inutilizzata.Bootstrap Icons: oltre 2000 icone SVG, gratuite, in sviluppo attivo. Compatibilità diretta con l'ecosistema Bootstrap, ma utilizzabili in modo indipendente. I file SVG separati permettono di incorporare le icone inline senza richieste aggiuntive.
Se il tuo sito gira su WordPress, consulta la nostra guida su come aggiungere Font Awesome a WordPress. Per chi vuole approfondire il tema dei web font, c’è un’analisi su come caricare i web font senza bloccare il rendering.
⁉️🤔 Domande frequenti
Cos’è il subsetting delle icone e perché serve?
Il subsetting è il processo che crea una versione ridotta di un font di icone contenente solo le icone effettivamente usate sul sito. Il pacchetto completo di Font Awesome 7 Free pesa circa 450 KB in file webfont compressi. Un sito tipico usa 10-20 icone; dopo il subsetting, il file si riduce a 10-15 KB. La differenza di caricamento si riflette immediatamente nel punteggio PageSpeed: il miglioramento tipico è di 20-40 punti.
Quante icone carica il browser se collego Font Awesome via CDN?
Tutte. Un link CDN a
all.min.cssscarica il set completo di tre stili: Solid, Regular e Brands. Il browser carica tutti i file webfont anche se nella pagina viene usata una sola icona. È proprio questo il motivo per cui l’approccio CDN senza Kit è il più costoso in termini di byte. Un Kit con l’impostazione "By Icon" risolve il problema: la CDN fornisce solo le icone che hai selezionato esplicitamente nelle impostazioni.
Quale metodo di ottimizzazione scegliere per un sito WordPress?
Se il tuo sito gira su WordPress e non vuoi avere a che fare con la CLI, usa il Kit ufficiale (metodo 1). La configurazione richiede 5 minuti nella dashboard di fontawesome.com e i risultati vengono serviti immediatamente via CDN. Se la policy di sicurezza vieta l’uso di CDN, FontCut (metodo 2) funziona: scarica lo ZIP, caricalo via FTP e collegalo in
header.php. Per chi sviluppa e vuole automazione, fa-subset (metodo 3) può scansionare i template PHP del tema e ricostruire il font a ogni deploy.
È sicuro eliminare i formati webfont ttf, eot e svg?
Sì. I browser moderni (Chrome, Firefox, Safari, Edge) supportano woff2 dal 2016. Secondo i dati di Can I Use, il supporto copre oltre il 98% del mercato globale dei browser. Il formato woff2 offre una compressione migliore (in media il 30% più compatto rispetto a woff). I file eot (necessari solo per IE8), ttf e svg possono essere eliminati senza problemi dalla cartella dei font. Tieni solo woff2 e, se ti serve supporto per vecchie versioni di Safari su iOS 12 e precedenti, aggiungi woff come fallback.
Vale ancora la pena usare Font Awesome nel 2026?
Dipende dal progetto. Se hai già Font Awesome implementato e usi 5-10 icone, il subsetting (con uno qualsiasi dei metodi sopra) risolve il problema del peso in un’ora. Se il progetto è nuovo e stai scegliendo una libreria da zero, considera Lucide o Phosphor: sono nate pensando al tree-shaking fin dall’inizio e producono zero overhead. Font Awesome resta il leader per quantità di icone nell’ecosistema e integrazioni, ma il suo costo in peso senza subsetting è più alto rispetto alle alternative SVG moderne.
Vale la pena preoccuparsi per poche decine di kilobyte?
Decisamente sì. Ogni kilobyte non ottimizzato sul percorso critico di rendering riduce direttamente la conversione. Amazon ha calcolato che 100 ms di ritardo nel caricamento costano l’1% di vendite. Google penalizza le pagine lente nei risultati di ricerca mobile. Non è perfezionismo, è economia diretta.
Scegli il metodo adatto alla tua situazione:
- Minimo sforzo: Kit con impostazione By Icon. 5 minuti, risultato immediato su CDN.
- Hosting locale, senza registrazioni: FontCut. 10 minuti, ZIP sul tuo server.
- Automazione CI/CD: fa-subset. Scansiona il codice, ricostruisce al deploy.
- Controllo totale: FontForge o IcoMoon. Richiede più tempo, ma conosci ogni glifo.
Passare da 450 KB a 15 KB cambia radicalmente la percezione della velocità. Prova su un progetto, misura PageSpeed prima e dopo. Il risultato parlerà da solo.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.