Come installare le 700 famiglie di caratteri personalizzati di Google nei blog su Blogger a Visualizzazione Dinamica o Dynamic Views.
Su Blogger possono essere usati diversi tipi di caratteri agendo su Modello > Personalizza > Avanzato e scegliendo il font tra quelli proposti per i vari elementi. Le famiglie di caratteri possono anche essere diverse e si può optare per un certo tipo di font per il titolo del blog, per un altro per il testo del post e per un altro ancora per i titoli del widget. Dal punto di vista grafico non so quanto questa scelta possa essere opportuna ma si può sicuramente fare operando nel Designer Modelli.
Le famiglie di caratteri ufficiali disponibili sono Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet e Verdana. Oltre a questi ci sono anche quasi cento web font in ordine alfabetico che vanno da Allerta a Yanone Kaffeesatz.
I caratteri possono anche essere impostati con il grassetto, il corsivo e se ne possono determinare anche le dimensioni in percentuale o in pixel oltre al ovviamente al colore. Il parametro dei font può essere impostato su Pagina, Intestazione, Titolo blog, Descrizione blog e Titolo post. In taluni modelli è possibile configurare anche altri elementi.
Se di queste 100 famiglie di caratteri non ce n'è neppure una che vi soddisfa, potete attingere ai quasi 700 Google Font messi a disposizione gratuitamente per gli webmaster. Ho già illustrato come installare nel modello questi nuovi caratteri quando erano ancora 554, in questo post vediamo più specificatamente come personalizzare un blog a Visualizzazione Dinamica o Dynamic Views.
Nel momento in cui scrivo le famiglie di caratteri di Google Fonts sono 692. Riepilogo brevemente il procedimento per ottenere il codice di un particolare font. Quando ne vediamo uno che ci piace possiamo cliccare su Quick-use e su Pop out per controllare il font in modo più approfondito
Si clicca su Add to Collection nel caso si abbia l'intenzione di utilizzare tale famiglia. Si va quindi su Use in basso a destra per configurare ulteriormente la famiglia nel caso ci fossero più opzioni. Sarà visibile una riga di codice da incollare nel nostro modello con tre possibili opzioni
![google-fonts[6]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFsCnOeoHmEY1V3uhbjIPTr9EhLEqH4mchwp2Q6tM6cIp3zIR7hxJcJzdqLIOSK3KU5f2NRb7dyZkIAj7r_B02f2HCcVsGGuLfAF-4X1l2mBa1HsrQ1XQMs0p23SdUu0Bl7yY5NpK3jqY/?imgmax=800 "google-fonts[6]")
Le schede sono Standard, @import e Javascript. Mi occuperò solo della prima che permette di inserire i font nel template come un semplice CSS. La prima riga che sarà simile a questa
<link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'/>
dovrà essere incollata subito sopra alla riga </head> o subito sotto alla riga <head> avendo l'accortezza di aggiungere una slash finale ( / ) perché altrimenti Blogger potrebbe non salvare il modello. Più in basso sarà visualizzata un'altra riga per personalizzare i CSS con il font prescelto
font-family: 'Loved by the King', cursive;
Nel caso dei modelli a Visualizzazione Dinamica andate quindi su Modello > Personalizza > Avanzato > Aggiungi CSS e inserite nel campo sulla destra un CSS simile a questo
/* Modificare Font Titolo Blog */
#header.header .header-bar span.title a h1{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modiifcare Font Titolo Post */.article-header h1.title a{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modificare Font Testo Post */
body{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modificare Font dei Link */a, a:visited, a:hover{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
#header.header .header-bar span.title a h1{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modiifcare Font Titolo Post */.article-header h1.title a{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modificare Font Testo Post */
body{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
/* Modificare Font dei Link */a, a:visited, a:hover{
font-family: 'Loved by the King', cursive; !important;
font-size: default !important;
}
Cliccate con il mouse dopo l'ultima parentesi graffa quindi andate su Invio. Si va quindi su Applica al blog in alto a destra. Vanno incollati solo i blocchi di codice che ci interessano e va sostituita la stringa in viola con la riga che riguarda la famiglia di font che avete prescelto.
Credo che questa modifica possa finalmente andare incontro anche agli utenti dei blog a Visualizzazione Dinamica che soffrono per la mancanza di un numero adeguato di personalizzazioni. Concludo osservando che font-size: default !important; serve per mantenere le dimensioni di default e che può essere tolto.
grazie mille, questo post cade a fagiuolo! buone vacanze
RispondiEliminaCiao, grazie mille per la guida. Utilissima.
RispondiEliminaHo solo un dubbio, ho usato un template free e mi sono accorto che quando in un post metto una parola in bold, questa una volta pubblicata non diventa in grossetto, ma rimane normale.
Sapresti dirmi cosa può bloccare il fatto che le parole in bold non appaiono tali una volta pubblicate?
grazie mille
Stai usando dei font scaricati da Google Fonts? Hai controllato che oltre a quelli normali ci sia anche per quel carattere anche il grassetto e il corsivo?
Elimina@#