Inserire Google Web Fonts in WordPress

Inserire Google Web Fonts in WordPress

Vuoi inserire un font personalizzato in WordPress? Ti consiglio di dare un’occhiata ai 610+ fonts disponibili su Google Web 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 Web Fonts, cerca il font che vuoi inserire nel tuo sito WordPress (ad esempio il font Fjalla One) e clicca su Quick-use.

google web fonts - 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:

[php]
/* codice di Roberto Iacono robertoiacono.it
* Inserisce font personalizzati da Google Web Fonts prima dell’ </head>
*/
function ri_inserisci_google_web_fonts(){
echo "IL TUO CODICE QUI";
}
add_action(‘wp_head’, ‘ri_inserisci_google_web_fonts’);
[/php]

Scorri in verticale la pagina delle impostazioni del font e vai al punto 3:

Codice google-web-fonts

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):

integrare font google

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:

codice stile

Buona personalizzazione!

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione
  
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
4 Commenti
  • Con uno solo da inserire sono riuscita, se voglio inserire un altro font come agisco?
    raddoppio il codice o modifico quello esistente? ringrazio

    • Roberto Iacono

      Basta selezionare direttamente da Google Web Fonts più fonts contemporaneamente, poi utilizzi il nuovo codice al posto di quello precedente. In alternativa, puoi anche inserire più fonts separatamente copiando più volte il codice, ma non la trova una scelta ottima. 🙂

  • Ciao Roberto,
    nel font che vorrei utilizzare Segoe TV non c’è il tasto Quick-use, perchè? come posso fare?

    Grazie
    Elena

    • Roberto Iacono

      Si vede che è a pagamento. Cerca il sito originale che lo vende ed acquistalo, è l’unica soluzione che vedo se devi acquistare proprio quel font 🙂