Scuolissima.com - Logo

Personalizzare i caratteri di Blogger con Google Font

Quando Blogger era ancora agli inizi, tutti i blog che ospitava sembravano l'uno la fotocopiata dell'altro e principalmente questo si notava dal tema in uso ma anche dal font. Adesso, invece, è possibile integrare più tipi di caratteri su Blogger andando su Modello > Personalizza > Avanzato, da qui è possibile cambiare le dimensioni del testo e il font.

Esistono anche tantissimi siti per scaricare font gratis ma bisogna fare attenzione anche alle loro limitazioni, altrimenti si è obbligati a comprarli per acquistare la licenza completa.
Poi vi è anche Google Fonts che contiene una vasta gamma di fonts che è possibile utilizzare per il proprio blog senza spendere nulla. E' il più grande inventario di caratteri web online ed ha più di 600 famiglie di font diverse ed oltre ad essere splendidi ed originali sono anche estremamente flessibili e leggeri.

Il sito è Google Fonts, e per la ricerca del carattere giusto dovete utilizzare il menù a sinistra. Per filtrare i font disponibili dovete potete selezionare la categoria (Serif, Sans Serif, Display, Handwriting, Monospace) e poi variare i parametri Tickness (spessore), Slant (inclinazione) e Width (larghezza).

Selezionando la sezione Sentence è possibile inserire il testo e vederne l'anteprima, da qui è possibile impostare la grandezza del carattere.

Quando avete trovato dei caratteri che vi piacciono, cliccate sul pulsante Add to Collection per aggiungere il font alla collezione.



Nel caso in cui avete sbagliato a selezionare vi basterà cliccare nuovamente sul pulsante che però stavolta presenta la scritta Remove from Collection.

Per installare i nuovi caratteri aggiunti alla collezione su Blogger o su qualsiasi altra piattaforma si deve fare click su Quick use, sarebbe il secondo mini pulsante con disegnato un quadrato con dentro una freccia verso destra.


Nella pagina successiva potete selezionare lo stile del carattere che si adatta meglio al proprio blog. Avete la possibilità di sceglierne più di uno, ma questo diminuirà la velocità di caricamento delle pagine, per verificare le prestazioni in base all'opzione scelta dovete tenere d'occhio il contatore sulla destra.


Scorrendo la pagina verso il basso troverete una riga di codice css simile che dovete copiare ed incollare nel blog andando su Modello > Modifica HTML e poi appena prima del tag </head>.
Se il codice prelevato non si dovesse salvare sul modello dovete aggiungere </link> al termine di esso, in questo modo:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'></link>
Attualmente i font che avete selezionato sono caricati anche su Blogger ma per renderli visibili bisogna inserire del codice css con il nome del font caricato. I seguenti codici che andrò ad elencare, in ogni caso, vanno tutti inseriti prima della riga ]]></b:skin> e bisogna sostituire il termine FONT NAME con il nome del font scelto, alcuni però essendo già nel tema in modo predefinito non occorre reinserirli ma basterà semplicemente cercarli e sostituire il nome del font in modo opportuno ma dovrebbero funzionarvi ugualmente (per via di !important). Inoltre gli esempi elencati qui sotto valgono per tutte le principali modifiche di caratteri, ovviamente vi  dovete modificare solo ciò che vi interessa.


Titolo del blog

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

Titoli dei widget

 .widget h2 { font-family: 'FONT NAME', cursive !important; }

Titoli dei post

.post-title {font-family: 'FONT NAME', !important; }

Testo del post

.post-body {font-family: 'FONT NAME', !important; }

Per quanto riguarda il testo del post, potete anche applicare il font solo a una certa porzione di testo utilizzando il codice riportato qui di seguito, in questo caso, però va inserito dentro il post stesso:
<span style="font-family: FONT NAME;">INSERISCI TESTO</span> 

Nel caso in cui non si riescono a visualizzare le modifiche fatte al font nonostante si è seguito per bene tutti i passaggi dovete aggiornare la pagina, controllare che l'API di Google sia perfettamente funzionante, cancellare la cache e tutti i dati di navigazione del browser (a volte è necessario), non utilizzare Internet Explorer ma un qualsiasi altro browser avanzato.

Purtroppo mi rendo conto che questo metodo potrebbe risultare difficile per chi ha meno o nessuna conoscenza del css. Tuttavia se seguite tutti i passaggi anche senza capire nulla, sono sicuro che supererete anche questa, in quanto ho cercato di semplificare le guide che tanti altri blogger scrivono in modo piuttosto tecnico.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies