Come aggiungere Google Font a WordPress? 4 metodi facili!

Vuoi personalizzare la tipografia del tuo sito web? Sei nel posto giusto. In questa guida, ti mostreremo diversi metodi per aggiungere i Google Fonts al tuo sito WordPress passo dopo passo .

Per impostazione predefinita, i temi WordPress sono dotati di alcuni caratteri specifici e quando pubblichi contenuti, questi caratteri vengono visualizzati nel frontend. Tuttavia, a volte potresti voler utilizzare un carattere personalizzato sul tuo sito per dargli l'aspetto perfetto per il tuo marchio. Ecco perché oggi ti mostreremo come includere Google Fonts nel tuo sito !

Perché aggiungere Google Fonts a WordPress?

Il carattere che usi ha un grande impatto sul tuo sito. Da un lato, influisce sul design del tuo sito Web e sul suo aspetto. Il carattere è una delle prime cose che i visitatori vedono quando visitano il tuo sito, quindi deve corrispondere allo stile della tua attività. D'altra parte, può anche avere un impatto sull'esperienza dell'utente. Ad esempio, se il carattere è difficile da leggere, i tuoi visitatori avranno difficoltà a trovare ciò che vogliono e abbandoneranno il tuo sito. Quindi, avere il carattere giusto non solo migliorerà l'aspetto del tuo sito, ma migliorerà anche l'esperienza degli utenti .

Ecco perché ti consigliamo vivamente di utilizzare un font intuitivo che trasmetta l'essenza della tua attività. Esistono diversi servizi di font come Typekit e Friconix di Adobe. Tuttavia, il migliore in circolazione è Google Fonts, un servizio gratuito con migliaia di famiglie di caratteri pronte per l'integrazione con il tuo sito web.

E la parte migliore è che aggiungere Google Fonts a WordPress è abbastanza semplice e richiede solo 5 minuti. Ci sono molti modi per farlo.

Metodi per aggiungere Google Fonts al tuo sito WordPress

Esistono diversi metodi per includere Google Fonts in WordPress:

1. Utilizzo dei plugin
2. Modifica del file functions.php
3. Tramite Style.css
4. Modifica del file header.php

Tutte queste opzioni portano a termine il lavoro, quindi scegli quella che meglio si adatta alle tue capacità ed esigenze. Prima di dare un'occhiata più da vicino a ciascuno di questi metodi, dovresti verificare se il tuo tema viene fornito con l'integrazione di Google Fonts.

Controlla l'integrazione dei caratteri di Google

La maggior parte dei temi WordPress sono dotati di un pannello tematico dedicato. Da lì, gli utenti possono personalizzare l'intero tema senza scrivere alcun codice. Alcuni temi come GeneratePress sono dotati di supporto integrato di Google Fonts. Ciò significa che non è necessario utilizzare plug-in o codici personalizzati per integrare i caratteri. Questo può farti risparmiare tempo e semplificarti le cose.

Se utilizzi un tema fornito con l'integrazione con Google Fonts, puoi apportare modifiche alla tipografia del tuo sito dal pannello del tema o dal personalizzatore di WordPress. Quindi, prima di iniziare con il processo di inclusione di Google Fonts nel tuo sito, ti consigliamo di controllare se il tuo tema viene già fornito con Google Fonts .

Ora, diamo un'occhiata a ciascun metodo per aggiungere Google Fonts al tuo sito WordPress.

1) Utilizzo dei plugin

Uno dei modi più semplici per aggiungere Google Fonts a WordPress è utilizzare un plug-in. Uno dei migliori in circolazione è Google Fonts Typography. Questo è uno strumento gratuito che ti aiuterà a includere Google Fonts nel tuo sito senza scrivere una sola riga di codice.

Innanzitutto, installa e attiva il plugin sul tuo sito web.

Successivamente, vai su Plugin e controlla le impostazioni del plugin.

Quando fai clic su di esso, verrai reindirizzato al personalizzatore di WordPress.

Da lì, puoi prendere il controllo della tipografia del tuo sito web. Vedrai quattro configurazioni principali:

• Impostazioni di base
• Impostazioni avanzate
• Caricamento dei caratteri
• Debug

Diamo un'occhiata a ciò che hanno da offrire le impostazioni di base e avanzate.

Impostazioni di base

Dalla sezione tipografia di base, puoi scegliere la famiglia di caratteri predefinita per il corpo, l'intestazione e i campi di input.

Dal menu a discesa sotto ciascuna sezione Font Family , potrai scegliere una delle centinaia di Google Fonts. Se conosci il carattere che desideri, digitalo semplicemente utilizzando la funzione di ricerca.

