Pubblicato il 22/10/12e aggiornato il

Personalizzare i caratteri del blog con i quasi 600 font di Google.

Come installare su qualsiasi pagina web e specificatamente nel modello di Blogger i 554 Web Font di Google senza dover caricare e scaricare nulla.
Gli utenti di Blogger possono scegliere tra molte famiglie di caratteri e le possono scegliere diverse per il testo della pagina, il titolo e la descrizione del blog, il testo delle schede, il titolo del post e il titolo dei gadget. Basta andare su Modello > Personalizza > Avanzato e selezionare l'elemento relativo. Dopo ciascuna modifica e dopo averne vista l'anteprima nella parte bassa, bisogna cliccare su Applica al blog in alto a destra per accettare le modifiche. 

I font a disposizione sono veramente moltissimi. All'inizio del menù a discesa vengono proposti quelli più comuni vale a dire Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet e Verdana. Se si desidera creare un blog che abbia dei caratteri veramente originali e scaricati da internet si può utilizzare @font-face che pone però delle difficoltà con alcuni browser segnatamente Firefox.

Si può anche decidere di usare i Google Web Fonts che sono facilmente installabili su qualsiasi modello di Blogger (non ho testato quelli a Visualizzazione Dinamica che fanno un po' storia a sé). Attualmente nel portale Google Web Fonts sono disponibili la bellezza di 554 famiglie di caratteri.

Sulla sinistra c'è una colonna in cui fare delle ricerche filtrando i risultati a seconda delle categorie (Serif, Sans Serif, Display, Handwriting), del Tickness (Spessore), della Slant (Inclinazione) e della Larghezza. Per ciascun carattere se ne può visionare l'aspetto in una frase (sentence), in un paragrafo o in un poster. Si va su Add to Collection per aggiungere quel tipo di font alla nostra collezione

collezioni-font-google

Le famiglie di font aggiunte possono essere rimosse andando su Remove from Collection. Per la loro installazione in Blogger o su qualsiasi altra piattaforma si va su Use in basso a destra come mostrato nello screenshot. Alcuni caratteri possono essere disponibili in più stili e sulla parte destra viene mostrata una specie di tachimetro con l'impatto dei caratteri scelti nella velocità di caricamento della pagina

google-web-fonts

Scorrendo la pagina verso il basso selezioniamo la scheda Standard e visualizzeremo il codice da incollare nella pagina in cui vogliamo utilizzare i nuovi caratteri.

google-web-fonts-css

Si avrà un codice che potrebbe essere simile a questo e che contiene tre nuove famiglie di font 

<link href='http://fonts.googleapis.com/css?family=Molle:400italic|Finger+Paint|Griffy' rel='stylesheet' type='text/css'/>

Si va su Modello > Modifica HTML > Procedi e si cerca la riga </head> . Vi si incolla tale codice subito sopra. Si salva il modello. In questo modo i font saranno caricati ma non saranno ancora visibili. Se Blogger non salvasse il template basterà aggiungere una slash ( / )alla parte finale del codice come mostrato nell'esempio. 

Nella parte bassa dello screenshot precedente sono evidenziate di giallo le righe da usare per la personalizzazione dei CSS. Nel mio esempio sono

font-family: 'Molle', cursive;
font-family: 'Finger Paint', cursive;
font-family: 'Griffy', cursive;

Se vogliamo usare il carattere Molle per il Nome del blog andiamo nuovamente su Modello > Modifica HTML e, subito sopra a ]]></b:skin>, incolliamo il codice

.Header h1 {
font-family: 'Molle', cursive !important;
}

Ho aggiunto il tag !important per dare priorità a questo CSS rispetto agli altri presenti nel template. Se avete un modello più vecchio al posto di .Header h1 ci potrebbe essere .header h1 ma non essendo case sensitive dovrebbe funzionare ugualmente.

carattere-molle-blogger

Se volessimo usare il carattere Finger Paint per il titolo dei widget, sempre sopra a ]]></b:skin>, incolleremo questo nuovo codice

.widget h2 {
font-family: 'Finger Paint', cursive !important;
}

dopo aver salvato il modello ecco come saranno i titoli dei gadget e i font della data

