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 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 è piaciuto e ti è stato utile ti invito ad iscriverti al mio canale Telegram. Se invece hai domande o vuoi lasciare un commento puoi contattarmi direttamente su Telegram o su Twitter. A presto!