Se ti è mai capitato di vedere una pagina web con una tipografia particolarmente riuscita, probabilmente ti sei chiesto che font è e come fare per identificarlo. La risposta dipende soprattutto da dove si trova il testo: se è realmente presente nella pagina, puoi risalire al carattere attraverso gli strumenti del browser o un’estensione; se invece fa parte di un logo, uno screenshot o un’immagine, serve un sistema di riconoscimento visivo.
Questa distinzione è importante perché trovare il font di un sito live è molto più preciso che riconoscerlo da un’immagine. Nel primo caso il browser può mostrarti quali caratteri sta effettivamente usando per renderizzare il testo; nel secondo, un servizio può confrontare le forme delle lettere e proporti una corrispondenza plausibile, che non sempre coincide con il font originale.
Identificare un carattere può essere utile quando stai studiando la tipografia di un concorrente, preparando il restyling di un progetto, verificando che un web font venga caricato correttamente o semplicemente cercando ispirazione per un nuovo design. Se il passo successivo è scegliere una famiglia da utilizzare sul tuo progetto, puoi approfondire anche nella nostra guida ai web font HTML.
Come trovare il font usato da un sito web: 3 metodi
Per riconoscere un font online non esiste un unico metodo migliore in ogni situazione. La scelta dipende dal materiale che hai a disposizione.
| Situazione | Metodo consigliato | Quando conviene |
|---|---|---|
| Il testo è selezionabile su una pagina web | DevTools del browser | Quando vuoi il controllo più preciso sul font realmente renderizzato |
| Il testo è su una pagina web ma vuoi fare prima | Estensione come WhatFont | Quando vuoi identificare rapidamente il carattere senza analizzare il CSS |
| Il testo è dentro un logo, screenshot o immagine | WhatTheFont | Quando non puoi ispezionare direttamente l’elemento HTML |
Il primo metodo è quello da conoscere meglio, soprattutto se lavori con siti web: permette infatti di capire non soltanto quale font-family è stata dichiarata nel CSS, ma anche quale font il browser sta realmente utilizzando.
1. Identificare il font di un sito con gli strumenti di ispezione del browser
Tutti i principali browser mettono a disposizione strumenti per sviluppatori che permettono di analizzare HTML, CSS e proprietà tipografiche della pagina. Non è necessario essere uno sviluppatore: per trovare un font bastano pochi passaggi.
In Chrome puoi procedere così:
- Fai clic con il tasto destro sul testo che vuoi controllare e seleziona Ispeziona.
- Assicurati che nel pannello Elements sia selezionato l’elemento che contiene il testo corretto.
- Apri la scheda Computed.
- Cerca la sezione Rendered Fonts — nell’interfaccia italiana può essere indicata come Caratteri visualizzati.
- Controlla il nome del font effettivamente utilizzato e, quando disponibile, la relativa origine.
Chrome documenta questa funzione proprio per distinguere la famiglia dichiarata dal carattere che viene realmente usato per renderizzare il testo. Documentazione Chrome DevTools sui font renderizzati
Qui c’è una distinzione che spesso crea confusione.
Se nel CSS trovi:
font-family: Inter, Arial, sans-serif;
non hai ancora la certezza che il testo visualizzato stia usando Inter. Quella dichiarazione rappresenta una font stack, cioè una lista ordinata di caratteri che il browser può provare. Se Inter non è disponibile o non contiene il glifo necessario, il motore di rendering può passare ad Arial o a un altro fallback.
Per questo motivo font-family e font realmente renderizzato non sono necessariamente la stessa cosa.
La proprietà CSS resta comunque molto utile. Nel pannello Styles o Computed puoi controllare anche font-size, font-weight, line-height, letter-spacing, stile, colore e le eventuali regole ereditate.
Questa analisi è particolarmente utile durante il restyling di un sito web: invece di limitarti a riconoscere il nome di un carattere, puoi capire come viene realmente impiegato nella gerarchia tipografica della pagina.
Come controllare i font con Firefox
Firefox offre un pannello dedicato ai caratteri all’interno dell’Inspector.
Dopo aver selezionato un elemento della pagina, apri la sezione Fonts. Puoi vedere i font utilizzati dall’elemento e l’elenco dei caratteri presenti nella pagina. Per i web font, Firefox può mostrare anche l’URL del file e la regola @font-face associata; per quelli disponibili localmente indica invece l’origine dal sistema.
È una funzione molto utile quando vuoi capire se il carattere arriva effettivamente dal sito oppure è presente sul computer dell’utente. Documentazione Firefox sul pannello Fonts
Come controllare i font con Safari
Anche Safari dispone di strumenti specifici per la tipografia nel Web Inspector. Nel pannello Font della scheda Elements puoi controllare il carattere principale dell’elemento selezionato e proprietà come dimensione, peso, stile, legature e, nel caso dei variable font, gli assi di variazione.
Se il menu per sviluppatori non è disponibile, deve prima essere abilitato nelle impostazioni avanzate di Safari. Documentazione WebKit sul pannello Font
Per una verifica occasionale un’estensione può essere più immediata, ma se devi capire quale font viene veramente renderizzato e perché, gli strumenti integrati nel browser restano il punto di partenza più completo.
2. Identificare un font con un’estensione per browser
Le estensioni sono la soluzione più comoda quando vuoi trovare un font velocemente senza aprire ogni volta i pannelli HTML e CSS.
Il principio è semplice: attivi l’estensione, passi il cursore sul testo oppure selezioni l’elemento e ottieni il nome della famiglia insieme ad alcune proprietà tipografiche.
Non tutte, però, fanno esattamente lo stesso lavoro.
| Estensione | La sceglierei quando | Cosa offre |
|---|---|---|
| WhatFont | Vuoi identificare un font nel modo più rapido possibile | Nome del carattere e informazioni tipografiche direttamente sulla pagina |
| Fonts Ninja | Il riconoscimento fa parte del tuo workflow di design | Identificazione, proprietà CSS, riepilogo dei font della pagina e strumenti per organizzare quelli trovati |
| Font Finder | Vuoi analizzare anche il font effettivamente renderizzato | Famiglia, dimensione, peso, spaziatura, colori e altre proprietà dell’elemento |
| CSS Peeper | Vuoi studiare il design del sito oltre alla tipografia | Font, colori, asset e altre proprietà visive della pagina |
| Fontanello | Preferisci un controllo semplice tramite menu contestuale | Typeface, peso, dimensione, colore e altre proprietà CSS di base |
Le disponibilità possono cambiare nel tempo, quindi per l’installazione conviene sempre verificare lo store del browser che utilizzi.
Per chi lavora nel web design, la differenza più importante non è quindi trovare “l’estensione migliore” in assoluto, ma scegliere quella coerente con il tipo di analisi che devi fare.
Quale estensione scegliere?
Se vuoi soltanto sapere che font è quello che stai guardando, WhatFont resta una delle soluzioni più immediate.
Se vuoi andare più in profondità sulle proprietà dell’elemento, Font Finder è più adatto. Fonts Ninja ha più senso quando la ricerca dei caratteri fa parte di un workflow creativo più ampio, mentre CSS Peeper è interessante se insieme alla tipografia vuoi studiare anche colori, asset e altre decisioni di design.
Fontanello rimane invece una soluzione essenziale per visualizzare rapidamente le principali proprietà tipografiche tramite il menu contestuale.
Come usare WhatFont per identificare un font online
WhatFont è semplice da usare proprio perché evita di entrare direttamente nei DevTools.
Dopo aver installato e attivato l’estensione, passa con il mouse sopra il testo che vuoi analizzare. Vedrai comparire il nome del carattere; facendo clic sull’elemento puoi ottenere ulteriori informazioni sullo stile applicato.
In questo modo puoi controllare rapidamente proprietà come famiglia tipografica, dimensione, peso, colore e altezza della linea senza dover cercare manualmente le relative dichiarazioni CSS.
C’è però una differenza importante rispetto ai DevTools: un’estensione è soprattutto uno strumento di comodità. Quando il risultato sembra ambiguo, oppure devi verificare fallback, font locali o il carattere realmente renderizzato, conviene tornare agli strumenti di sviluppo del browser.
Se il carattere identificato appartiene alla libreria di Google, nella nostra guida a Google Fonts trovi anche come scegliere, incorporare e gestire queste famiglie sul web.
3. Trovare un font da un’immagine, logo o screenshot
Il metodo cambia completamente quando il testo che vuoi analizzare non è un vero elemento della pagina, ma è incorporato in un logo, un banner, una fotografia, un’infografica o uno screenshot.
In questo caso il browser non può mostrarti una proprietà CSS perché quella scritta fa parte dei pixel dell’immagine. Serve quindi un sistema che analizzi visivamente le forme delle lettere e le confronti con un database di caratteri.
Uno degli strumenti più conosciuti per questo compito è WhatTheFont di MyFonts. WhatTheFont
Il funzionamento è semplice: carichi l’immagine, selezioni la parte di testo che ti interessa e il servizio restituisce i possibili font corrispondenti.
La parola importante è possibili.
Quando analizzi un sito live attraverso i DevTools puoi osservare informazioni che arrivano direttamente dal browser. Quando parti da un’immagine, invece, stai facendo un confronto visivo. Il risultato può essere il carattere corretto, una variante della stessa famiglia oppure un font semplicemente molto simile.
La qualità del riconoscimento dipende anche dall’immagine. Testo nitido, ben contrastato, sufficientemente grande e senza deformazioni offre al sistema più informazioni utili. Effetti grafici, prospettiva, lettere sovrapposte, immagini molto compresse, lettering modificato e caratteri personalizzati rendono invece l’identificazione più difficile.
Anche un risultato molto convincente va quindi interpretato con cautela: somiglianza visiva non significa automaticamente identità del font.
Se puoi scegliere tra analizzare uno screenshot e aprire direttamente la pagina web da cui proviene, usa la seconda strada. Il browser dispone di informazioni che nell’immagine sono già andate perse.
Font-family e font renderizzato: perché possono essere diversi
Capire questa differenza evita uno degli errori più comuni quando si cerca di identificare la tipografia di un sito.
La proprietà font-family comunica al browser una lista di famiglie preferite. Ad esempio:
font-family: "Open Sans", Arial, sans-serif;
Il browser prova a utilizzare il primo carattere disponibile che riesce a soddisfare la richiesta. Se "Open Sans" non viene caricato correttamente, può passare ad Arial; se anche quella famiglia non è disponibile o non contiene determinati caratteri, può arrivare al fallback generico sans-serif.
La situazione può diventare ancora più interessante quando lo stesso blocco di testo contiene glifi che il font principale non supporta. In quel caso un singolo elemento può essere visualizzato usando più font.
È per questo che leggere soltanto la prima voce di font-family non basta sempre.
Questa distinzione è utile anche nel troubleshooting. Se hai configurato un web font ma la pagina appare diversa da quanto previsto, il pannello dei font renderizzati può aiutarti a capire se il browser sta usando davvero quel file o se è intervenuto un fallback.
Allo stesso modo, vedere il nome di una famiglia in un foglio CSS non dimostra da solo che quel carattere sia stato scaricato e applicato al testo che stai osservando.
Quale metodo usare per riconoscere un font?
Se devi scegliere rapidamente, usa questa logica:
| Quello che hai davanti | Metodo più utile | Perché |
|---|---|---|
| Testo normale su una pagina web | Rendered Fonts nei DevTools | Mostra il carattere effettivamente utilizzato dal browser |
| Testo su un sito e vuoi una risposta immediata | WhatFont | Riduce al minimo i passaggi |
| Vuoi analizzare molte proprietà CSS | Font Finder o DevTools | Offre più dettagli tecnici |
| Vuoi studiare anche colori e altri elementi visuali | CSS Peeper | Va oltre la sola identificazione tipografica |
| Vuoi organizzare e confrontare font scoperti durante la navigazione | Fonts Ninja | È pensato per un workflow di font discovery più ampio |
| Logo, screenshot o immagine | WhatTheFont | Lavora sul riconoscimento visivo quando non esiste un elemento HTML da ispezionare |
In pratica, non userei un riconoscitore da immagine quando puoi interrogare direttamente il browser. È un passaggio in più che trasforma un’informazione tecnica disponibile nella pagina in un problema di somiglianza visiva.
Se invece possiedi soltanto un’immagine, WhatTheFont e strumenti analoghi diventano la scelta naturale, sapendo però che il risultato va verificato prima di utilizzare o acquistare un carattere.
Una volta trovato il font che ti interessa, controlla anche licenza e modalità d’uso. Il fatto che un carattere sia visibile su un sito non significa automaticamente che possa essere scaricato, redistribuito o utilizzato liberamente in un altro progetto.
Se devi implementare una famiglia di Google Fonts su un sito WordPress, puoi proseguire con la nostra guida all’utilizzo di Google Fonts su WordPress.
Conclusione
Per trovare il font di un sito web, il metodo più affidabile dipende dalla fonte che hai a disposizione.
Se il testo è realmente presente nella pagina, partirei dai DevTools del browser: controllare il font renderizzato permette di andare oltre la semplice dichiarazione font-family e capire quale carattere sta effettivamente visualizzando il browser.
Se vuoi una risposta più rapida e non ti serve analizzare il meccanismo CSS, un’estensione come WhatFont rende il processo molto più immediato.
Quando invece hai soltanto un logo, uno screenshot o un’immagine, devi passare al riconoscimento visivo con uno strumento come WhatTheFont. In quel caso il risultato va considerato una corrispondenza da verificare, non una prova assoluta.
La distinzione da ricordare è quindi semplice: su una pagina web puoi ispezionare ciò che il browser sta usando; dentro un’immagine puoi soltanto cercare il carattere che gli assomiglia di più. È questo il criterio che ti permette di scegliere subito lo strumento giusto senza complicare inutilmente la ricerca.