titolo-gadget-data-finger-paint

Come ultimo esempio vediamo come modificare i caratteri dei post. Il codice da incollare sempre nella stessa posizione stavolta è il seguente

.post-body {
font-family: 'Griffy', cursive !important;
}
che produce questo effetto

font-griffy

Certo non piacerà a tutti ma ho scelto volutamente dei font piuttosto originali. Nel caso voleste personalizzare altri elementi del blog basterà andare su Modello > Modifica HTML > Procedi e espandere i modelli widget. Pigiando su F3 si potranno conoscere tutte le occorrenze di font-family. Sarà quindi possibile sostituire il nome del font con uno di quelli che sono stati caricati con Google Web Fonts.




50 commenti :

  1. ciao Ernesto, ho un problemino..
    poco fa ho tolto il widget dei post recenti e vecchi visualizzati per titolo, e mi sono resa conto che non mi si visualizzano più in home le voci: "older post" "home" "newer post"... aiuto... dove posso intervenire? le sto provando tutte (non ho nessun tag condizionale imposto...non capisco come mai non si visualizzino più..

    RispondiElimina
    Risposte
    1. @ GaiaVincenzi
      Ti dovrebbe mancare tutto o in parte il blocco di codice relativo. Leggi qui
      http://www.ideepercomputeredinternet.com/2011/01/come-sostituire-in-blogger-piu-recente.html
      Puoi semplicemente creare un blog di prova e copiare il codice di quel modello contenente
      b:includable id='nextprev
      nel tuo template

      Elimina
    2. "older post" "home" "newer post" mi si vedono, ma solo nei post! come e dove posso cambiare il condizionale? grz

      Elimina
    3. @GaiaVincenzi
      Più che cambiare i tag condizionali dovresti toglierli. Trova il codice su un mio articolo e poi vedi se c'è e lo togli. Entrambe le righe.

      Elimina
  2. Ma i Google font sono visualizzati da tutti i browser?
    Perché una volta ne ho usato uno per un sito e con Firefox mi dava problemi

    RispondiElimina
    Risposte
    1. Ciao, io ne ho appena provati parecchi proprio su FF e li vedevo tutti bene...comunque le prove le ho fatte su Blogger, non so per gli altri siti...

      Elimina
  3. Ciao Ernesto,
    dopo tanti tentativi con disparati codici e sistemi che nel mio template non davano alcun esito, ho usato il tuo metodo per inserire un carattere di Google Fonts e ha funzionato dappertutto tranne che nel titolo delle pagine...intendo proprio quello visualizzato all'interno delle varie pagine...Queste le mie modifiche:

    .header .description {
    font-family: 'Averia Sans Libre', cursive !important;
    }
    .h3.post-title, h4, h3.post-title a
    {
    font-family: 'Averia Sans Libre', cursive !important;
    }
    .post {
    font-family: 'Averia Sans Libre', cursive; !important;.
    }
    .sidebar .widget {
    font-family: 'Averia Sans Libre', cursive; !important;.
    }
    .tabs-inner .widget li a {
    font-family: 'Averia Sans Libre', cursive !important;
    }
    .blog-feeds {
    font-family: 'Averia Sans Libre', cursive !important;
    }
    body {
    font-family: 'Averia Sans Libre', cursive !important;

    Nel mio template non trovo altro da modificare, a parte il titolo del blog, la data e l"h2", ovvero titolo del gadget, a cui non mi interessa applicare la font in questione...Come posso fare a usare Averia sans Libre anche nel titolo delle pagine? Grazie!

    RispondiElimina
    Risposte
    1. Oops, chiedo scusa, mi sono accorta che c'era un errore nel mio codice...non

      .h3.post-title, h4, h3.post-title a
      {

      ma

      .h3.post-title, h4, h3.post-title a {

      ...comunque il problema rimane lo stesso!

      Elimina
    2. @ Roberta R.
      Prova a incollare questo CSS

      #PageList1 ul {
      font-family: 'Averia Sans Libre', cursive !important;
      }

      Elimina
    3. Leggendo meglio forse non ti riferivi al menù delle pagine ma al titolo delle pagine. Mi sembra strano perché ha lo stesso CSS del post cioè questo
      .h3.post-title, h3.post-title, h3.post-title a { ....
      @

      Elimina
    4. Ciao, sì mi riferivo al titolo...credevo di aver risolto usando un altro tuo codice che ho trovato dopo, cioè quello per eliminare i titoli dentro le pagine...poi li avevo ricreati manualmente scrivendoli direttamente nell'editor delle medesime. Tutto sembrava funzionare (testato su IE8 e FF), senonché oggi mi trovo di fronte a un altro computer (sempre con IE8) e succede una cosa strana: sulla home page tutto bene, ma se visualizzo una delle pagine statiche, al posto di Averia SL mi compare un altro font (che io non ho...comunque mi sembra sia Comic Sans) non solo dentro la pagina, ma su tutto il blog! Vedo che il sito cerca di caricare Averia, poi per qualche motivo non ce la fa e "ripiega" su Comic...oltretutto questo genera anch strani spostamenti nel layout...Non so se ti sia utile per capire cosa succede, comunque a parte i tuoi 2 codici (quello dei web fonts e quello per nascondere i titoli) ne uso solo altri 2: il tuo per giustificare il profilo e un altro per nascondere "Mostra tutti post con l'etichetta x". Spero di non essere stata prolissa! Grazie in anticipo e buona giornata.

      Elimina
    5. @ RobertaR
      Alcuni aspetti del layout cambiano non solo con i vari browser ma anche in funzione degli OS usati.

      Elimina
    6. Va anche considerato che ci sono pure i dispositivi mobili tipo Ipad. Se il layout è giusto per l'85-90% delle visite bisogna ritenersi soddisfatti.

      Elimina
    7. Mi rendo conto, ma questa cosa è notevolmente brutta a vedersi...non c'è proprio modo di forzare il font sulle pagine statiche? (p.s.: uso il template "Fantastico").

      Elimina
  4. @ RobertaR
    Incollami l'URL Del blog e vedo se ricavo il CSS. Meglio ancora incollami l'Url della pagina

    RispondiElimina
    Risposte
    1. Ho aperto questa pagina
      http://offbeat-ya.blogspot.it/p/christopher-pike-room.html
      con Chrome e i font del titolo sono gli stessi del testo.

      Elimina
    2. Come ti ho detto, non succedeva con tutti i browser o - come giustamente hai osservato tu, io non ci avevo pensato - gli OS...Chrome in effetti andava bene...comunque, per il problema su IE8 e il sistema operativo da cui vedevo i caratteri "strani", ho risolto. Mi sono resa conto che, a parte il nuovo carattere installato nell'HTML, avevo ancora quello vecchio (Schoolbell, ovvero un carattere web) nel designer modelli...per cui evidentemente questo generava un po' di confusione. Al suo posto ho messo un carattere base (Arial), dato che ovviamente il campo non può essere lasciato vuoto...Ora sembra tutto a posto! Questa mia esperienza spero possa essere utile a chi vuole inserire nuovi caratteri grazie al tuo tutorial: liberatevi prima di qualunque carattere web avete installato direttamente dal designer modelli (almeno per le sezioni in cui volete sostituirlo col nuovo)! In ogni caso, ti ringrazio dell'assistenza e dei preziosi tutorial. Buona giornata!

      Elimina
  5. CIAO ernesto,ho seguito tutti i tuoi passi ma ilcarattere del mio blog è sempre uguale e non riesco a cambiarlo

    RispondiElimina
    Risposte
    1. @RosarioDeMaria
      SE non ti funziona ci possono essere varie cause
      1)Usi Mac, con questo OS non funziona
      2)Hai scelto un font non ancora supportato dai browser
      3)Hai fatto qualche errore di installazione
      4)Usi una versione di Firefox non ancora abilitata a questa opzione

      Elimina
  6. ciao, ti ringrazio per il lavoro che fai per tutti noi, mi sei stato utile mille volte e più! ora ho un problema, dovrei cambiare il carattere (font) a uno specifico post. Come posso fare?

    RispondiElimina
  7. @# Guarda che andando su Editor di Blogger si possono scegliere i font con cui editare il post. Se quelli presenti non sono sufficienti ne puoi scegliere altri usando Windows Live Writer
    http://www.ideepercomputeredinternet.com/2011/02/videotutorial-di-windows-live-writer-il.html

    RispondiElimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  9. perchè con questo font non funziona, mi dà errore nell html, eppure ho messo la / alla fine del codice
    link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css/'.....

    RispondiElimina
    Risposte
    1. Prova ancora con più attenzione. Non vedo perché il tuo modello non l'accetti e non te ne so dire la ragione
      @#

      Elimina
  10. ciao Ernesto sono riuscita finalmente a modificare il font ma non capisco come mai la scrittura ed i titoli dei widget rimangono invariati ed anche i titoli dei post e le date, cosa dovrei aggiungere ai css? questo è il link del mio blog nel caso in cui volessi dare un occhiata grazie http://graphycmagic.blogspot.it/

    RispondiElimina
  11. C'è scritto nel post. Devi cercare le occorrenze di font-family e sostituire il nome del vecchio font con quello nuovo. Prima salva il modello. Se intervieni nelle prime righe del modello nella sezione /* Variable definitions modifica solo i font-family in value. Per esempio se hai
    value="normal normal 14px Open Sans"
    puoi trasformarlo in
    value="normal normal 14px Finger Paint"
    @#

    RispondiElimina
  12. grazie, non ho capito bene ma ci provo ^_^

    RispondiElimina
  13. grazie Ernesto senza di te non saprei proprio come fare, ho sistemato tutto anche se ho capito che alcuni widget mi impedivano di fare le modifiche nonostante modificavo l html che mi hai indicato come ad esempio un calendario, che ovviamente ho rimosso ed un codice html per creare una specie di cella con i css dove ho inserito degi sfondi, se passi dal mio blog capisci al volo, grazie , un bacio ^__^

    RispondiElimina
  14. ciao Ernesto, io ho un grossissimo dubbio....ho variato il font del post, quindi ora posso selezionare "carattere predefinito nei post nuovi che vado a scrivere...ma i vecchi? devo entrare in 350 post e selezionare il testo, poi il carattere predefinito per variarli? Mi sembra assurdo...ci sarà un modo per applicare il font nuovo anche ai vecchi post, vero? Dimmi di si! :)

    RispondiElimina
  15. Se sei andato/a su Modello > Personalizza > Avanzato, hai modificato il carattere e hai salvato, la modifica sarà immediatamente attiva anche su tutti i post già pubblicati
    @#

    RispondiElimina
    Risposte
    1. penso io problema sia dovuto al fatto che ho variato l'html perchè avevo scelto un nuovo font da google fonts. Vorrei togliere queste modifiche, ma non ricordo cosa c'era prima! Lo so...non avrei dovuto farlo!
      Non avevo agito da Modello/personalizza/avanzato...ma direttamente dall'html cambiando la stringa dopo home e dopo body (family font...bla bla)
      Non so ora cosa mettere in quelle due stringhe! perchè non ho salvato le impostazioni iniziali e non me le sono scritte...

      Elimina
    2. Ti ricordi il nome del font? Credo proprio di sì :) Vai su Modello > Modifica HTML e con Ctrl+F cerca quel font. Dovresti trovare una riga tipo
      link href='http://fonts.googleapis.com/css?family=.....
      Cancella e nelle altre occorrenze sostituisci il nome di quel carattere con uno supportato da Blogger
      @#

      Elimina
  16. Ciao Ernesto! Mi chiedevo....è possibile aggiungere i fonts di google all' interno della lista di caratteri di blogger disponibili in Modello>Personalizza>Avanzato? Se non ho capito male agendo secondo la procedura che hai descritto bisogna comunque andare ad agire sull' HTL se poi si cambia idea e si vuole modificare un font. Non c'è modo di averli in lista? Grazie mille!

    RispondiElimina
    Risposte
    1. Ci avevo già provato ma non ci sono riuscito. Al massimo si possono avere nel computer
      http://www.ideepercomputeredinternet.com/2013/05/google-fonts-skyfonts.html
      @#

      Elimina
  17. Ma per aumentare il carattere del font devo andare a modificare .post body? Perché se metto la stringa font-size mi aumenta l'interlinea tra le righe e non la grandezza del carattere.

    RispondiElimina
    Risposte
    1. No. Il tag giusto è font-size. L'interlinea si modifica con line-height
      http://www.ideepercomputeredinternet.com/2014/09/interlinea-testo-html-css.html
      @#

      Elimina
    2. Provato. Non so perché ma aumentando font-size mi aumenta l'nterlinea. Ci sarà qualcosa che fa contrasto. Volevo chiederti se c'è un modo per scegliere il font della versione mobile.

      Elimina
    3. Scorrendo il codice dovresti trovare un blocco come questo

      .mobile .post { ..... }
      tra le due parentesi graffe prova a aggiungere un tag font-family: nome-font;
      @#

      Elimina
  18. Ciao Ernesto, non riesco a modificare il font dei titoli delle pagine statiche: nel mio modello (il simple) non riesco a capire quale sia la dicitura esatta per settare il font personalizzato, poiché se utilizzo il codice dei titoli dei post, quelli delle pagine statiche comunque non cambiano. Sai aiutarmi? Grazie mille!

    RispondiElimina
  19. Non mi hai incollato l'URL del sito. Non ho poteri divinatori :)
    Spero sia questo
    http://www.frittomistoblog.it/
    Prova con questo codice da incollare sopra alla riga con/b:skin
    #PageList1 > div:nth-child(1) > ul:nth-child(1) {font-family:Georgia !Important;}
    dove scegliere il nome del font
    @#

    RispondiElimina
  20. Ciao Ernesto, ma c'è un modo per riuscire nella procedura anche da Mac?...in passato da Pc c'ero riuscita senza problemi, ma adesso da Mac pur facendo la stessa procedura non mi compaiono i nuovi font :(

    Grazie
    A.

    RispondiElimina
    Risposte
    1. Non ho un Mac quindi non ti so dire nulla al riguardo .(
      @#

      Elimina
    2. Prova con questo articolo che è più recente
      http://www.ideepercomputeredinternet.com/2014/11/blogger-customized-fonts.html
      @#

      Elimina
  21. Ciao Ernesto, ho provato a modificare il font per la versione mobile del mio sito lericettedichiaralu.blogspot.com ma non cambia niente, anzi ora è venuto un riquadro grigio nella data. Il codice che ho messo e che non funziona è :

    .mobile .post {
    font-family:IM Fell Double Pica! Important;
    margin: 0;
    }

    Grazie, Chiara

    RispondiElimina
    Risposte
    1. Il tuo blog non è raggiungibile. Forse stai configurando un cambio di URL passando a uno personalizzato
      @#

      Elimina
  22. Ciao Ernesto io riesco a vederlo il mio sito, non sto facendo nessun cambio URL... Prova con .it
    Grazie per la risposta Chiara

    RispondiElimina
    Risposte
    1. Ho visto che hai inserito nel modello un codice come questo

      WebFontConfig = {
      google: { families: [ 'Cardo:regular,bold', 'IM Fell Double Pica' ],

      per installare il font. Non so dove hai trovato questo sistema di installazione che non conosco. In questo post si parla dei Google Fonts e per la loro installazione il codice è molto più semplice. Prova anche a sostituire Important con important anche se non è case sensitive potrebbe essere quello il problema
      @#

      Elimina
    2. Ciao Ernesto.. dove hai trovato questo codice anche perchè non ho installato nessun google font, bensì i font Cardo e IM Fell Double Pica li trovo già tra i vari caratteri nelle impostazioni. Quello che volevo fare, e sicuramente ho sbagliato post, è quello di cambiare il carattere del font della versione mobile in Cardo. Saluti cordiali.

      Elimina
    3. Il tuo allora è un modello ufficiale di Blogger e non mi ero mai accorto che queste opzioni fossero già presenti. Probabile che questa modifica non funzioni nella versione mobile. Altro non ti so dire perché avevi aggiunto la riga nel punto giusto
      @#

      Elimina
  23. Ok grazie, proverò a modificare in altro modo, se dovessi riuscire ti faccio sapere. Saluti Chiara

    RispondiElimina

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.