Estrattore di font dai siti web.

Che cos’è un estrattore di font?

Un estrattore di font è uno strumento online che individua i caratteri tipografici usati in una pagina web e ti dà accesso diretto ai file che li contengono. Invece di indovinare un font a occhio, incolli un link e ottieni l’elenco preciso di famiglie, pesi, stili e formati caricati dal sito. FontExtractor è un estrattore di font per siti web gratuito che fa esattamente questo in pochi secondi, con anteprime dal vivo e download in un clic.

I siti moderni raramente si limitano ai pochi font installati su tutti i computer. Caricano web font personalizzati tramite regole CSS @font-face, da Google Fonts, Adobe Fonts, una CDN o dal proprio server. Queste regole sono sparse tra molti fogli di stile, istruzioni @import annidate e tag <style> inline, il che rende la ricerca manuale lunga e noiosa. Un estrattore di font le legge tutte al posto tuo.

FontExtractor in breve

Come usare l’estrattore di font da URL

Usare il nostro estrattore di font da URL richiede meno di un minuto:

1. Copia l’indirizzo della pagina di cui vuoi studiare la tipografia. Va bene qualsiasi pagina pubblica, non solo la home.
2. Incollalo nel campo in cima a questa pagina e premi Estrai font. Puoi omettere https://: lo aggiungiamo noi.
3. Controlla i risultati. Ogni famiglia compare come una scheda, mostrata nel proprio carattere, con tutti i pesi e gli stili elencati sotto.
4. Prova il tuo testo nel campo di anteprima e regola la dimensione per vedere come rende il font nei titoli e nel testo corrente.
5. Scarica o copia. Salva i singoli file, scarica l’intero set in uno ZIP con il relativo fonts.css oppure copia il CSS @font-face di una famiglia.

Quali font può rilevare un estrattore di font per siti web?

FontExtractor rileva i font che una pagina dichiara nel proprio HTML e CSS: file ospitati sul sito, Google Fonts, Adobe Fonts, font variabili e font incorporati in base64, nei formati WOFF2, WOFF, TTF, OTF, EOT e SVG.

FontExtractor segue lo stesso percorso di un browser quando visualizza una pagina. Scarica l’HTML, individua ogni foglio di stile collegato (compresi i trucchi di caricamento preload e print-then-all dei siti ottimizzati), segue le catene di @import su più livelli e analizza ogni blocco @font-face. Il risultato comprende:

• Font in hosting proprio, serviti dal dominio o dalla CDN del sito.
• Google Fonts, con ogni sottoinsieme unicode come latin, latin-ext o cyrillic.
• Adobe Fonts (Typekit) e altri servizi di font distribuiti tramite CSS.
• Font variabili, mostrati con l’intera gamma di pesi, ad esempio 100–900.
• Font base64 incorporati direttamente nel foglio di stile come URI data:.
• Font precaricati dichiarati con <link rel="preload" as="font">.
• Tutti i formati più diffusi: WOFF2, WOFF, TTF, OTF, EOT e SVG. Se una regola ne offre diversi, viene scelto automaticamente il più efficiente.

Oltre ai file scaricabili, lo strumento mostra anche gli stack di font richiesti dal CSS. Così capisci se un sito si affida a font di sistema come -apple-system, Segoe UI o Helvetica Neue, che nessun estrattore può scaricare perché si trovano sul dispositivo del visitatore.

Perché designer e sviluppatori estraggono i font

La tipografia esprime gran parte della personalità di un brand: per questo «che font è questo?» è una delle domande più frequenti nel design. Ecco le situazioni in cui un estrattore di font fa risparmiare più tempo:

• Ispirazione e ricerca. Crea moodboard e confronta come i prodotti migliori abbinano i caratteri per titoli e testo.
• Sviluppo front-end. Ricrea fedelmente un layout, correggi un font che non si carica o verifica quali formati serve un sito.
• Audit del brand. Controlla che ogni pagina del tuo sito carichi i caratteri approvati e nessun vecchio file dimenticato.
• Analisi delle prestazioni. Individua i siti che caricano troppi pesi o che servono ancora pesanti TTF al posto di WOFF2.
• Lavoro per i clienti. Quando un cliente non sa quali font usasse il vecchio sito, l’estrattore li recupera in pochi secondi.

Puoi usare i font estratti da un sito web?

Poter scaricare un file di font non significa poterlo usare. I font sono software e la maggior parte dei caratteri commerciali è concessa in licenza per sito, per app o in base alle visualizzazioni di pagina. Molti font del web sono open source — quasi tutto Google Fonts usa la SIL Open Font License, per esempio — ma le famiglie premium delle fonderie o di Adobe Fonts sono concesse in licenza solo al sito che le ha acquistate.

Usa FontExtractor per identificare i font, valutarli e provarli in locale. Prima di pubblicare un font nel tuo progetto, verifica la licenza e, se serve, acquistalo dalla fonderia. Sostenere i type designer è ciò che permette la nascita di nuovi, splendidi caratteri.

Estrattore di font o DevTools ed estensioni?

Usa un estrattore di font online per elencare in una sola volta tutti i font di una pagina. Usa i DevTools del browser o un’estensione per le pagine protette da login o per i font aggiunti con JavaScript.

Puoi cercare i font a mano con gli strumenti per sviluppatori del browser: ispeziona un elemento, apri il pannello Computed e cerca le richieste dei font nella scheda Network. Funziona per un singolo elemento, ma diventa presto lento quando un sito usa più famiglie, sottoinsiemi unicode e font variabili. Le estensioni aiutano, ma vanno installate, richiedono permessi su ogni sito visitato e di solito mostrano solo il font dell’elemento sotto il cursore.

Un estrattore di font online non richiede installazione, funziona su qualsiasi dispositivo — anche smartphone e tablet — e restituisce in un colpo solo l’inventario tipografico completo della pagina, con anteprime, nomi di file ordinati e CSS scaricabile.

Consigli per risultati migliori

Per risultati migliori, analizza esattamente la pagina che ti interessa e, se non compaiono font, prova direttamente l’URL di uno dei suoi fogli di stile.

• Analizza esattamente la pagina che ti interessa: landing page, blog e documentazione caricano spesso font diversi.
• Se un sito non restituisce font, potrebbe generare gli stili con JavaScript dopo il caricamento. Prova ad analizzare direttamente l’URL di uno dei suoi fogli di stile.
• Alcuni siti bloccano le richieste automatiche con una protezione anti-bot. Se l’analisi fallisce, riprova più tardi o usa un’altra pagina dello stesso dominio.
• Sul web preferisci i file WOFF2: sono i più leggeri e funzionano in tutti i browser moderni.
• Mantieni le regole unicode-range del CSS copiato, così il browser scarica solo i sottoinsiemi necessari.

Vuoi sapere quali font usa il tuo sito preferito? Torna in cima, incolla il link e lascia lavorare l’estrattore di font.