Stai scorrendo una serie di siti web e all'improvviso, eccola lì. Il font perfetto che cercavi da settimane. Quel particolare svolazzo sulla "a" minuscola e proporzioni che fanno gridare di gioia il tipografo che è in te. Ma il nome? L'autore del sito non lo ha indicato, scavare nel CSS richiede tempo e l'assistenza del designer è in ferie.

Un font sullo schermo è una proprietà CSS, non un'immagine. Il browser fornisce onestamente nome, spessore, dimensione e persino la fonderia a chiunque sappia dove guardare. Negli ultimi anni, gli strumenti per l'identificazione dei font si sono evoluti da una scheda degli Strumenti per sviluppatori a estensioni che mostrano i prezzi delle licenze, suggeriscono alternative gratuite e salvano i ritrovamenti in una raccolta.

In questa guida, cinque metodi: da quello immediato (tasto destro) a quello avanzato (analisi del file binario del font). Non servono lauree in design né abbonamenti a pagamento.

💡 Panoramica rapida:

• Fontanello: tasto destro e il nome del font è già nel menu contestuale (Chrome, Firefox, Edge, iOS)
• WhatFont: passa il cursore sul testo, vedi la famiglia, la dimensione, il colore e il servizio di distribuzione (Chrome, Safari)
• Fonts Ninja: identifica il font, mostra il prezzo, salva i ritrovamenti nei segnalibri (Chrome)
• Strumento di ispezione integrato: metodo universale per qualsiasi browser, senza estensioni
• What Can My Font Do?: carica il file del font, il servizio decodifica anche un font rinominato

Confronto dei metodi: tabella

1. Fontanello, il font nel menu contestuale

Fontanello, un'estensione che aggiunge il nome del font direttamente al menu contestuale del browser. Seleziona il testo, clicca con il tasto destro, scegli Fontanello e vedrai non solo la famiglia di font, ma anche spessore, dimensione, spaziatura delle lettere e colore. Nessun pannello aggiuntivo, nessuna necessità di attivare lo strumento nella barra degli strumenti.

L'estensione funziona su Chrome, Firefox, Edge e iOS. Questo è il metodo più veloce tra tutti quelli esistenti: letteralmente un'azione. Non serve passare il cursore da nessuna parte, non serve passare da una scheda all'altra degli Strumenti per sviluppatori, tasto destro e la risposta è proprio davanti a te.

Pro:

• Un'azione: tasto destro e risultato nel menu contestuale
• Supporta quattro piattaforme: Chrome, Firefox, Edge, iOS
• Mostra attributi aggiuntivi: dimensione, colore, spaziatura delle lettere

Contro:

• Non identifica i font rinominati
• Non salva la cronologia dei font trovati

Fontanello, la scelta per chi dà valore alla velocità. Un clic, nessuna attivazione, nessun movimento extra.

🔗 Fontanello nel Chrome Web Store

2. WhatFont, passa il mouse e scopri

WhatFont, una delle estensioni più popolari per l'identificazione dei font: tre milioni di utenti e una valutazione di 4,0 nel Chrome Web Store. Il principio è semplice: clicca sull'icona di WhatFont nella barra degli strumenti, passa il cursore sul testo e sopra la pagina apparirà un pannello con le informazioni complete sul font.

A differenza di Fontanello, WhatFont ti permette di evidenziare più frammenti di testo contemporaneamente e confrontare visivamente i font. L'estensione mostra la famiglia di font, lo spessore, la dimensione, l'interlinea e il colore. Un plus non da poco: identifica la fonte di distribuzione del font: Google Fonts API, Adobe Fonts (ex Typekit) o @font-face locale.

Pro:

• Tre milioni di utenti, estensione stabile e collaudata
• Mostra il servizio di distribuzione del font: Google Fonts, Adobe Fonts, locale
• Funziona su Chrome e Safari

Contro:

