WordPress: Disabilitare i Google Fonts sul tema Jupiter X

Jupiter X è un tema per WordPress che concentra eleganza e personalizzabilità senza compromettere le performance del sito.

Tra le varie possibilità di personalizzazione del tema c’è non poteva mancare quella dei tipi di carattere da utilizzare. Tra i vari tipi di font che è possibile abilitare nel tema ci sono anche i Google Fonts.

Il problema con i Google Fonts però è che basta abilitarne una tipologia per fare in modo che il tema scarichi tutti i font di Google (compresi quelli non necessari). E il download di asset non necessari al sito non viene visto di buon occhio dall’indicatore delle performance dei segnali Web Vitals.

Sfortunatamente non esiste un modo per permettere il download selettivo dei font Google necessari (anche se gli sviluppatori ci stanno lavorando) ma esiste il modo per disattivare completamente il download dei Google Fonts e scaricare manualmente solo quelli utili.

Ma prima di vedere come disattivare completamente i Google Fonts mi presento: sono Lorenzo Millucci e sono un ingegnere del software che ama lavorare con Symfony e a cui piace condividere in questo blog le cose che impara. Non perderti anche il mio canale Telegram in cui ogni martedì parliamo di news e curiosità legate al mondo della tecnologia!

Disattivare completamente i Google Fonts

Per disattivare completamente i Google Fonts scaricati dal Jupiter X devi fare una piccola modifica al file functions.php:

function lm_disable_jupiterx_webfonts() {
    wp_dequeue_style( 'jupiterx-webfont' );
    wp_deregister_style( 'jupiterx-webfont' );
}
add_action( 'wp_print_styles', 'lm_disable_jupiterx_webfonts' ); 

Puoi fare questa modifica direttamente dal pannello di controllo del sito andando su Aspetto -> Editor del tema e selezionando la voce “Theme functions” oppure modificando il file wp-content/themes/jupiterx/functions.php con il tuo editor preferito.

Una volta salvate le modifiche il sito verrà caricato senza i Google Fonts. Se utilizzavi i Google Fonts in qualche pagina ora, avendoli disattivati, la vedrai con il font predefinito.

NOTA: Per accertarti che il cambiamento non lasci in cattivo stato qualche pagina ti consiglio di di fare un bel giro all’interno del sito verificando che non si sia rotto nulla.

Abilitare selettivamente i Google Fonts

Qualora tu abbia bisogno di attivare una singola font-family di font per il tuo sito puoi modificare lo script descritto precedentemente aggiungendo esplicitamente quale Google Font tu voglia caricare.

Ad esempio, se tu volessi caricare il font “Roboto” dovresti modificare lo script in questo modo:

function lm_disable_jupiterx_webfonts() {
    wp_dequeue_style( 'jupiterx-webfont' );
    wp_deregister_style( 'jupiterx-webfont' );
    
    // Import only webfonts actually used
    wp_enqueue_style( 'gfonts-roboto', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap' );
}
add_action( 'wp_print_styles', 'lm_disable_jupiterx_webfonts' ); 

Se questo post ti è stato utile puoi farmelo sapere lasciando un commento qui sotto oppure scrivendomi direttamente a t.me/lorenzomillucci.
Inoltre ti invito ad iscriverti al mio canale Telegram e a seguirmi su Twitter per non perderti nemmeno un post del mio blog. A presto!

Software engineer presso Slope.
Appassionato di videogame, nel tempo libero mi diletto a scrivere su questo blog.
Per non perderti nemmeno un post puoi seguirmi su Telegram!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *