Il web design moderno è tutto basato sull’esperienza utente. Le aziende investono molto tempo e denaro per garantire ai visitatori la migliore esperienza possibile durante la navigazione nei loro siti web. La rappresentazione del testo è parte integrante dell’estetica del sito web. Non importa quanto sia buona la qualità dei tuoi contenuti; se non sono piacevoli da leggere e sono troppo disordinati per i lettori, allora tutti i tuoi sforzi vanno sprecati.
Sebbene siano diverse le opzioni tipografiche disponibili, il modo più semplice per accedere a centinaia di font professionali (gratuitamente) è utilizzare i Google Fonts su WordPress.
In questa guida ti spiego cosa sono e come aggiungere Font Google in WordPress con o senza plugin.
Sei pronto? Iniziamo!
Cosa sono i Google Fonts e perché dovresti usarli?
Prima di iniziare, diamo rapidamente un’occhiata a cosa sono i Google Fonts e ai vantaggi chiave di usarli sul tuo sito WordPress.
Google Fonts è una libreria di font professionali forniti da Googlecon licenza gratuita lanciata nel 2010. Puoi utilizzare questa straordinaria libreria di font richiamando l’API messa a disposizione. Il fatto interessante è che puoi usare 992 famiglie di font ottimizzate per il web gratuitamente. La libreria è dotata di una directory web interattiva che consente di cercare tipi specifici di font e provarli nel browser web.
L’uso di Google web Fonts su WordPress presenta numerosi vantaggi. Sono gratuiti (anche per progetti commerciali), pre-hosted (quindi non occupano le risorse del tuo server) e scaricabili (puoi utlizzarli anche in stampa).
Esistono molti siti web che utilizzano Google Fonts in WordPress a proprio vantaggio. Tutti i temi moderni supportano l’utilizzo dei font di Google.
Se sei pronto a rinnovare la tipografia del tuo sito con web font facili da usare, tutto ciò che devi fare è trovare i font giusti e usarli sul tuo blog / sito web WordPress.
Come aggiungere manualmente Google Fonts a WordPress
Google Fonts elimina la maggior parte del lavoro di incorporazione delle famiglie di font nel tuo sito web.: è una libreria di font online che può essere richiamata in qualsiasi progetto web come qualsiasi altro script JS o CSS.
In questa sezione, ti mostrerò come integrare manualmente i font Google su un sito WordPress.
Passaggio 1: trova i Google fonts che desideri aggiungere al tuo sito web
Per iniziare, sfoglia la directory di font Google e scegli il carattere che desideri utilizzare sul tuo sito WordPress. Se hai già un font specifico, puoi semplicemente cercarlo utilizzando la casella di ricerca.
Puoi anche filtrare i font per categoria, lingue, numero di stili, spessore, inclinazione e larghezza o ordinarli in base alla data di aggiunta, in ordine alfabetico, di tendenza o in base alla popolarità.
Solitamente, i font possono essere:
- Serif, ovvero i font con le grazie, piccoli prolungamenti all’estremità delle lettere che sembrano accompagnarle e congiungerle l’una all’altra, come Times New Roman e Courier .
- San Serif, ovvero i font senza grazie, come Helvetica e Roboto .
- Display, ovvero i font caratterizzati da poco spazio libero tra una lettera e l’altra. Solitamente sono utilizzati per le intestazioni di grandi dimensioni, come Lobster e Poiret One;
- Handwriting, ovvero i font che rievocano la scrittura a mano, come Pacifico .
- Monospace, ovvero font i cui caratteri hanno tutti la medesima larghezza. Si tratta di font, come Source Code Pro .
Uno dei vantaggi dell’utilizzo della funzione di directory interattiva di Google fonts è che puoi visualizzare rapidamente in anteprima i font che ti interessano. Devi solo fare clic nella casella del campo del font e digitare il testo.
Ai fini di questo tutorial, opterò per Open Sans .
Passaggio 2: aggiungere i Font Google alla selezione
Ora che sappiamo con quale font procederemo, aggiungiamolo alla nostra selezione. Puoi farlo facendo clic nella casella della famiglia di caratteri.
Puoi aggiungere tutte le famiglie di font che desideri alla tua selezione. Una volta che sei pronto, fai clic sull’icona Famiglia selezionata nella parte superiore a destra dello schermo per visualizzare la tua selezione.
Passaggio 3: personalizza il carattere
Prima di incorporare la famiglia di Google web fonts nel nostro sito web WordPress, ci vorrà un momento per personalizzarlo un pò ‘.
Dalla questa scheda puoi selezionare le caselle per gli stili desideri poter utilizzare sul sito web.
Tieni presente che maggiore è il numero di stili e lingue che selezioni, maggiore sarà il tempo necessario per il caricamento delle pagine del tuo sito.
Per evitare che la selezione dei nostri font influisca sui tempi di caricamento della pagina del nostro sito, abbiamo deciso di procedere con una semplice selezione: light 300 e regular 400 .
Passaggio 4: incorpora i Font Google nel tuo sito WordPress
Esistono diversi modi per aggiungere un font Google a WordPress. Ti mostreremo come farlo utilizzando la funzione wp_enqueue_style () poiché è l’approccio consigliato per i siti WordPress.
Inizia tornando alla scheda Incorpora e copia il collegamento ( URL ) della selezione del font. Nel nostro caso l’URL completo è: https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap .
Successivamente, accedi alla dashboard di WordPress e dentro Aspetto Vai a Editor e apri il tuo tema attivo functions.php file usando un client FTP e aggiungi il seguente codice :
function add_google_fonts() {
wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap', false );}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
Nota: dovrai sostituire l’URL con il tuo.
Puoi iniziare a utilizzare il carattere che hai appena aggiunto utilizzando le opzioni di tipografia del tuo tema (se supportate) o aggiungendo del codice al foglio di stile principale del tema attivo. Ad esempio, se volessimo cambiare tutte le intestazioni H2 con il nostro nuovo font, il nostro codice potrebbe assomigliare a questo:
h2 {
font-family: 'Open Sans', sans-serif;
}
Come aggiungere i Font Google a WordPress usando il plugin Easy Google Fonts
Per qualcuno l’integrazione manuale dei caratteri Google WordPress potrebbe non essere la soluzione ottimale. Non preoccuparti. C’è un altro modo (più semplice) per aggiungere Google web Fonts al tuo sito WordPress: tramite un plugin.
In questa sezione, ti mostrerò come integrare i Font di Google in WordPress utilizzando il plugin Easy Google Fonts .
Passaggio 1: installa e attiva Easy Google Fonts
Accedi al tuo pannello di amministrazione di WordPress e vai a Plugin > Aggiungi nuovo. Cerca Easy Google Fonts e installa il plugin sul tuo sito web.
Una volta installato il plugin, fai clic sul pulsante Attiva per iniziare a usarlo.
Passaggio 2: inizia a utilizzare i font Google
Una volta attivato il plugin sul il tuo sito web, accoderà automaticamente i fogli di stile per i font Google che scegli di utilizzare. Per iniziare vai su Aspetto > Personalizza dal pannello di amministrazione di WordPress.
Noterai che una nuova voce di menu è stata aggiunta al Customizer di WordPress chiamata Typography .
Ti permette di controllare le impostazioni tipografiche dei tuoi paragrafi e varie intestazioni (da H1 a H6).
Supponiamo che tu voglia modificare il carattere dei paragrafi sul tuo sito web, il plugin Easy Google Fonts ti consente di personalizzare gli stili, l’aspetto e la posizione. Diamo un’occhiata alle diverse opzioni di stile
Dalla scheda Stili , è possibile configurare lo script, la famiglia di caratteri, lo spessore del carattere, la decorazione del testo e la trasformazione del testo. L’opzione font family consente l’accesso a centinaia di Google Fonts classificati come standard web Fonts , Google serif , Google fonts sans serif , Google Font display , Google font Handwriting , e Google Monospace Font .
Quindi, se volessimo usare Open Sans , dovremmo impostare l’opzione di script su Latino , l’opzione della famiglia di caratteri su Open Sans e il peso del carattere su Regular (che è l’equivalente di Regular 400 ).
Uno dei principali vantaggi dell’utilizzo del plugin Easy Google Fonts è che puoi visualizzare in anteprima l’aspetto dei tuoi post e delle tue pagine quando selezioni un font.
I migliori fonts Google
Non ci sono limiti quando si tratta di selezionare Google Fonts. Come webmaster, hai la libertà di scegliere il carattere che ritieni adatto ai tuoi lettori. Tuttavia, ci sono alcuni caratteri che sono più conosciuti per la loro leggibilità.
Diamo un’occhiata ai migliori font Google che sono ampiamente utilizzati e forniscono la migliore leggibilità.
1. Lora
Lora è una delle famiglie di caratteri ampiamente utilizzate per la sua leggibilità e varianti.
2. Playfair Display
Questa famiglia di font offre una migliore leggibilità del testo ed è adatta sia per il web che per la stampa.
3. Archivio
Questo tipo di font appartiene alla famiglia di caratteri sans serif. Ha un aspetto pulito adatto al corpo del testo.
4. Roboto
Roboto è uno dei font più comunemente usati nel web. Ha un bell’aspetto con un design web minimale e offre un’ottima leggibilità agli utenti.
5. Montserrat
Montserrat ha radici nella tipografia urbana del ventesimo secolo. Un’altra famiglia di font molto popolare che viene fornita con una serie di varianti.
6. Rubik
Molto pulito, Rubik è una famiglia di font san serif che ha servito oltre 470.000 siti web in tutto il mondo.
7. Source Sans Pro
Devi aver usato la famiglia di font Source Sans poiché ha oltre 4,18 miliardi di iterazioni tramite l’API di Google Fonts.
8. Google Font Lato
Lato è un carattere tipografico Sans Serif ed è considerato dai webmaster un carattere professionale e chiaro.
9. PT Serif
Con oltre un milione di siti web che utilizzano questo carattere, PT Serif è tra i caratteri Google più utilizzati. È adatto sia per il web che per i documenti di stampa.
10. Open Sans
Il font Open Sans è il più vicino alla scrittura umana, il che rende più semplice la lettura sia sul web che sulla carta. L’API di Google Fonts ha servito questo carattere più di 28,5 miliardi di volte in una sola settimana!
Ci sono molti altri Google Fonts disponibili per WordPress.. Sii saggio quando selezioni la famiglia di caratteri perchè può avere un impatto sia positivo che negativo sui lettori del tuo sito.
Best practice sull’uso dei Font di Google in un sito web
Diamo un’occhiata alle migliori pratiche sull’uso di Google Fonts in WordPress.
– Limita i pesi carattere: selezionare il set completo del font è allettante ma ha i suoi svantaggi. Per ogni variante, l’API diventa più pesante e richiede più tempo per caricare il set completo dei vari pesi del font.
Di solito viene caricato all’inizio della pagina web e, se non ottimizzato, può rallentare il tempo di caricamento iniziale della pagina web.
-Host Fonts Locally: Google Web Fonts è una libreria online ospitata altrove. Sebbene abbia un impatto minimo sulle prestazioni del tuo sito, tuttavia, in caso di indisponibilità, sarai comunque in grado di server i font Google selezionati se ospitato localmente.
-Accessibilità è importante: non è più un’opzione per ottimizzare il tuo sito web per le persone con problemi di vista. I font Google ti consentono di modellare il tuo font nel modo più conveniente per questo tipo di visitatori.
Usa il contrasto che è facilmente leggibile sulla maggior parte delle dimensioni e dei tipi di schermo e non è pesante per l’occhio del lettore. L’uso di colori molto brillanti o molto chiari non è l’ideale. Scegli il colore e le dimensioni più adatte alla maggior parte dei lettori.
Leggi anche: Come identificare quale font utilizza un sito web
Conclusione
La tipografia personalizzata è un’ottima opzione per abbellire il design del tuo sito, renderlo unico e aggiungere stile e personalità.
Sebbene in passato fosse difficile, al giorno d’oggi grazie a servizi come Google Fonts, chiunque può aggiungere in pochi minuti caratteri personalizzati al proprio sito WordPress.
In questo post, hai imparato diversi modi per aggiungere i font di Google al tuo sito, manualmente e con un plugin.
Ora sei pronto a cambiare intestazioni, paragrafi e ogni altro elemento di testo sul tuo sito con un font di tuo gradimento. Approfittane. Ma attenzione, da un grande potere derivano anche grandi responsabilità.
Buon lavoro!
