Personalizzare i titoli degli articoli usando Google Fonts

Personalizzare i titoli degli articoli usando Google Font

Oggi vogliamo dare un tocco di personalità in più al nostro blog andando a modificare il carattere dei titoli dei nostri articoli.

Per l’occasione utilizzeremo uno dei font (carattere) messi a disposizione da Google Fonts.

Cos’è Google Fonts

Google Fonts è una raccolta di font on line. La caratteristica di questo servizio è che i font sono visualizzabili su tutti i browser senza bisogno che gli stessi siano installati sul nostro computer.

Confusi? Allora un po’ di storia. Agli albori del web il font scelto per un sito doveva essere presente sul computer dell’utente, pena la sostituzione arbitraria del medesimo con uno di quelli installati sul proprio computer. Risultato: grafici web sull’orlo di una crisi di nervi perchè dovevano limitarsi a usare pochi font standard (Arial, Helvetica, Times New Roman, Comic Sans, …) o creare delle immagini che simulassero il titolo (impensabile farlo con testi lunghi) con pessime conseguenze per il SEO e lavori spesso da rifare per errori ortografici. Con l’evoluzione dei browser negli anni si sono succedute altre soluzioni più snelle (ad esempio @font-face), ma ancora limitanti,  fino ad arrivare a Google Fonts che “dice” direttamente al browser dove trovare il font e come visualizzarlo, risolvendo la grave intossicazione da antiacidi dei grafici web.

Passo Primo: la scelta del font.

Ammettiamo: la parte più divertente 🙂 . Andiamo alla pagina di Google Fonts e cominciamo scegliendo uno dei font proposti. Google Fonts ci mette a disposizione la possibilità di scremare la nostra scelta in base alla macrocaratteristica del font (per esempio Handwriting che simula la scrittura manuale) e di avere un’idea del risultato finale grazie all’anteprima del testo.

Una volta scelto il testo basta cliccare sul pulsante Add to collection che crea una finestra in basso con il riepilogo del font scelto.

Aggiungere Font

Clicchiamo su Use. A questo punto è Google Fonts stesso che ci dà indicazioni su come integrare il font sul nostro blog, istruzioni che dobbiamo un po’ adattare visto che stiamo lavorando su WordPress.

Usa Font

Passo secondo: integriamo il font su WordPress

La prima istruzione che ci fornisce Google Fonts è di inserire il seguente codice sul sito.

Aggiungere CodiceHtml

Sì, ma dove?

Dal menu laterale dell’amministrazione di WordPress scegliamo: Aspetto > Editor

Da questa schermata abbiamo la possibilità di modificare il codice del nostro sito. Dalle voci che si presentano nell’elenco sulla destra scegliamo Testata  (Header.php). Qui sono riportate le prime istruzioni che riceve il browser per visualizzare la pagina web. Poco dopo le prime righe, solitamente dopo il tag <title> incolliamo il codice copiato da Google Fonts e SALVIAMO col pulsante Aggiorna file.

Codice Header per Google Font

Ora dobbiamo inserire il secondo codice che va integrato nei fogli di stile.

Aggiungere Codice CSS

Torniamo su Aspetto > Editor e scegliamo il file Foglio di Stile (style.css) ; scorriamo il codice fino a quando troveremo una voce che indica il titolo dei nostri articoli, generalmente h1 o h2. Attenzione: questa voce può essere leggermente diversa a seconda del template che avete installato; non spaventatevi: riuscirete a trovare quella giusta con pochi tentativi, al primo se siete nati con la camicia! 🙂

Codice CSS Google Font

Dopo l’ apertura della parentesi graffa, la riconoscete è fatta così { , andiamo a incollare il codice copiato da Google Fonts. E’ possibile che sia già presente sul foglio di stile l’istruzione font-family, in questo caso commentiamo quella già presente aggiungendo prima dell’istruzione font-family i caratteri /* e dopo il punto e virgola i caratteri */ . Questo ci permette di commentare l’istruzione (quindi il browser non la eseguirà) senza cancellarla, nel caso commettessimo errori e volessimo tornare sui nostri passi. A questo punto? SALVIAMO.

Et voilà. Tutti i titoli del nostro blog sono cambiati!

Risultato personalizzazione titoli con GoogleFont

7 commenti su “Personalizzare i titoli degli articoli usando Google Fonts”

  1. Grazie!! Ho provato a seguire la tua guida però qualcosa non deve aver funzionato. Ho scelto il fonts ho inserito nell’editor ecc… però quando poi vado a vedere il risultato, non è cambiato niente 🙁 Cioè è rimasto lo stesso font che avevo prima.

    • Ciao Claudia, non vedi le modifiche perchè il tuo template ha delle regole più specifiche per i titoli. Può capitare.
      Da qualche parte nel tuo file style.css dovresti avere questa dichiarazione
      .entry-title {font-family: “Lato”, sans-serif,….}.
      Se riesci a trovarla, inserisci qui il nome del font che hai scelto. Dovrebbe funzionare. Fammi sapere.
      PS. in questi giorni ho problemi di connessione perciò ci metto più tempo a rispondere. Chiedo scusa.

      • Figurati! Anzi, grazie di avermi risposto 🙂

        Nel foglio di style per ora ho trovato solo questo: .entry-title { padding-bottom: 3px; padding-bottom: 0.1875rem; } che non va bene… comunque riprovo a mettere in atto da capo la tua guida, magari ho semplicemente sbagliato la!! Ti faccio sapere non appena riesco a risolvere

        Grazie tante dell’aiuto!!!! 🙂

    • Sono contenta per te Claudia! Perdonami se non sono riuscita a risponderti prima. Se dovessi avere altri dubbi chiedi pure. Buona giornata

    • Grazie per i complimenti! 🙂
      E’ possibile modificare anche il font di tutto il sito.
      In questo caso devi cercare la voce “body” sempre all’interno del foglio di stile.
      Di solito è una delle prime voci. Buon lavoro!

Lascia un commento