HOME MAde IDeas: Modificare il carattere del titolo dei post con Google Fonts

Sito di riferimento: www.google.com/fonts

Il web fornisce un'infinità di Free Fonts per la personalizzazione dei blog, nella fattispecie Google mette a disposizione degli utenti una vera e propria libreria di caratteri. Per poterne usufruire è necessario seguire le istruzioni che seguono e modificare il layout con codici html, niente di complesso ma è preferibile effettuare un test sul "Blog di Prova" per evitare spiacevoli inconvenienti.

1) Collegarsi a Google Fonts.

2) Selezionare il font che vi occorre. Nella lista i caratteri vengono visualizzati in anteprima, è possibile aggiungerne diversi e procedere successivamente alla scelta del più appropriato.

3) Cliccare su Review. Apparirà l'anteprima dei font aggiunti alla collezione. Per eliminare quelli che non servono cliccare sulla "x" in alto a destra. Il consiglio è quello di limitare l'utilizzo di font speciali poichè appesantiscono il blog.

4) Cliccare su Use per generare i codici.

5) Collegarsi a Blogger ed effettuare un backup (Modello --> Backup/Ripristino).

6) Cliccare su Modello --> Modifica Html

Cercare la stringa <head> e, subito dopo, incollare il primo codice

Nota: inserire lo slash / alla fine del codice, altrimenti vi darà errore in fase di salvataggio.

Salvare il modello e tornare alla bacheca di Blogger.

7) Cliccare su Modello --> Personalizza --> Avanzato --> Aggiungi CSS

Copiare il secondo codice (es. font-family: 'Poiret One', cursive; )e sostituire la parte evidenziata:

h3.post-title a {

font-family: 'Poiret One', cursive;

font-weight: 400;

font-size: 30px;

}

Una volta modificato, copiare ed incollare il CSS (vedi sotto).

Il codice può essere personalizzato. Aumentando o diminuendo il valore font-size, ad esempio, è possibile modificare le dimensioni del carattere.

Si può, inoltre, intervenire sull'aspetto di altri elementi del blog modificando il codice appena utilizzato:

h3.post-title a {

font-family: 'Poiret One', cursive;

font-weight: 400;

font-size: 30px;

}

Sarà sufficiente sostituire h3.post-title a con:

.header h1 per modificare il titolo del Blog;

.main-inner h2.date-header per modificare la data dei post;

body per modificare il carattere dell'intera pagina.

Al prossimo post...