Google Fonts è una risorsa online gratuita che offre una vasta selezione di caratteri tipografici per il web. Puoi facilmente integrarli nel tuo sito WordPress per dare un look professionale e accattivante al tuo brand. In questo articolo, ti spiegherò come fare.
Vai su Google Fonts (https://fonts.google.com/) e scegli il carattere che desideri utilizzare per il tuo sito. Puoi cercare per parole chiave, stile o categorie. Quando trovi un carattere che ti piace, fai clic su “Select this font” per aggiungerlo al tuo “carrello dei font”.
Dopo aver selezionato tutti i font che desideri, fai clic su “Apri il carrello dei font” in alto a destra dello schermo. Verrai reindirizzato alla pagina “Carrello dei font”. Fai clic su “Usa questi font” nell’angolo in basso a destra.
Verrai reindirizzato alla pagina “Integrazione del font”. Qui, puoi scegliere come integrare i font nel tuo sito. Per utilizzarli in WordPress, fai clic sulla scheda “Standard” e copia il codice fornito nella casella “Includere questo codice nel tuo sito”.
Apri il tuo pannello di amministrazione di WordPress e vai su “Aspetto” > “Editor”. Nel riquadro a sinistra, seleziona il file “style.css” sotto “Tema attivo”. Incolla il codice copiato in precedenza nella parte inferiore del file e fai clic su “Aggiorna file”.
Ora puoi utilizzare i font Google nel tuo sito WordPress specificando il loro nome nei fogli di stile CSS. Ad esempio, per impostare il carattere “Open Sans” come font predefinito per il testo del tuo sito, aggiungi la seguente riga di codice al file “style.css”:
body {
font-family: 'Open Sans', sans-serif;
}Salvare il file e aggiornare la pagina del tuo sito per vedere i cambiamenti. Ora dovresti vedere il tuo nuovo font in azione!
Utilizza un tema figlio per modificare il codice CSS in WordPress
Utilizzare un tema figlio in WordPress può essere un modo utile per modificare il codice CSS del tuo sito senza dover modificare direttamente il tema principale. Un tema figlio è un tema che eredita le impostazioni e le funzionalità di un tema principale (noto anche come tema genitore), ma ti consente di apportare modifiche personalizzate senza perdere le tue modifiche quando il tema genitore viene aggiornato.
Ecco come utilizzare un tema figlio per modificare il codice CSS del tuo sito WordPress:
Crea una cartella per il tuo tema figlio nella cartella “wp-content/themes” del tuo sito WordPress. Assegna al tema figlio un nome univoco, come “mio-tema-figlio”.
1. Crea un file style.css
Crea un file “style.css” all’interno della cartella del tema figlio e aggiungi l’intestazione del tema figlio come indicato di seguito:
/*
Theme Name: Mio tema figlio Theme URI: http://example.com/mio-tema-figlio/ Description: Un tema figlio di esempio per il mio sito WordPress.
Author: Tuo nome Author URI: http://example.com
Template: nome-tema-genitore
Version: 1.0.0
*/Assicurati di sostituire “Mio tema figlio”, “http://example.com/mio-tema-figlio/”, “Un tema figlio di esempio per il mio sito WordPress.”, “Tuo nome” e “http://example.com” con le informazioni appropriate per il tuo tema figlio. Inoltre, sostituisci “nome-tema-genitore” con il nome del tema genitore che stai utilizzando.
2. Crea un file functions
Crea un file “functions.php” all’interno della cartella del tema figlio. In questo file, aggiungi il seguente codice per fare in modo che il tuo tema figlio erediti i fogli di stile del tema genitore:
<?php add_action( 'wp_enqueue_scripts', 'mio_tema_figlio_enqueue_styles' ); function mio_tema_figlio_enqueue_styles() { wp_enqueue_style( 'nome-tema-genitore-style', get_template_directory_uri() . '/style.css' ); } Sostituisci “mio_tema_figlio_enqueue_styles” e “nome-tema-genitore” con i nomi appropriati per il tuo tema figlio.
3. Attiva il tuo tema figlio
Vai al pannello di amministrazione di WordPress, vai su “Aspetto” e attiva il tuo tema figlio. Ora puoi iniziare a modificare il codice CSS del tuo tema figlio
Plugin per usare Google Font con WordPress
Ci sono molti plugin WordPress che ti consentono di utilizzare i font di Google sul tuo sito in modo semplice e veloce. Ecco alcuni dei plugin più popolari:
Google Fonts Typography
Google Fonts Typography: Questo plugin ti consente di aggiungere i font di Google a qualsiasi elemento del tuo sito tramite un’interfaccia intuitiva. Offre anche l’integrazione con Adobe Fonts (Typekit).
Use Any Font
Use Any Font: Questo plugin ti consente di utilizzare qualsiasi font che desideri, non solo quelli di Google. Offre un facile caricamento del font dal tuo computer e un’interfaccia intuitiva per l’applicazione del font a qualsiasi elemento del tuo sito.
Scegli il plugin che meglio si adatta alle tue esigenze e inizia a utilizzare i font di Google sul tuo sito WordPress oggi stesso!
Usare Google Fonts rallenta il mio sito WordPress?
Utilizzare i font di Google può avere un impatto sulle prestazioni del tuo sito, poiché il browser dell’utente deve scaricare i font dai server di Google ogni volta che viene caricata una pagina del tuo sito. Tuttavia, questo impatto può essere minimizzato adottando alcune misure:
- Utilizza solo i font di cui hai davvero bisogno: Non è necessario includere tutti i font disponibili su Google Fonts nel tuo sito. Scegli solo i font di cui hai bisogno per il tuo design e rimuovi gli altri per ridurre la quantità di dati che devono essere scaricati dai server di Google.
- Utilizza il tag “preconnect” per i font di Google: Il tag “preconnect” informa il browser che il tuo sito si connetterà a un determinato server in futuro, il che può velocizzare il caricamento dei font.
- Utilizza il plugin come Autoptimize: Questo plugin ti consente di ottimizzare le prestazioni del tuo sito combinando e comprimere i file CSS e JavaScript, il che può ridurre il tempo di caricamento dei font di Google.
- Utilizza un content delivery network (CDN): Un CDN è una rete di server distribuiti in diverse parti del mondo che forniscono contenuti ai visitatori del tuo sito in base alla loro posizione geografica. Utilizzando un CDN per i font di Google, puoi ridurre la distanza tra il browser dell’utente e i server di Google, il che può aumentare le prestazioni del tuo sito.
Seguendo questi consigli, puoi minimizzare l’impatto dei font di Google sulle prestazioni del tuo sito WordPress e offrire ai tuoi visitatori un’esperienza di navigazione fluida e veloce.
