Un font non è solo «belle lettere». Controlla l’attenzione, definisce l’atmosfera e incide direttamente sulla leggibilità. Un font scadente allontana i visitatori da un sito nel giro di pochi secondi, anche se il contenuto è eccellente.

A volte visiti un sito web e noti che il testo ha un aspetto ricercato ed elegante. Vorresti scoprire quale font è stato usato, per un tuo progetto o semplicemente per curiosità professionale. Ma i proprietari dei siti non etichettano la loro tipografia, e alcuni rinominano intenzionalmente i font nei CSS per renderne più difficile l’identificazione.

Buone notizie: identificare un font da qualsiasi sito web è possibile. Non serve essere uno sviluppatore front-end o un designer; tre approcci coprono praticamente tutti gli scenari. Dall’ispettore integrato del browser alle estensioni con un clic e ai servizi per i font nelle immagini.

💡 Panoramica rapida:

• Apri gli Strumenti per sviluppatori (F12) e cerca font-family nella scheda Computed

• Installa Whatfont o Fontanello e passa il mouse sul testo

• Carica uno screenshot su Font Squirrel Matcherator o WhatTheFont

1. Ispettore integrato del browser

Il metodo più accessibile, che non richiede alcuna installazione. Ogni browser moderno (Chrome, Firefox, Edge, Safari) contiene gli strumenti per sviluppatori (DevTools). Tra questi c’è un ispettore che mostra le proprietà CSS di qualsiasi elemento della pagina, incluso il font.

Come aprirlo. Su Windows, premi Ctrl + Shift + I; su Mac, Cmd + Shift + I. Oppure fai clic con il tasto destro sul testo e seleziona «Ispeziona» / «Visualizza codice». Si aprirà il pannello DevTools.

Sul lato sinistro del pannello vedrai la struttura HTML; a destra, le regole CSS. Ma il percorso più rapido per arrivare al font passa dalla scheda Computed. Scorri l’elenco delle proprietà fino a font-family; questo è il nome del carattere tipografico. Accanto, il browser mostra il file del font specifico che viene renderizzato nella pagina.

C’è anche un percorso alternativo per chi vuole vedere tutti i font del sito in una volta sola. Negli Strumenti per sviluppatori di Chrome, apri la scheda Application → sezione Frames → cartella Fonts. Il browser mostrerà un elenco di tutti i file dei font caricati con il relativo URL e formato (woff2, ttf). È più lento, ma rivela ciò che è nascosto in @font-face.

Pro: gratuito, non richiede estensioni, mostra il nome esatto del font e il suo stile (spessore, stile, dimensione). Contro: richiede diversi clic; il metodo non funziona su dispositivi mobili.

2. Estensioni per il browser

Se controlli i font di frequente, un’estensione ti farà risparmiare ore. Il principio è semplice: passi il mouse sul testo e l’estensione mostra il nome del font e i suoi parametri CSS in un tooltip.

2.1 Whatfont

La soluzione più diffusa in questa nicchia. Consigliata da Wired, Lifehacker e SwissMiss. L’installazione dal Chrome Web Store richiede un clic.

Dopo l’installazione, fai clic sull’icona dell’estensione nell’angolo in alto a destra del browser per attivare la modalità di rilevamento. Ora, quando passi il mouse su qualsiasi testo, Whatfont mostra il carattere tipografico direttamente sopra il cursore. Cliccando sul testo appare la scheda completa: famiglia, spessore, dimensione, interlinea e colore.

L’estensione funziona anche su Firefox e Safari (tramite un port). Gratuita, senza registrazione, open source su GitHub.

🔗 Whatfont nel Chrome Web Store

2.2 Fontanello

Mentre Whatfont mostra le informazioni al passaggio del mouse, Fontanello funziona tramite clic destro. Seleziona un testo su un sito, premi il tasto destro del mouse e scegli Fontanello dal menu contestuale. Appare un pannello con informazioni complete: nome del font, spessore, dimensione, colore e persino il rapporto di contrasto del testo rispetto allo sfondo (un criterio di accessibilità).

Fontanello è disponibile per Chrome e Firefox. Un vantaggio aggiuntivo: l'estensione non appesantisce la pagina con un tracciamento costante; si attiva solo quando la richiami.

🔗 Fontanello nel Chrome Web Store

2.3 Fonts Ninja

Uno strumento più potente, con una funzione di «DNA del font»: un algoritmo proprietario che analizza i file dei caratteri tipografici per ottenere risultati più precisi. Oltre a identificare i font al passaggio del mouse, Fonts Ninja consente di salvare i font trovati nei segnalibri e di visualizzare un riepilogo di tutti i caratteri tipografici usati in una pagina.

C'è un avvertimento: i segnalibri e alcune funzioni richiedono la registrazione. Ma l'identificazione di base dei font funziona senza account. L'estensione è a pagamento (con un periodo di prova), quindi vale la pena prenderla in considerazione se lavori con la tipografia a livello professionale.

🔗 Fonts Ninja nel Chrome Web Store

3. Come identificare un font da un'immagine

L'ispettore e le estensioni sono impotenti quando il font fa parte di un'immagine: un logo, un banner o un meme. Il testo in un'immagine non è un elemento HTML, il che significa che non ha proprietà CSS. Per questi casi esistono servizi specializzati.

3.1 Font Squirrel Matcherator

Uno strumento gratuito di Font Squirrel, collaudato negli anni. Ecco come funziona:

• Carica uno screenshot o un frammento di testo nell'interfaccia di Matcherator
• Seleziona l'area che contiene le lettere (marcatore blu nella barra degli strumenti)
• Clicca su «Matcherate It!»

Il servizio analizza le forme dei caratteri e restituisce un elenco di corrispondenze più vicine dal suo database. Se non c'è una corrispondenza esatta, suggerisce alternative visivamente simili con una percentuale di somiglianza. Funziona anche con i font scritti a mano, purché le lettere non si tocchino tra loro.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont di MyFonts

WhatTheFont utilizza deep learning e un database di oltre 233.000 font. Carica un'immagine, clicca sulla lettera desiderata e l'algoritmo trova le corrispondenze. Il suo principale vantaggio rispetto a Matcherator: WhatTheFont gestisce le scritture connesse, dove le lettere si uniscono tra loro. Si tratta di una capacità tecnica significativa che i servizi più datati non possiedono.

Per risultati ottimali, carica un testo orizzontale con una buona risoluzione su uno sfondo contrastante.

🔗 WhatTheFont su MyFonts

Video: identificare un font in un minuto

Una breve dimostrazione su come installare l'estensione Identify Font e trovare un font su qualsiasi sito web senza aprire DevTools:

⁉️🤔 Domande frequenti

Posso identificare un font su un sito mobile?

Sì, ma con dei limiti. Le estensioni non sono disponibili sui browser mobile, e nemmeno i DevTools. L'approccio pratico: fai uno screenshot del testo sul telefono e caricalo su WhatTheFont o Font Squirrel Matcherator tramite computer. Se il testo sul sito è grande e nitido, il servizio riconoscerà il carattere tipografico dallo screenshot con la stessa efficacia di un'immagine da desktop.

Cosa succede se il proprietario del sito ha rinominato il font nei CSS?

Alcuni sviluppatori cambiano font-family negli stili con un nome arbitrario, anche se in realtà stanno caricando un file font specifico. In questo caso, il metodo DevTools tramite la scheda Application (Frames → Fonts) mostrerà gli URL effettivi dei file font. Dal nome del file (ad esempio, Inter-Regular.woff2) puoi identificare facilmente il carattere tipografico. Estensioni come Fonts Ninja con "analisi DNA" aggirano la rinomina analizzando il file stesso anziché la proprietà CSS.

Qual è il metodo più preciso?

Per il testo su una pagina: l'estensione Whatfont o Fontanello; un passaggio del mouse e hai il nome esatto. Per le immagini: WhatTheFont con il suo motore a rete neurale è più preciso di Matcherator per i font corsivi e decorativi. Per la massima certezza con CSS rinominati: DevTools → Application → Fonts, dove vedi l'URL reale del file font; qui l'errore è impossibile.

Bisogna pagare per identificare i font?

No. Tutti i metodi citati in questo articolo sono gratuiti. DevTools è integrato nel browser. Whatfont e Fontanello sono estensioni gratuite con codice open source. Font Squirrel Matcherator è un servizio web gratuito. WhatTheFont è gratuito (monetizzato tramite la vendita di font, non l'identificazione). Fonts Ninja ha una versione a pagamento, ma l'identificazione base dei font funziona senza pagare.

Si può applicare automaticamente un font scoperto al proprio sito?

Tecnicamente sì, ma legalmente dipende dalla licenza del font. Puoi identificare il carattere tipografico liberamente. Tuttavia, puoi usarlo sul tuo sito solo se il font ha una licenza aperta (SIL Open Font License, Apache 2.0) o se hai acquistato una licenza commerciale. Google Fonts, Font Squirrel e Adobe Fonts sono fonti sicure con termini di utilizzo chiari.

Quale metodo di identificazione font scegliere

Se affronti questa questione per la prima volta, inizia con DevTools. È gratuito, richiede 30 secondi e non necessita di installazione. Per un lavoro regolare con la tipografia, installa Whatfont: un passaggio del mouse invece di quattro clic.

Quando un font è nascosto in un'immagine, carica uno screenshot su WhatTheFont. È il servizio di ricerca basato su immagini gratuito tecnologicamente più avanzato. E se il carattere tipografico è rinominato nei CSS, accedi al file tramite Application → Fonts in DevTools: questo percorso rivela la verità a prescindere da qualsiasi trucco dello sviluppatore.

Ricorda: trovare un font non è difficile. La parte più complessa è applicarlo correttamente. Verifica la licenza, testa la leggibilità su contenuti reali e non mescolare più di due caratteri tipografici in un singolo progetto. La buona tipografia non urla: funziona.