• Richiede un clic sull'icona per l'attivazione, un'azione in più rispetto a Fontanello
• Nessuna versione per Firefox

🔗 WhatFont nel Chrome Web Store

3. Fonts Ninja, il coltellino svizzero del designer

Fonts Ninja è andato oltre la semplice identificazione del font. Oltre al nome e alle proprietà CSS, l'estensione mostra: quanti stili sono disponibili per il font trovato, il nome della fonderia produttrice, il prezzo della licenza e, cosa particolarmente preziosa, un elenco di font simili.

Il sistema di segnalibri integrato fa risparmiare ore ai designer. Hai trovato un font interessante sul sito di qualcun altro, lo hai salvato nella raccolta direttamente dall'estensione e in seguito hai condiviso l'elenco con il team. La ricerca funziona per forma del glifo, tipo di licenza e prezzo, comodo quando hai bisogno di un'alternativa economica a un font costoso.

L'estensione è usata da 900 mila persone, valutazione 4,4. Per ora funziona solo su Chrome. Come dimensioni è più pesante di WhatFont, 2 MB contro 741 KB, ma la funzionalità lo giustifica.

Pro:

• Mostra il prezzo del font, la fonderia e alternative simili
• Segnalibri integrati per i font trovati
• Ricerca per forma del glifo e tipo di licenza

Contro:

• Solo Chrome, nessuna versione per Safari e Firefox
• Più pesante delle alternative: 2 MB contro i 741 KB di WhatFont

🔗 Fonts Ninja nel Chrome Web Store

4. Strumento di ispezione integrato, metodo universale senza estensioni

Quando non vuoi installare estensioni o lavori in un browser per cui non esistono, ogni browser moderno ha uno strumento integrato per l'identificazione dei font. È più lento delle estensioni, ma non richiede alcuna installazione.

Google Chrome. Clicca con il tasto destro sul testo e scegli "Ispeziona". Si aprirà il pannello Strumenti per sviluppatori. Nella scheda Stili trova la proprietà font-family: elenca tutti i font applicati all'elemento. Il primo dell'elenco è quello attualmente in uso.

Firefox. Firefox ha una scheda "Font" dedicata nello strumento di ispezione. Tasto destro → "Ispeziona elemento" → vai alla scheda Font. Vedrai non solo il nome del font, ma anche il suo spessore, la dimensione e persino un'anteprima dei glifi, cosa che nessuna estensione offre.

Safari. Per prima cosa abilita il menu "Sviluppo": Safari → Preferenze → Avanzate → seleziona "Mostra menu Sviluppo nella barra dei menu". Ora clicca con il tasto destro sul testo → "Ispeziona elemento". Nella barra laterale scegli "Stili, Calcolati" e trova la sezione font-family.

Pro:

• Niente da installare, integrato in ogni browser
• Firefox mostra l'anteprima dei glifi nella scheda Font
• Funziona per qualsiasi elemento, non solo per il testo

Contro:

• Più lento delle estensioni: 10-30 secondi contro un risultato immediato
• Scomodo per la visualizzazione massiva dei font su una pagina

5. What Can My Font Do?, decodificare i font rinominati

Un serio ostacolo per tutte le estensioni e lo strumento di ispezione è un font rinominato. Quando uno sviluppatore assembla un pacchetto personalizzato, il nome font-family perde il collegamento con l'originale: invece di Inter o Roboto vedi qualcosa come custom-font-3742. Le estensioni sono impotenti: leggono la proprietà CSS, non il file stesso.

La soluzione è il servizio What Can My Font Do?. L'algoritmo:

• Attraverso lo strumento di ispezione di Chrome, vai alla scheda Applicazione → Frame → Font. Trova il file del font facendo corrispondere il nome del file a quello che vedi in font-family.
• Apri il file del font in una nuova scheda: verrà scaricato.
• Trascina il file scaricato nella finestra di What Can My Font Do?. Il servizio analizzerà i dati binari e mostrerà: il vero nome del font, la fonderia, il numero di glifi, il supporto linguistico, la licenza e tutti i caratteri in forma tabellare.

Questo non è un metodo immediato: richiede un minuto o due e una conoscenza di base degli Strumenti per sviluppatori. Ma quando le estensioni falliscono contro un font rinominato o assemblato su misura, What Can My Font Do? è l'unico metodo funzionante.

Pro:

• Identifica i font rinominati tramite l'analisi del file binario
• Mostra informazioni complete: glifi, lingue, licenza
• Servizio web gratuito, nessuna installazione richiesta

Contro:

• Lento: da uno a due minuti per font
• Richiede la comprensione della scheda Applicazione negli Strumenti per sviluppatori

Video: come identificare un font in un minuto

Guarda un tutorial passo-passo di tutti e cinque i metodi in azione, dalle estensioni allo strumento di ispezione:

⁉️🤔 Domande frequenti

Le estensioni per font sono sicure? Non raccolgono dati?

WhatFont, Fontanello e Fonts Ninja non raccolgono dati personali e non trasmettono informazioni sui siti visitati. Nella scheda del Chrome Web Store per WhatFont lo sviluppatore dichiara esplicitamente: l'estensione non raccoglie né utilizza i dati dell'utente. Fonts Ninja richiede più permessi, ma questo è necessario per il funzionamento della funzione di salvataggio dei font nei segnalibri.

Si può scoprire un font commerciale e il suo prezzo di licenza?

Fonts Ninja è l'unica estensione dell'elenco che mostra il prezzo della licenza direttamente al passaggio del mouse sul testo. Per i progetti commerciali questo fa risparmiare ore: non c'è bisogno di cercare il font separatamente su MyFonts o Adobe Fonts per conoscerne il costo.

Cosa fare se il font viene identificato ma non può essere scaricato?

I font sui siti web sono quasi sempre protetti da copyright. Scoprire il nome è legale. Scaricare e usare senza licenza non lo è. Se il font è commerciale (per esempio, del catalogo Linotype o Monotype), acquista una licenza sul sito della fonderia. I font gratuiti sono per lo più ospitati su Google Fonts e possono essere usati liberamente in qualsiasi progetto.

Perché Firefox mostra il font ma Chrome no?

Questo accade quando un font è collegato tramite @font-face con formati diversi: WOFF2 per Chrome, WOFF per versioni precedenti di Firefox. Se il font non viene visualizzato in Chrome, controlla la console degli Strumenti per sviluppatori nella scheda Console: forse il file del font è bloccato dalla politica CORS o non è stato caricato a causa di un blocco annunci.

Quale metodo dovrebbe scegliere uno sviluppatore frontend e quale un designer?

Per uno sviluppatore frontend lo strumento di ispezione integrato è più comodo: è già aperto nel flusso di lavoro, non c'è bisogno di cambiare. Per un designer, Fonts Ninja: mostra il prezzo, le alternative e permette di salvare i ritrovamenti nei segnalibri per progetti futuri. Per controlli una tantum del tipo "che font è questo?" prendi Fontanello: un clic e la risposta è proprio davanti a te.

Quale strumento di identificazione font scegliere?

La scelta migliore dipende dall'attività. Se sei uno sviluppatore frontend e lo strumento di ispezione è già aperto, rimani lì: la scheda Font in Firefox fornirà più informazioni di qualsiasi estensione. Se sei un designer alla ricerca di riferimenti, installa Fonts Ninja per i segnalibri, i prezzi e i font simili. Per controlli rapidi Fontanello è il re della velocità: tasto destro e fatto.

E quando nessuna estensione riesce a gestirlo, font rinominato, build personalizzata, pacchetto fatto in casa, carica il file sul servizio di analisi font What Can My Font Do?. Questa è l'ultima risorsa che funziona sempre.