avete mai trovato il font perfetto per il vostro sito web su un altro sito, immagine, o un blog, ma non sapevo come trovare il suo nome? Sei venuto nel posto giusto. In questa guida, ti mostreremo come identificare i font da un sito Web per aiutarti a trovare la tipografia perfetta per la tua attività.
Perché è utile vedere quali font utilizza un sito web?
Se stai lavorando alla creazione del tuo sito web o alla progettazione dei tuoi contenuti online, sei sempre alla ricerca di modi per migliorarlo. Puoi farlo in molti modi. I più ovvi stanno usando un tema diverso, aggiungendo funzionalità e fornendo contenuti migliori. Ma ci sono altre cose non-così-ovvie che si possono fare per avere un vantaggio rispetto alla concorrenza e rendere il vostro sito unico. Il font è uno di questi.
Il font che usi è in tutto il tuo sito e non solo può migliorare la leggibilità, ma anche la navigazione generale. Se la tua tipografia sembra professionale ed è facile da leggere, i tuoi visitatori hanno maggiori probabilità di rimanere sul tuo sito. I font sono spesso trascurati, ma possono avere un grande impatto.
Anche se puoi aggiungere font al tuo sito, potresti voler usare la tipografia che non trovi attraverso i modi tradizionali. Internet è pieno di siti web con bella tipografia che si potrebbe desiderare di utilizzare sul tuo sito. Tuttavia, la parte difficile è identificare i caratteri utilizzati da tali siti web. Non c’è un modo semplice per trovare un font e anche se sei un esperto, ci sono tonnellate di minuscole differenze in ogni font. Inoltre, queste differenze possono essere amplificate da stili di carattere e modifiche CSS.
Ecco perché in questo post, ti mostreremo come utilizzare diversi strumenti per scoprire quali font utilizza un sito web.
Come identificare i font da un sito Web
Esistono diversi modi per identificare i font su un sito web:
- Utilizzando lo strumento Inspect
- Con Plugin
- FFFFallback
- Fount
- Fontanello
- Quale font
Alcuni di questi sono più difficili da usare rispetto ad altri e alcuni possono richiedere strumenti ed estensioni esterne. Diamo uno sguardo più da vicino a tutti questi diversi metodi.
1) Identificare i font utilizzando lo strumento Inspect
Il modo più semplice per identificare i font da un sito web è quello di utilizzare lo strumento inspect del browser. Per questo, dovrai aprire gli strumenti di sviluppo del tuo browser. Di solito, è possibile farlo in diversi modi:
- Premendo F12 o Ctrl+Maiusc+I sul tuo browser
- Aprire il menu del browser cliccando con il destro e poi di andare a controllare
- aprire il Developer Tool opzioni dal menu del browser e andare a Sviluppatore Web
Quando si trova un font che ti piace, fare clic sul testo che contiene il tipo di carattere che si desidera individuare e fare clic su Ispeziona Elemento.
Questo elemento verrà evidenziato nello strumento inspector e vedrai gli stili e i layout nelle caselle accanto all’inspector.
Quindi, fare clic sulla scheda Calcolata e scorrere verso il basso per controllare il campo Font-Family. Questo campo dovrebbe elencare il carattere del sito web. Ad esempio, in questo esempio, il font è Roboto o SF-Pro Display.
In questo modo, è possibile identificare i font su qualsiasi sito web utilizzando lo strumento Inspector. Tuttavia, potresti trovare siti in cui non puoi fare clic con il pulsante destro del mouse o accedere allo strumento Inspector perché non lo consentono. Se questo è il caso, c’è un’altra alternativa. Puoi anche vedere quale tipo di carattere utilizza il sito Web con uno strumento dedicato.
Diamo un’occhiata ad alcuni dei migliori plugin che è possibile utilizzare per identificare i font da un sito web.
2) Identificare i font utilizzando strumenti e plugin
Se non è possibile utilizzare lo strumento inspector su un sito web, identificare i font utilizzando strumenti e plugin dedicati. Ci sono diversi strumenti là fuori, quindi per semplificarti la vita, elencheremo i migliori e ti mostreremo come puoi usarli per trovare e riconoscere i font utilizzati su siti diversi.
2.1) FFFFallBack
FFFFallback è un semplice strumento bookmarklet che è possibile utilizzare per identificare i font su qualsiasi sito web. E la parte migliore è che non è necessario installare nulla. Devi semplicemente salvare il bookmarklet nella scheda segnalibri e fare clic sul suo segnalibro su qualsiasi sito per controllare i caratteri. Lo strumento utilizza Javascript per scansionare il CSS e identificare la tipografia e il suo stile di carattere.
Per utilizzare questo strumento, è necessario aprire questa pagina. Quindi, fare clic sul pulsante FFFFALLBACK e trascinarlo nella barra dei preferiti come mostrato di seguito. Se la barra dei segnalibri non viene visualizzata sul browser, premere Ctrl+Maiusc+B per abilitarla.
Ora, aprire un sito web in cui si desidera identificare i font e fare clic sul Bookmarklet che hai appena salvato sulla barra dei segnalibri. Dovrebbe mostrare la famiglia di font e lo stile del sito Web su una nuova colonna come mostrato di seguito. Assicurati di selezionare Web Font come opzione in alto.
2.2) Fount
Fount è simile a FFFFALLBACK, ma consente di controllare anche i font di testi specifici. In questo modo, è possibile specificare quali testi si desidera controllare i font.
Per utilizzare Fount, vai a questo sito e salva il Bookmarklet dal suo sito Web trascinandolo nella scheda Segnalibri.
Quindi, aprire qualsiasi sito web che si desidera controllare i font e fare clic sul segnalibro Fount. Questo cambierà il cursore in un plus. È sufficiente fare clic su qualsiasi testo, e vi mostrerà il carattere identificato in alto a destra dello schermo.
Dopo aver conosciuto il font per quel testo, è possibile fare nuovamente clic sulla casella Font per disabilitare il cursore e continuare a navigare la pagina come al solito.
2.3) Fontanello
Se si preferisce utilizzare le estensioni del browser, Fontanello è lo strumento perfetto per identificare i font da qualsiasi sito web. Basta installare l’estensione Fontanello su Chrome o Firefox e attivarlo.
Per identificare i caratteri su un sito, è sufficiente fare clic destro su qualsiasi testo e selezionare l’opzione Fontanello. Il menu a discesa vi mostrerà la famiglia di font così come il suo stile e varianti.
2.4) Quale Font
In alternativa, puoi utilizzare l’estensione WhatFont in modo simile. Innanzitutto, installa l’estensione su Chrome o Firefox. Quindi, fare clic sull’icona dello strumento WhatFont sulla barra degli strumenti del browser e fare clic su qualsiasi testo per controllare il suo carattere. La cosa buona è che puoi selezionare un testo diverso e vedere quale tipografia usano contemporaneamente.
Una volta che hai finito, premi Exit WhatFont per chiudere i pop-up dei font e utilizzare la pagina web come al solito.
Ora che abbiamo visto come identificare i font dal testo, ci si potrebbe chiedere se è possibile fare lo stesso dalle immagini. La risposta è sì! Vediamo come fare.
Come identificare i font da un’immagine
Oltre a scoprire i font dal testo, è anche possibile identificare i font da un sito web attraverso le immagini. Per farlo, useremo uno strumento online chiamato WhatTheFont.
What The Font
Questo strumento online ti consente di caricare qualsiasi immagine, analizza il testo dell’immagine e ti dice quale font sta usando.
Per fare ciò, vai a questa pagina e trascina o carica l’immagine sullo strumento (assicurati che sia in formato JPG o PNG.) Quindi, definire la casella di ritaglio per il testo, e lo strumento vi mostrerà il carattere giusto del testo. In cima a quello, WhatTheFont fornisce anche siti web dove è possibile acquistare i font e permette anche di testare i font con il testo personalizzato.
In questo modo, puoi controllare i font da immagini o screenshot. Inoltre, ha un app mobile che è possibile utilizzare per identificare i font dal tuo cellulare troppo.
Conclusione
Tutto sommato, il font che usi può avere un grande impatto sul tuo sito. Può aiutarti a migliorare la leggibilità, la navigazione generale e mantenere i tuoi visitatori più a lungo. Chiarezza e leggibilità sono aspetti importanti di qualsiasi sito e maggiore è lo sforzo che ci metti, migliori saranno i risultati che avrai.
In questa guida, abbiamo visto diversi modi per identificare i font da un sito web:
- Utilizzo dello strumento di ispezione del browser
- Utilizzo degli strumenti Bookmarklet
- Tramite le estensioni del browser
- Utilizzo di strumenti online dedicati per identificare i font dalle immagini
Una volta trovati i font giusti, spetta a te scegliere come aggiungerli al tuo sito. Una volta scelta la tipografia che si desidera utilizzare, si consiglia di dare un’occhiata alla nostra guida su come cambiare il carattere in WordPress per passare al nuovo carattere in pochissimo tempo.
Se stai cercando altri modi per migliorare la leggibilità e la navigazione sul tuo sito WordPress, puoi anche dare un’occhiata a questi articoli:
- Come aggiungere pangrattato in WordPress
- Organizza i prodotti WooCommerce per marca
- Come aggiungere un mega menu WordPress