Come personalizzare i font di un blog su Blogger.

Come personalizzare i caratteri in un blog di Blogger modificando il modello e scegliendo la famiglia di font oltre che la loro dimensione.

A seguito di modifiche grafiche apportate al sito ho pensato anche di personalizzare la famiglia di caratteri del blog. Questa operazione è solo apparentemente semplice perché invece può nascondere diverse insidie. La scelta stessa dei font da utilizzare non è da sottovalutare. I caratteri sono suddivisi in due grandi categorie, quelli con le Grazie e quelli senza Grazie. Si usa più spesso la terminologia inglese che è diventata internazionale sans-serif che poi deriva chiaramente dal francese. 

È comune convinzione che i caratteri con le Grazie siano più facilmente leggibili in un foglio di carta mentre quelli senza Grazie trattino meglio gli occhi nella lettura al computer di grandi blocchi di testo. La scelta è ovviamente personale e penso si debba coniugare un certo grado di originalità con la facilità di lettura da parte dei navigatori.

In questo articolo non voglio affrontare il tema della personalizzazione dei caratteri attraverso i 700 font di Google che ho già affrontato in un altro post. Tale metodologia tra l'altro può essere estesa anche ai blog a Visualizzazione Dinamica. Non mi occuperò neppure di come scaricare font dal web e usarli nel blog con @font-face, tema che ho già trattato. Mi limiterò a mostrare come modificare i font usando quelli messi a disposizione dalla piattaforma Blogger. Il modo di procedere è alquanto diverso a seconda del tipo di modello che abbiamo e dei widget che vi abbiamo installato.

PERSONALIZZARE I FONT CON DESIGNER MODELLI

Se si possiede un blog Dynamic Views o se si sta creando il modello dall'inizio allora è consigliabile usare il Designer Modelli che ci consente di farlo in modo semplice e efficace. Si va su Modello > Personalizza > Avanzato e si configurano tipo, dimensione e colori dei caratteri

Si possono settare famiglia di caratteri, colore del testo, dimensione dei font per molti elementi del sito quali il corpo della pagina, il titolo e la descrizione del blog, il testo delle schede, il titolo dei post e i gadget. In basso si vedrà l'anteprima del sito dopo ogni modifica. Per renderle effettive bisognerà andare in alto a destra su Applica al blog.

MODIFICARE I FONT IN UN TEMPLATE PERSONALIZZATO

Se si ha un modello che abbiamo già personalizzato o che addirittura abbiamo scaricato da internet può essere rischioso usare questo procedimento perché cliccando su Personalizza possono essere azzerate molte modifiche che abbiamo faticosamente aggiunto come i menù o altre personalizzazioni del modello. Quindi prima di usare il Designer Modelli è consigliabile salvare il template per un eventuale ripristino.

Vediamo come procedere in questa operazione in modo manuale. Naturalmente va comunque sempre prima salvato il template. Si va su Modello > Modifica HTML e si clicca sulle freccette nere di  <b:skin>

in modo da visualizzare tutti i fogli di stile. Andiamo subito a vedere se in body { c'è una riga del tipo font: $(body.font); . Se è presente vuol dire che i parametri dei font sono stati settati nella sezione /* Variable definitions */ con un codice simile a quello seguente

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
        default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Vollkorn"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>

In sostanza i font del corpo del testo sono dati dal valore che prende body.font. Nell'esempio precedente è

value="normal normal 14px Vollkorn"

La parte del codice in default mostra invece quelli che erano i parametri iniziali del modello e non vanno toccati. Quindi per modificare i caratteri basta cambiare i pixel della dimensione e la famiglia di font oltre a settare un nuovo colore in value="#666666".

Questa operazione va ripetuta per gli altri elementi del template. Per esempio header.font per il titolo del blog oppure per tabs.font che si trova in un codice come questo

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
         default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Vollkorn"/>

per configurare la dimensione e il tipo di font dei widget. Un altro codice è il seguente

<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 16px 'Vollkorn',Verdana,sans-serif"/>

che serve per il titolo dei widget. In tutti questi blocchi ho evidenziato il selettore. Per il titolo del widget è h2 che è lo stesso di quello della data. Se quindi si modificano i parametri dei font del titolo dei widget automaticamente si fa lo stesso anche per la data.

COME FORZARE LE VARIABILI

Dopo che si sono fatte le modifiche va salvato il modello. Il blog va aperto con tutti i principali browser quali Chrome, Firefox, Internet Explorer, Safari e Opera per vedere se l'aspetto è giusto ovunque. Se proprio non si riesce a modificare i font con questo sistema si può usare un metodo un po' più invasivo.

Si deve individuare il selettore relativo alla modifica da effettuare. Per esempio body per il testo del post o h2 per data e titolo del widget e si cerca il relativo blocco di codice più in basso su /* Content */ e che sarà simile a questo

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Come vedete i parametri rimandano alle variabili che abbiamo impostato. Per tagliare la testa al toro, se per esempio vogliamo il carattere Nobile da 14 pixel per il corpo del testo basterà modificarlo così

body {
  font: 14px Nobile !important;
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

Un simile procedimento può essere fatto anche con gli altri selettori.