Aggiungere Font su Blogger: cambiare caratteri blogspot

Blogger è tra le piattaforme gratuite per il blogging più utilizzate: alle sue spalle la sicurezza e la garanzia di Google, proprietario de sistema messo a disposizione gratuitamente per gli utenti interessati a creare e gestire un blog.

Pur trattandosi di un servizio gratuito, blogspot mette a disposizione moltissime possibilità di personalizzazione, anche grafica: così, attraverso i modelli grafici, potrai dare lo stile che preferisci al tuo blog su Blogger. A tal proposito ricorda la funzionalità prima dell’estetica: per quanto bello un tema è utile solo se offre una navigazione ottimale all’utente.Una delle possibilità di personalizzazione, quella che vedremo in questo articolo, è il poter cambiare semplicemente il carattere di scrittura, ossia il font.

Il Carattere o font deve essere molto chiaro e leggibile, in armonia con l’intero blog: ciò migliorerà l’esperienza di navigazione dei visitatori, che apprezzeranno ancora di più il tuo spazio web. Al contrario se pensi di avere un brutto set di caratteri e non lo migliori presto potresti perdere traffico, poiché un font brutto o poco leggibile ha come effetto principale quello di provocare l’abbandono del sito o blog da parte degli utenti.

Come trovare un font o set di caratteri per il blog o sito

Fortunatamente cambiare il font non è un problema nè un’operazione troppo complicata: su internet ci sono una quantità di stili di scrittura davvero impressionante: esistono font gratuiti ed a pagamento, oggi ci concentreremo sulla grande offerta gratuita, e su come si inserisce una famiglia di caratteri su Blogger per cambiare il font del blog.

Google Fonts

Ancora una volta la soluzione è fornita da Google: con Google Fonts ti sarà possibile scegliere tra migliaia di caratteri gratuiti, da caricare sul blog. Google Fonts fornisce caratteri per tutti i tipi d siti e blog, non solo per Blogger, oggetto principale di questo articolo: con delle procedure indicate infatti potrai inserire questi fonts anche su altri sistemi di gestione dei contenuti.

Inserire i font di Google Fonts su Blogger

Fatte le dovute premesse possiamo ora cominciare con le modifiche vere e proprie:

La prima cosa da fare è andare a rintacciare ed eliminare il font esistente sul blog. Per farlo bisogna accedere a Blogger, andare sul modello in uso (è sempre consigliato il backup prima di queste operazioni) e cliccare sull’opzione di modifica dell’HTML. Troverai una riga di codice simile a questa, ossia un link ad un foglio di stile CSS:

rimozione-font-esistenteDovrai semplicemente eliminare questa riga e salvare il modello, sarai dunque pronto a scegliere ed installare il nuovo set di caratteri.

Visita Google Fonts, naviga tra i font a disposizione e scegli quello che più ti piace e pensi possa piacere ad i tuoi visitatori. Quando avrai deciso fai click sul bottone di uso rapido, che puoi vedere qui sotto:

uso-rapido-google-fonts

Nella schermata successiva ti basterà selezionare le varie opzioni desiderate e poi scorrere in basso fino a trovare e copiare il codice HTML da inserire all’interno del modello. Non chiudere la finestra di Google Fonts: dovrai copiare ancora un elemento nel passaggio successivo.

Vai alla Modifica HTML ed incolla il link li dove avevi eliminato la riga in precedenza. Ritorna dunque a Google Fonts e copia quanto contenuto nel box sottostante. Per incollarlo nel tuo modello ricerca dunque la voce body {
Troverai una riga con  font-famiy: font-attuale;
Sostituisci la riga e salva il modello: ora dovrebbe già funzionare. Se il font non funziona correttamente prova ad aggiungere il seguente codice prima di  ]]></b:skin> e salva il modello.

body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {proprietà del font scelto qui }

Se hai seguito attentamente la guida dovrebbe essere tutto ok, ma se hai difficoltà, dubbi o considerazioni contattaci o lascia un commento, saremo felici di risponderti!

Immagini ed idea originale da bloggeryard

2 Comments
  1. Reply
    Emanuela 07/10/2015 at 15:43

    Buonasera, ho seguito le vostre cortesi indicazioni ma al quarto step, son sorti problemi, perchè mi dava errore.

    • Reply
      Elio 10/10/2015 at 11:51

      Che genere di errori?

Leave a reply