Pubblicato il 01/06/16e aggiornato il

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

font-personalizzati-blogger


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

font-pagina-statica-blogger

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

pagina-font-personalizzati-blogger

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. 




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.