FontLens

Estensione gratuita per Chrome

Che font è? Fai clic destro e scopri il CSS

Seleziona un testo su qualsiasi sito, fai clic destro e scegli “Inspect font with FontLens”. L'ispettore di font si apre sopra la pagina e mostra famiglia, dimensione, peso, interlinea e colore, il CSS da copiare e un pulsante per scaricare il font.

Aggiungi a Chrome — gratis

Funziona anche su Edge, Brave, Opera e altri browser basati su Chromium.

L'ispettore FontLens: campione Ag tra le guide di altezza maiuscole, altezza x e linea di base, proprietà del font e snippet Tailwind

In breve

Cosa fa
Mostra il font del testo selezionato: famiglia, dimensione, peso, interlinea, colore e altri stili diversi da quelli predefiniti, con il CSS pronto da copiare.
Come iniziare
Seleziona il testo, fai clic destro e scegli “Inspect font with FontLens”. La voce di menu compare solo dopo aver selezionato del testo.
Copia come
CSS, SCSS, SASS o Tailwind, con dimensione in px, rem, pt o em.
File del font
“Download font” recupera il web font dalla sua origine @font-face. Controlla la licenza del font prima di usarlo.
A chi è utile
A web designer, sviluppatori front-end, revisori dell'accessibilità e studenti di CSS.
Prezzo
Gratis. Nessun account e nessuna versione a pagamento.
Dati
Funziona nel browser. Niente server né analytics. L'unica richiesta è il download del font che avvii.
Compatibilità
Chrome e altri browser basati su Chromium che installano dal Chrome Web Store. Non Firefox né Safari.
Limiti
Legge il CSS del testo reale nelle pagine web. Non il testo in immagini, canvas o PDF, né le pagine interne di Chrome.
Versione
2.2.0, aggiornato il 23 ottobre 2026

Due clic per trovare il font

  1. 1

    Seleziona il testo

    Un titolo, un paragrafo o l'etichetta di un pulsante in qualsiasi pagina web.

  2. 2

    Fai clic destro

    Scegli “Inspect font with FontLens”. L'ispettore si apre sopra la pagina e mostra famiglia, dimensione, peso, interlinea e colore.

  3. 3

    Copia o modifica

    Copia CSS o Tailwind, prova un'altra dimensione o un altro colore nell'anteprima dal vivo oppure scarica il file del font.

Perché lo aprono

Aa

Trova il nome del carattere

Hai visto un titolo che ti piace? Selezionalo per scoprire famiglia, peso e origine del font: Google Fonts, Adobe Fonts o il sito stesso.

{ }

Confronta un mockup

Confronta i valori della pagina con quelli del file di design, poi copia le regole come CSS, SCSS, SASS o Tailwind.

4.5:1

Controlla il contrasto

Leggi il rapporto di contrasto con gli indicatori AA e AAA, poi prova un testo più scuro o uno sfondo più chiaro prima della pubblicazione.

Cosa fa

  • Campione con guide

    La prima famiglia dello stack, mostrata tra le guide di altezza maiuscole, altezza x e linea di base misurate direttamente sul font.

  • formati di snippet

    CSS, SCSS, SASS e Tailwind. Copia l'intero snippet o una riga; l'ultimo formato scelto viene ricordato.

  • Le tue unità

    Mostra la dimensione in px, rem, pt o em nei campi e nello snippet. rem segue la dimensione root della pagina.

  • Origine del font

    Un'etichetta indica da dove arriva il font: Google Fonts, Adobe Fonts, self-hosted o un font di sistema già presente sul computer.

  • Controllo del contrasto

    Rapporto tra testo e sfondo con indicatori AA e AAA per testo normale e grande, aggiornato quando cambi i colori.

  • Scarica il font

    Recupera il file dall'origine @font-face e lo nomina in base alla famiglia. Se il server lo blocca, l'origine si apre in una nuova scheda.

Perché cercare “che font è?” richiede tempo in DevTools

Una pagina dichiara un elenco di font e il browser usa il primo disponibile. Per scoprire quale, apri DevTools, trovi l'elemento, leggi il pannello Computed e poi cerchi il file del font nel pannello Network. Dimensione, peso, interlinea e colore sono in punti diversi.

FontLens legge lo stile calcolato del testo selezionato e lo raccoglie in un unico pannello: stack delle famiglie, campione della prima famiglia, valori, origine del font e CSS. Legge il CSS della pagina, quindi non può riconoscere un font dentro un'immagine.

I tuoi dati restano nel browser

  • Nessun account né server

    FontLens funziona nel browser. Niente analytics né tracciamento.

  • Legge ciò che selezioni

    L'ispettore legge gli stili del testo su cui hai fatto clic destro. Nessuna informazione sulla pagina viene inviata.

  • Quattro autorizzazioni

    Menu contestuale per la voce del clic destro; scheda attiva e accesso alla pagina per aprire l'ispettore; archiviazione per testo di esempio, unità e formato dello snippet.

Chrome DevTools e FontLens

Chrome DevTools e FontLensChrome DevToolsFontLens
Trovare il font di un testoIspeziona, trova l'elemento, apri ComputedSeleziona il testo, fai clic destro, una voce di menu
Copiare come Tailwind o SCSSNo, copia i valori uno alla voltaScheda CSS, SCSS, SASS o Tailwind
Origine del fontCerca il file del font nel pannello NetworkEtichetta: Google Fonts, Adobe Fonts, self-hosted o di sistema
Scaricare il file del fontTrovalo in Network o Sources e salvaloUn pulsante
Controllo del contrastoNel selettore colori del pannello StylesIndicatori AA e AAA accanto all'anteprima dal vivo
PrezzoInclusoGratis

Domande

Come faccio a sapere quale font usa un sito web?

Aggiungi FontLens a Chrome, seleziona un testo sul sito, fai clic destro e scegli “Inspect font with FontLens”. Vedrai famiglia, dimensione, peso, interlinea, colore e origine del font.

Come copio il CSS di un font da un sito web?

Nell'ispettore scegli la scheda CSS, SCSS, SASS o Tailwind e premi “Copy all”, oppure copia una singola riga. Se serve, imposta prima l'unità su px, rem, pt o em.

Posso scaricare un font da un sito web?

Se il testo usa un web font, “Download font” recupera il file dalla sua origine @font-face. Un font di sistema non ha un file da scaricare. Controlla la licenza prima di usarlo nel tuo progetto.

FontLens riconosce un font in un'immagine o in un PDF?

No. Legge il CSS del testo reale nelle pagine web, quindi non può riconoscere font in immagini, canvas o PDF.

Come controllo il contrasto del testo secondo WCAG?

L'anteprima mostra il rapporto di contrasto tra colore del testo e sfondo, con indicatori AA e AAA per testo normale e grande. Cambia uno dei colori e gli indicatori si aggiornano.

Può mostrare le dimensioni in rem invece che in px?

Sì. Scegli px, rem, pt o em e i campi e lo snippet si aggiornano. rem si calcola dalla dimensione root della pagina e la scelta viene ricordata.

È gratis? Raccoglie dati?

È gratis e non richiede un account. Non usa server né analytics; l'unica richiesta è il download del font che avvii.

Funziona su Edge, Brave o Opera?

La maggior parte dei browser basati su Chromium installa estensioni dal Chrome Web Store, inclusi Edge, Brave, Opera e Vivaldi. Firefox e Safari non sono supportati.

Altre estensioni gratuite di PYROCTAL

Che font è? Bastano due clic.

Aggiungi a Chrome — gratis