Trovare font con Chrome & Firefox DevTools
Le DevTools del browser permettono di ispezionare il font esatto renderizzato su qualsiasi elemento. Ecco come usarle - e quando lo scanner URL è la scelta più rapida.
Chrome DevTools - Font renderizzati
- 1Fai clic destro su qualsiasi testo e seleziona Ispeziona (o premi Ctrl+Shift+I / Cmd+Option+I).
Visualizza screenshot completoClic destro su qualsiasi testo, poi clicca su Ispeziona - 2Chrome apre il pannello Elementi con l'elemento cliccato già evidenziato nell'albero DOM.
- 3Nel pannello destro, clicca sulla scheda Calcolato (seconda scheda, accanto a Stili).
- 4Scorri oltre le proprietà CSS fino alla sezione Font renderizzati.
Visualizza screenshot completoScheda Calcolato - scorri fino a "Font renderizzati" per vedere il carattere attivo - 5Vedi il carattere tipografico esatto usato dal browser, il file sorgente caricato e quanti glifi ha disegnato da esso.
Firefox DevTools - Scheda Font
- 1Clic destro su qualsiasi testo e seleziona Ispeziona (o premi F12). Si apre il pannello Ispettore.
- 2Nel pannello destro dell'Ispettore (dove normalmente vedi Regole e Calcolato), clicca sulla scheda Font.
- 3La colonna sinistra elenca tutti i font caricati sulla pagina. Clicca su un nome per vedere il campione, l'intervallo di peso, il formato e l'URL sorgente.
Visualizza screenshot completoScheda Font di Firefox - tutti i font della pagina elencati a sinistra, dettagli a destra
Limiti dell'approccio DevTools
Le DevTools funzionano bene per ispezionare elementi singoli, ma non forniscono un inventario completo di tutti i font caricati da una pagina. Per un audit completo - incolla l'URL qui sotto.
Più veloce: scansionare l'intera pagina tramite URL
Incolla qualsiasi URL e ottieni l'elenco completo di tutti i web font usati - ogni regola @font-face, importazione Google Fonts e link CDN - in una sola scansione.
Domande frequenti
Cosa sono i "Font renderizzati" in Chrome?
Font renderizzati mostra il carattere tipografico realmente usato dal browser per disegnare il testo selezionato - dopo aver applicato i fallback di font-family. Può differire dalla dichiarazione CSS font-family.
Perché il font renderizzato differisce da font-family in CSS?
font-family è una lista di fallback prioritizzata. Se il primo font non si carica, il browser passa al candidato successivo. Font renderizzati mostra ciò che è stato effettivamente usato.
Posso trovare tutti i font di una pagina con le DevTools?
La scheda Font di Firefox mostra tutti i font caricati dalla pagina. Chrome richiede di ispezionare gli elementi uno per uno. Per un inventario completo, usa lo scanner URL.
Lo scanner URL rileva anche Google Fonts?
Sì - vengono rilevate tutte le sorgenti di font: Google Fonts, Bunny Fonts, Fontshare e i font @font-face self-hosted.