Google+

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 caratteriPer 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.

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/>


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...



9 commenti:

  1. Oooh bello mi piace smanettare con l'html!!:D utilissimo questo post:)

    RispondiElimina
  2. ciao! Io vorrei modificare anche il font della navigation bar , ma non riesco :(
    Sonia

    RispondiElimina
  3. ciao! Io vorrei modificare anche il font della navigation bar , ma non riesco :(
    Sonia

    RispondiElimina
  4. ciao io ci ho provato ma non me l'ha modificato il titolo dei post. volevo utilizzare il font Pacifico. uso un template scaricato che si chiama Adele. come mai non funziona? si può risolvere? grazie mille ^_^

    RispondiElimina
    Risposte
    1. Ho apportato questa modigica due anni fa e sinceramente non saprei. Comunque controllo e ti faccio sapere
      a presto

      Elimina
  5. ah un'ultima domanda.. come faccio a modificare anche il font del menù? grazieee

    RispondiElimina