Vuoi inserire un font personalizzato in WordPress?
Ti consiglio di dare un’occhiata ai 610+ fonts disponibili su Google Fonts, l’archivio online dei migliori fonts open source che Google stesso mette a disposizione gratuitamente, sempre in continua espansione.
Rispetto all’articolo Come inserire un font personalizzato in WP, con i Google Web Fonts la procedura per l’inserimento di un nuovo fonts personalizzato è molto più semplice, ed anche il tempo di caricamento del font è più veloce (Google è troppo potente :)).
Includere codice nell’header
Per prima cosa, vai su Google Fonts, cerca il font che vuoi inserire nel tuo sito WordPress (ad esempio il font Fjalla One) e clicca su Quick-use.
La schermata successiva è la pagina delle impostazioni del font. Prima di continuare, crea una copia di backup del tuo file functions.php (scaricandolo sul tuo computer via FTP). Poi vai su Aspetto > Editor > functions.php ed incolla prima dell’ultimo tag ?>, il seguente codice:
/* codice di Roberto Iacono robertoiacono.it
* Inserisce font personalizzati da Google Web Fonts prima della </head>
*/
function ri_inserisci_google_web_fonts() {
?>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<?php
}
add_action('wp_head', 'ri_inserisci_google_web_fonts');Scorri in verticale la pagina delle impostazioni del font e vai al punto 3:
Copia il codice standard che ti viene fornito da Google ed incollalo nel codice che ti ho fornito qui sopra, al posto della scritta IL TUO CODICE QUI.
Il mio codice inserirà automaticamente il codice fornito da Google direttamente nell’header della pagina, prima del tag </head>, così da non dover modificare a mano il file header.php e prevenire future parolacce al prossimo aggiornamento del tema che stai usando (se esiste questa possibilità).
Usare il font
Per usare il nuovo font all’interno del sito, basterà inserire il codice che ti fornirà Google al punto 4 della pagina delle impostazioni del font, all’interno del file style.css del tuo tema ( Aspetto > Editor > style.css):
Dove inserire questo codice? Beh, semplicemente dove ora c’è il font-family originale, per le sezioni del sito in cui vuoi usare il nuovo font, come h1, h2, title, ecc ecc.
Per capire quali sono le sezioni in cui vuoi cambiare il font, leggi come e dove modificare WordPress.
Quindi fai così, cerca la parola font-family all’interno di questo file, e quando lo ritieni opportuno, sostituisci il vecchio font-family: bla bla bla; con il nuovo codice fornito da Google.
Ad esempio:
