Indice
Quando un'estensione per font è lo strumento giusto
Un'estensione è ideale quando puoi aprire la pagina originale e passare sopra testo HTML reale. Il browser conosce già stack di font, dimensione calcolata, peso, interlinea e colore.
È diverso dal trovare un font in un'immagine statica. Se il testo è in logo, poster, screenshot, annuncio, export Canva o PDF appiattito, l'estensione non ha CSS da leggere. Serve corrispondenza visiva.
Regola pratica
Se puoi selezionare il testo, parti da un'estensione. Se vedi solo pixel, carica l'immagine su Font Detector.
Le migliori estensioni per trovare font
Molti strumenti fanno lo stesso lavoro di base, ma cambiano velocità, dettagli e comodità. Scegli un'opzione semplice per il nome; usa uno strumento più completo se confronti font spesso.
| Estensione | Ideale per | Mostra | Limiti |
|---|---|---|---|
| WhatFont | Controlli rapidi su siti web | Famiglia, dimensione, peso, colore e dettagli base | Non utile per testo dentro immagini |
| Fonts Ninja | Designer che confrontano più font | Dettagli, anteprime e font rilevati | Interfaccia più ricca del necessario per uso casual |
| Fontanello | Sviluppatori orientati al CSS | Famiglia, peso, dimensione, colore e proprietà CSS | Richiede testo selezionabile |
| DevTools | Verifica finale | CSS calcolato e font renderizzato | Più lento di un'estensione |
Come usare un'estensione per identificare font
L'interfaccia cambia, ma il flusso è quasi sempre questo:
- Installa un'estensione affidabile dallo store ufficiale del browser.
- Apri la pagina con il font da identificare.
- Attiva l'estensione e passa sopra o clicca il testo.
- Annota famiglia, peso, dimensione, interlinea, colore e fallback.
- Se il risultato sembra generico, verificalo in DevTools.
Non fermarti al primo nome
Il CSS può contenere stack come Inter, Arial, sans-serif. Il primo nome è quello previsto, ma il browser può renderizzare un fallback se il webfont non si carica.
Come verificare un font web con DevTools
Quando serve il carattere esatto, usa l'estensione come scorciatoia e DevTools come controllo finale.
- Fai clic destro sul testo e scegli Ispeziona.
- Seleziona l'elemento che contiene il testo visibile.
- Apri Computed e cerca font-family.
- Controlla font-size, font-weight, line-height e letter-spacing.
- In Chrome o Edge, guarda anche la sezione dei font renderizzati se disponibile.
È importante perché molti siti usano font variabili, lunghi fallback e tipografia responsiva che cambia per dispositivo, larghezza, lingua o stato di caricamento.
Quando un'estensione per font non funziona
Un'estensione dipende dal testo live nel DOM. Decidi in base al formato della sorgente:
| Fonte | Usa | Perché |
|---|---|---|
| Logo o immagine | Font Detector | Il testo è pixel e richiede confronto visivo. |
| Screenshot | Font Detector o pagina originale | L'estensione funziona solo sulla pagina live. |
| PDF appiattito | Screenshot più rilevamento IA | Potrebbero non esserci metadati font. |
| PDF selezionabile | Prima le proprietà del PDF | L'elenco dei font incorporati può rivelare il nome esatto. |
Un workflow affidabile per identificare font
Nei progetti reali non affidarti a un solo segnale:
- Sito live: Usa un'estensione e verifica font calcolato e renderizzato in DevTools.
- Screenshot o logo: Ritaglia la parola esatta e caricala su Font Detector.
- PDF: Controlla i font incorporati; se è appiattito, usa screenshot pulito e IA.
- Risultato incerto: Confronta lettere distintive come a, g, R, S, numeri, contrasto e spaziatura.
Domande frequenti
Riferimenti e fonti
- Documentazione Google Chrome DevTools per ispezionare CSS — https://developer.chrome.com/docs/devtools/css
- Scheda WhatFont nel Chrome Web Store — https://chromewebstore.google.com/
- Sito ufficiale Fonts Ninja — https://www.fonts.ninja/
Ultimo aggiornamento: 22 maggio 2026
Torna a Font Detector