Come personalizzare i font delle pagine statiche di Blogger.

Come personalizzare la famiglia di font (caratteri) del corpo del testo e del titolo di tutte o di una sola pagina statica di Blogger.

In un precedente articolo abbiamo visto come personalizzare la famiglia di caratteri del menù delle pagine statiche. In un commento mi è stato chiesto come fosse possibile personalizzare il font del testo di una o più pagine statiche, o comunque diciamo che ho capito che questa poteva essere la domanda visti che era stata posta in un modo un po' criptico.

Considerando che questa personalizzazione potrebbe essere interessante anche per altri lettori ho deciso di pubblicarci un post. Si tratta innanzitutto di cercare una famiglia di caratteri che ci piace tra i font di Blogger oppure tra quelli di Google Fonts.

PERSONALIZZARE I CARATTERI CON UN FONT DI BLOGGER

Se si decide di personalizzare una singola pagina statica usando uno dei font disponibili per Blogger allora il procedimento è particolarmente veloce. Le famiglie di caratteri disponibili si possono visualizzare andando per esempio su Modello -> Personalizza -> Avanzato -> Testo Pagina e scorrere tutti i font presenti nella sezione Carattere. Poniamo per fare un esempio che si sia scelto il font Impact.

Per mostrare la pagina con i font Impact basta effettuare una piccola modifica anche dopo che si sia stata pubblicata. Si va su Bacheca -> Post -> Modifica per aprire l'Editor della pagina. Si clicca su HTML per visualizzare il codice. All'inizio del codice si aggiunge la riga

<div style="font-family:Impact !important;"> 

mentre alla fine si incolla </div>. Si aggiorna la pagina e questo è il risultato

PERSONALIZZARE LE PAGINE STATICHE CON I CARATTERI DI GOOGLE FONTS

Si accede a Google Fonts e si cerca la famiglia di caratteri che ci piace. Ho già illustrato il semplice sistema per personalizzare i vari elementi del blog con i Google Fonts. Se prendiamo come esempio la famiglia Kaushan Script otterremo dal sito la riga di codice seguente

@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

Dopo aver salvato il template si va su Modello -> Modifica HTML e, subito sopra alla riga </head>, si incolla il seguente blocco di codice

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
.post-body {
font-family: 'Kaushan Script', cursive;
}
</style>
</b:if>

Si salva il modello. Il risultato sarà il seguente

Con questa soluzione tutte le pagine statiche avranno la stessa famiglia di caratteri. Se si volesse limitare questo font a una sola pagina basterà sostituire la riga evidenziata di giallo con questa

<b:if cond='data:blog.url == "URL_PAGINA"'>

Se si volesse avere lo stesso font anche per il titolo della pagina dovremo usare questo codice

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
.post-body, h3.post-title {
font-family: 'Kaushan Script', cursive;
}
</style>
</b:if>

e otterremo un risultato come questo

Oltre alle classi .post-body e h3.post-title per il corpo del post e per il titolo possiamo aggiungerne altre separate da virgole. Concludo ricordando che 'Kaushan Script' è una famiglia di font di test e che può essere sostituita da altre. La riga evidenziata di verde si ottiene da Google Fonts.