Famiglia e pesi caricati
Sapere quali varianti ti servono, non solo il nome
Tipografia
Che font usa un sito, con la sua licenza e la sua scala
Smart Design Inspector mostra quali font usa un sito, i loro pesi, da dove vengono caricati (Google Fonts, Adobe Fonts o il server del sito stesso), la loro licenza e la scala tipografica della pagina: ogni stile con dimensione, peso e interlinea.
Font, origine, licenza e scala: gratis per sempre
Font · iltuocliente.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 corsivo · 700Google FontsOFL
- JetBrains Mono400Self-hostedOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Corpo16 px · 300 · 1,55
- Pulsante15 px · 500 · 1
01
Come scoprire che font usa un sito
3 passaggi- 01
Installa Smart Design Inspector e apri il sito.
- 02
Clicca sull’icona e scegli Font.
- 03
Vedi l’elenco delle famiglie con i loro pesi e la loro origine. Passa il mouse su un testo per vederne lo stile esatto.
Senza estensione
Si può fare anche senza estensione: clic destro sul testo, Ispeziona e cerca font-family nel pannello degli stili. Il problema è che font-family dice il font richiesto, non se è stato caricato, da dove viene né che licenza ha.
02
Provalo in questa pagina
Senza installareUn sito di esempio e il pannello dei font, senza installare nulla. Passa il mouse su un testo, o sceglilo dall’elenco, e vedi la sua famiglia, il peso, la dimensione, l’interlinea, l’origine e la licenza.
Scegli un elemento
Smart Design Inspector · Fonth1.hero-title
- Famiglia
- —
- Peso
- —
- Stile
- —
- Dimensione
- —
- Interlinea
- —
- Spaziatura
- —
- Origine
- —
- Licenza
- —
Famiglie nella pagina
—
Sito di esempio · i valori vengono letti da questa pagina
03
Più del nome del font
4 datiOrigine: Google Fonts, Adobe Fonts o self-hosted
Sapere se puoi usarlo gratis o se va acquistato
Licenza
Quelli di Google Fonts sono OFL. Per gli altri si legge la licenza dichiarata dal file stesso
Scala tipografica
Da H1 a H6, corpo del testo e pulsanti con dimensione, peso, interlinea e spaziatura
La scala è ciò che ti serve per replicare lo stile, e le estensioni per i font guardano lettera per lettera. Con la Pro la esporti in Tailwind o in variabili CSS: estrarre il design system.
| Gratis0 €per sempre | Pro49 €pagamento unico | |
|---|---|---|
| Font della pagina: famiglia, pesi, dimensioni, origine e licenza | ||
| Scala tipografica: ogni stile di testo con font, dimensione, peso, interlinea e spaziatura | ||
| Esportare gli stili tipografici in Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md | — | Accesso anticipato gratis |
05
Cosa non fa
LimitiNon scarica font a pagamento. Ti mostra la licenza e dove ottenerli. Se il font ha una licenza libera, puoi scaricarlo. Non identifica nemmeno i font a partire da un’immagine: per questo esistono strumenti come WhatTheFont.
È gratis?
Sì. Vedere i font, la loro origine, la loro licenza e la scala è gratis per sempre.
Rileva i font di Adobe Fonts?
Sì. Rileva quelli caricati da Adobe in base all’indirizzo da cui provengono.
E se il sito usa un font di sistema?
L’estensione indica che non viene caricato nessun web font e mostra la famiglia dichiarata.
Posso usare il font che trovo?
Dipende dalla sua licenza. Quelli di Google Fonts si possono usare in qualsiasi progetto. Quelli commerciali vanno acquistati, anche se un altro sito li usa.
Funziona con il testo dentro le immagini?
No. Legge il testo della pagina, non quello contenuto in un’immagine.
Su quali browser e sistemi funziona?
Su Chrome, Edge, Brave, Arc, Opera e Vivaldi, su Windows, Mac e Linux, dalla 1.0. Funziona allo stesso modo ovunque perché è il browser a eseguire l’estensione, non il sistema. Il codice è pronto per portarla su Firefox e Safari senza riscriverla. Durante lo sviluppo potrebbero esserci cambiamenti.
07
Continua con
Funzioni correlateColori
La palette della pagina, contagocce e contrasto WCAG di ogni coppia di testo e sfondo.
Colori di un sito →Design system
Colori, spaziature e tipografia in Tailwind v4 @theme, variabili CSS o DESIGN_SPECS.md.
Estrarre il design system →Ispettore CSS
Passa il mouse e vedi il CSS calcolato, il box, i margini e le distanze.
Ispettore CSS →Lista d’attesa
Sii tra i primi a provarlo
Smart Design Inspector è in fase di sviluppo. Lasciaci la tua email e ti avviseremo il giorno in cui arriverà sul Chrome Web Store, con le 7 funzioni Pro gratis in accesso anticipato.
Un’email il giorno del lancio e poche altre · Disiscrizione con un clic