Come usare una famiglia di caratteri di Google Fonts per una porzione di testo.

Come personalizzare il font di una porzione di testo in un blog su Blogger o su Wordpress utilizzando i Google Fonts.

Abbiamo già visto come si possano usare le famiglie di caratteri di Google Fonts per il nostro sito per personalizzare i caratteri del post, del titolo o della data. In questo articolo vediamo come utilizzare questa grande opportunità anche solo per personalizzare il font di un bottone, o il font di un paragrafo che vogliamo mettere in particolare evidenza.

Possiamo fare tutto direttamente dall'HTML dell'articolo oppure inserire il codice nel template per poi riprendere la regola in tutti i post in cui lo riterremo opportuno.

OTTENERE IL CODICE DA GOOGLE FONTS

Si accede a Google Fonts e si cerca il carattere tra i 667 attualmente disponibili. Si deve cliccare nella icona Quick-use per procedere nella configurazione  

 

Nella pagina successiva si sceglie con una flag tra le varie opzioni disponibili



In basso lasceremo la spunta su Latin e  copieremo la riga di codice della scheda Standard
 

 

COME SCRIVERE UN PARAGRAFO CON UN CARATTERE DI GOOGLE FONTS

Se vogliamo usare questa tecnica solo per una porzione di testo, per un bottone o comunque per un singolo oggetto dobbiamo creare un codice come questo

<style>
.fontpersonale {
font-family:Josefin Sans;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600italic' rel='stylesheet' type='text/css' />
<p class="fontpersonale">Questa frase viene visualizzata con un carattere speciale</p>

dove la classe fontpersonale è puramente indicativa e può essere usata oltre che con <p> anche con i tag <div>, <span> ecc. Il risultato è il seguente

Questa frase viene visualizzata con carattere Josefin Sans

Ovviamente oltre alla famiglia di font possono anche essere inserite altre righe quali font-size:24px; per la dimensione dei caratteri, color:#ff0; con il codice del colore appropriato, ecc.

COME INSERIRE LA REGOLA NEL MODELLO

Se vogliamo utilizzare questo font  più volte allora ci conviene inserire il codice nel template. Si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera accanto alla sezione <b:skin> per visualizzarne tutto il codice. Con Ctrl+F ci cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla per esempio un codice come questo 

.fontpersonale {
font-family:Josefin Sans;
font-size:24px;
color:#00f;
}

Successivamente si cerca la riga </head> e, subito sopra, si incolla la riga del Google Fonts

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600italic' rel='stylesheet' type='text/css' />

Si salva il modello. Quando si vuole pubblicare con questo font basterà inserire la classe fontpersonale in un codice appropriato per richiamare appunto il Google Fonts

<div class="fontpersonale">Frase visualizzata con carattere Josefin Sans</div>

Aggiornamento: Mi è stato fatto presente in un commento che la riga di codice presa da Google Fonts deve essere "chiusa" vale a dire deve essere aggiunta una slash finale / altrimenti il Modello di Blogger potrebbe non salvarla. Non occorre farlo se si posta in un singolo articolo.