Per questo tutorial, utilizzeremo il font Work Sans. Dopo aver scelto un font dal menu a tendina, le modifiche si rifletteranno istantaneamente e vedrai l'anteprima dal vivo con il nuovo font. Inoltre, sarai in grado di specificare uno stile e uno spessore del carattere personalizzati.

Al termine, pubblica le modifiche.

Impostazioni avanzate

Nelle Impostazioni avanzate , puoi scegliere la famiglia di caratteri per il tuo marchio, navigazione, contenuto, barra laterale e piè di pagina.

Questa è un'ottima funzionalità se hai intenzione di utilizzare caratteri diversi in diverse parti del tuo sito web. Dopo aver selezionato un carattere dall'elenco a discesa, pubblica le modifiche.

La versione gratuita di Google Fonts include funzionalità limitate, ma è disponibile anche una versione premium che parte da 29 USD per un sito.

Questa versione pro ti aiuterà a configurare cose come la dimensione del carattere , il colore, l'ottimizzazione e gli elementi personalizzati. È un'ottima scelta se vuoi prendere il controllo di tutte le tue opzioni tipografiche. D'altra parte, se non vuoi spendere soldi per questo, puoi apportare queste modifiche usando un po' di CSS.

2) Modifica il file functions.php

Un'altra opzione per aggiungere Google Fonts al tuo sito WordPress è modificare il file functions.php . Prima di procedere con questo metodo, assicurati di utilizzare un tema figlio. Se non sai come farlo, puoi leggere come creare un tema figlio o utilizzare un plug-in tema figlio.

Per questo metodo, puoi modificare direttamente il file functions.php o utilizzare un plugin. Se sei un principiante, ti consigliamo di utilizzare il plug-in Code Snippets per aggiungere codice personalizzato al tuo sito. In questa guida utilizzeremo i frammenti di codice.

NOTA : vale la pena notare che se si utilizzano frammenti di codice, non è necessario creare un tema figlio. Tuttavia, consigliamo sempre di averne uno.

Quindi, per modificare functions.php usando i frammenti di codice, prima installa e attiva il plugin.

Quindi, vai alle impostazioni dei plugin. Da lì, puoi aggiungere un nuovo snippet al tuo sito.

Seleziona un carattere

In una nuova scheda, apri Google Fonts e seleziona una famiglia di caratteri da utilizzare sul tuo sito web. Puoi utilizzare la funzione di ricerca dei caratteri sul sito o semplicemente navigare. Nel nostro caso utilizzeremo la famiglia Lato.

Dopo aver selezionato un carattere, andrai alla pagina del carattere. Vedrai l'opzione di anteprima in cui puoi testare il carattere prima di aggiungerlo al tuo sito. Successivamente, seleziona gli stili che desideri utilizzare. Ad esempio, sceglieremo gli stili Regular e Bold .

Puoi rivedere le tue selezioni sul pannello di destra.

Dopo aver aggiunto gli stili, sei pronto per incorporarli in WordPress. Per fare ciò, copia il collegamento della famiglia di caratteri dalla scheda Incorpora .

Aggiungi il carattere al tuo sito

Ora, copia il seguente snippet e incollalo nel plug-in Code Snippets.

 <?php
funzione wpb_add_google_fonts() {
   wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap', false );
   }
   
   add_action('wp_enqueue_scripts', 'wpb_add_google_fonts');
?>

Assicurati di aver sostituito l'URL del carattere con i caratteri che hai selezionato.

Successivamente, salva lo snippet e attivalo. Hai aggiunto con successo Google Fonts al tuo sito WordPress !

Se non desideri utilizzare un plug-in per questa attività, incolla semplicemente il codice sopra nel file functions.php del tuo tema figlio utilizzando un client FTP.

Applica il nuovo carattere

Successivamente, puoi applicare il nuovo carattere con un po' di CSS. Ad esempio, per modificare il carattere del corpo, puoi aggiungere il seguente codice alla sezione CSS aggiuntivo nel personalizzatore.

 corpo {
famiglia di caratteri: 'Lato', sans-serif;
} 

Dopo aver pubblicato la modifica, vedrai come cambia il carattere del corpo. Poiché stai utilizzando il personalizzatore, vedrai immediatamente le modifiche nella sezione di anteprima.

Se hai bisogno di modificare qualsiasi altro elemento del tuo sito, devi modificare il codice sopra e specificare gli elementi che vuoi cambiare e la famiglia di caratteri. Ad esempio, se vuoi cambiare tutte le intestazioni h3 con il nuovo carattere, dovresti scrivere qualcosa del genere:

 h3 { 
famiglia di caratteri: 'Lato', sans-serif; 
}

In questo modo potrai aggiungere illimitate famiglie di Google Font e personalizzare il tuo sito WordPress.

3) Personalizza style.css (@import)

Un altro modo per aggiungere Google Fonts a WordPress è tramite il file style.css . Questa volta, invece di utilizzare codici PHP, modificherai lo style.css del sito Web per aggiungere nuove famiglie di caratteri.

Seleziona il carattere

Innanzitutto, vai su Google Fonts e seleziona quelli che desideri utilizzare sul tuo sito. Nella sezione Incorpora , seleziona la modalità @import .

Aggiungi il carattere al tuo sito

Ora, il pannello ti mostrerà un codice CSS univoco. Copia semplicemente il codice e incollalo nel CSS aggiuntivo nella dashboard di WordPress.

Quindi, premi il pulsante Pubblica .

Applica il nuovo carattere

Successivamente, puoi decidere dove vuoi applicare il nuovo carattere. Ad esempio, abbiamo scelto il font Kufam in corsivo, quindi per modificare il font del corpo, utilizzare il seguente codice CSS:

 corpo {
famiglia di caratteri: 'Kufam', corsivo;
}

Come puoi vedere, la sezione dell'anteprima dal vivo si aggiorna automaticamente e mostra le modifiche.

Allo stesso modo, se vuoi applicare il nuovo font a tutte le intestazioni h2, il codice che devi utilizzare è:

 h2 { 
famiglia di caratteri: 'Kufam', corsivo; 
}

Questo è un altro metodo molto semplice che possono essere utilizzati anche dai principianti. E la cosa buona è che non hai bisogno di alcun plugin.

4) Modifica il file header.php

Il quarto metodo per aggiungere Google Fonts al tuo sito WordPress è modificare il file header.php . In precedenza abbiamo visto come modificare l'intestazione in WordPress, quindi se hai letto quel post, sarà facile. Non preoccuparti se non l'hai fatto. In questa sezione, ti mostreremo come includere nuovi caratteri. Anche se richiede un po' di programmazione, è abbastanza semplice anche per i principianti.

Per questo avrai bisogno di:

• Il collegamento di Google Font
• Il percorso del tuo file style.css

Vediamo come ottenerli ciascuno.

Ottieni il link di Google Font

Il collegamento del carattere può essere recuperato dal sito Web di Google Fonts. Cerca il carattere che intendi utilizzare e selezionalo.

Nella barra degli indirizzi, vedrai l'URL del carattere.

Ottieni il percorso style.css

Ora vediamo come trovare il percorso style.css . Se hai accesso a cPanel, accedi al pannello di controllo del tuo sito e apri il file manager. Nella cartella wp-content , vedrai una cartella chiamata temi . È qui che risiedono tutti i tuoi temi installati. Prima di andare avanti, devi sapere qual è il tema attivo del tuo sito web.

Puoi trovare il tuo tema attivo nella sezione Aspetto nella dashboard di WordPress.

Ad esempio, nel nostro caso, è Twenty-Twenty.

Nel cPanel, andremo su wp-content > temi > venti venti.

Nel pannello di sinistra, vedrai il percorso dei file del tuo tema. Copialo.

Seguendo il nostro esempio, abbiamo ottenuto qualcosa del genere: public_html/wp-content/themes/twentytwenty . Ora, tutto ciò che devi fare è rimuovere la parte public_html , aggiungere il nome di dominio lì e menzionare il file / style.css alla fine del codice. Quindi il nuovo codice sarà qualcosa come questo www.example.com/wp-content/themes/twentytwenty/style.css .

Quando apri l'URL sul tuo browser, verrà caricato il file style.css . Se ricevi una pagina di errore 404, significa che il percorso del tuo file style.css è sbagliato.

Aggiungi il link di Google Font e style.css all'intestazione

Una volta ottenuto il link del font e il percorso style.css, tutto ciò che devi fare per aggiungere Google Fonts al tuo sito WordPress è copiare il codice dal basso e incollarlo nel file header.php dei temi .

 <link href="https://fonts.googleapis.com/css2? family= Oxygen & display=swap" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "http://yoursite.com/wp-content/themes/yourtheme/style.css" media = "all" >

Ricorda di sostituire l'URL con il tuo carattere e di cambiare il percorso del tuo style.css con il tuo.

Se non ti senti a tuo agio nel modificare il file header.php , puoi utilizzare il plug-in Inserisci intestazioni e piè di pagina per aggiungere il codice. Diamo un'occhiata a come utilizzare questo strumento.

Cambia header.php con un plugin

Innanzitutto, installa e attiva Inserisci intestazioni e piè di pagina sul tuo sito.

Successivamente, vai su Impostazioni> Inserisci intestazioni e piè di pagina.

Vedrai tre blocchi lì.

• Intestazione
• Corpo
• Piè di pagina

Quando aggiungerai il codice alla sezione dell'intestazione, incolla il codice sopra con l'URL del tuo carattere e il percorso style.css negli Script nella sezione Intestazione . Quindi, ricorda di salvare le modifiche.

Puoi lasciare vuote le sezioni del corpo e del piè di pagina perché non apporterai modifiche lì.

Il codice che hai appena incollato andrà subito sopra il tag </head> . Se non stai usando il plugin, assicurati di incollare il codice HTML nella sezione <head> . Altrimenti, non funzionerà!

Ecco fatto, hai completato l'integrazione e aggiunto Google Fonts al tuo sito!

Suggerimenti per Google Fonts Pro

L'aggiunta di Google Fonts al tuo sito è solo il primo passo. Dopodiché, ti consigliamo di dare un'occhiata ad alcuni dei nostri suggerimenti professionali che ti aiuteranno a ottimizzare ancora di più il tuo sito.

Ospita Google Fonts in locale

Google Fonts è una libreria online che contiene molti caratteri gratuiti. Quando utilizzi il loro servizio per incorporare i caratteri sul tuo sito, invierai richieste ai loro server e recupererai il contenuto richiesto. Se il server di Google Fonts deve affrontare problemi tecnici, ciò può influire anche sulle prestazioni del tuo sito web.

Per eliminare questo problema, puoi considerare di ospitare i caratteri sul tuo server locale. In tal caso, non sarà necessario inviare ulteriori richieste esterne. Tuttavia, tieni presente che ciò può richiedere le risorse del tuo server.

Abilita precaricamento DNS

La maggior parte dei plug-in di memorizzazione nella cache di WordPress è dotata di una funzione chiamata precaricamento DNS. L'idea è che quando invii richieste HTTP esterne, il tuo sito web diventerà più lento. Per risolvere il problema, puoi utilizzare la funzione di precaricamento DNS che ti consente di inserire URL esterni che puoi recuperare per ridurre le richieste esterne.

Ecco un esempio dalla sezione di prelettura DNS del plug-in WP Rocket.

Tutto quello che dobbiamo fare è digitare il dominio Google Fonts nella sezione URL da precaricare e salvare le modifiche.

Limita i pesi dei caratteri

Per personalizzare i caratteri, puoi utilizzare i pesi dei caratteri. Sono disponibili molte opzioni di grammatura del carattere come:

• Magro
• Extra leggero
• Luce
• Regolare
• medio
• Semi-grassetto
• Grassetto
• Extra-audace
• Nero

Normalmente, i siti usano lo spessore del carattere Normale e il Grassetto per i titoli. Quindi, quando selezioni gli stili, scegli solo gli stili che intendi utilizzare. In caso contrario, l'aggiunta di pesi extra al server che non utilizzerai comporterà un aumento delle richieste HTTP.

Conclusione

Tutto sommato, se aggiungi Google Fonts a WordPress sarai in grado di personalizzare la tipografia del tuo sito. Non solo il tuo sito web avrà un aspetto migliore, ma fornirai anche ai tuoi clienti un'esperienza migliore.

Abbiamo visto diversi metodi per farlo:

1. Con plugin
2. Attraverso il file functions.php
3. Tramite Style.css
4. Modifica del file header.php

Quindi quale metodo dovresti usare? Faranno tutti il ​​lavoro, quindi dipende dalle tue capacità e preferenze. Se non ti senti a tuo agio con la codifica, ti consigliamo di utilizzare il metodo del plug-in. La tipografia di Google Fonts è molto facile da usare e sarà un'ottima aggiunta al tuo sito web. Tuttavia, se non vuoi aggiungere altri plugin al tuo sito, puoi modificare il file functions.php del tuo tema usando il plugin Code Snippets o tramite FTP. Inoltre, il metodo style.css @import è un altro modo semplice e veloce per aggiungere Google Fonts con poche righe di codice CSS. In alternativa, puoi anche aggiungere l'URL del tuo font e il percorso style.css al file header.php .

Se ti è piaciuto questo articolo, condividilo con i tuoi amici sui social media. Per post più interessanti per migliorare il tuo sito, dai un'occhiata alla nostra sezione blog.

Quale metodo intendi utilizzare? Ne conosci altri? Fatecelo sapere nella sezione commenti qui sotto!