Come cambiare il font di un post in Blogger e sostituirlo con uno originale
Devo essere sincera, la mia testa ragiona spesso pensando alla grafica, ai disegni e così quando scrivo un articolo mi interessa anche personalizzare il carattere e i colori.
Oggi vedremo come usare nuovi font nei post di Blogger, per rendere gli articoli più originali.
Ricordate sempre che il contenuto è fondamentale, così come è importante conoscere le regole del Web Copywriting per creare un buon articolo.
Poi potete anche curare gli aspetti grafici e ottimizzare il testo.
Come usare Font Personalizzati
Ci sono due modi per usare un font personalizzato in Blogger. Il più semplice di questi è di servirsi dell'opzione "Personalizza" fornita di base da Blogger.
Scegli il testo che desideri cambiare, il font, il colore ed è fatta.
Ma se avete voglia di mettere alla prova voi stessi potete aggiungere un nuovo font all'interno del codice del vostro blog!
Ecco a voi come si fa.
WEB FONT DI
GOOGLE
Google fornisce una libreria di 613 fonts gratuiti da poter usare nel vostro blog.
I caratteri disponibili sono davvero tanti e molto belli.
FONTS
FONTS
Inoltre Google fonts non mette soltanto a disposizione il font gratuito, ma anche il codice per utilizzarlo nel blog e le istruzioni per riuscire nell'impresa!
Potete creare la vostra personale collezione di Font. E' semplice.
Nella pagina dei FONT sfogliate la libreria per ordine alfabetico, popolarità, data di inserimento e aggiungete i caratteri alla vostra libreria.
sincronizzare i font di Google con il vostro desktop utilizzando SkyFonts.
➨ Dovete cliccare sull'icona a forma di freccia sulla libreria dei Fonts, che apre una schermata con le varie opzioni.
Sincronizza Google Fonts sul desktop con SkyFonts
SkyFonts è il principale ospite di font open-source per l'uso sul web, con centinaia di famiglie di font disponibili.
E' un programma leggero, che permette di installare facilmente i font direttamente dal desktop e può essere utilizzato ovunque.
➨ Oppure potete creare un account gratuito ed iniziare a scaricare fonts free!
COME INSERIRE I CARATTERI WEB FONT DI GOOGLE IN BLOGGER
⇨Prima di effettuare qualsiasi modifica per evitare sgradite sorprese ricordatevi sempre di salvare il modello originale del VOSTRO TEMPLATE da MODIFICA HTML⇒SALVA MODELLO COMPLETO.
Step 1 ⇝ Trovare e Scegliere i font!
Nella libreria on line di Google, scegliete il carattere e cliccate sopra.
Per questo tutorial ho scelto Lobster.
Quindi cliccate su "quick-use" che trovate immediatamente sotto ogni font che vi viene proposto.
Se avete creato la libreria virtuale basta che usate la sezione Usa. In entrambi i casi si aprirà una schermata.
Step 2 ⇝ Il Codice per utilizzare i font sul vostro sito.
Nella nuova schermata ci sono tutte le impostazioni del font e i codice di riferimento.
Dovete copiare il codice e incollarlo nella pagina del codice html nella pagina del vostro blog e integrare i font nel CSS.
Se avete creato una libreria di font, avrete a disposizione tutti i codici Css dei caratteri che avete scelto. Invece il codice Html sarà sempre uno.
UTILIZZARE I FONT NEL BLOG
Nota importante : aggiungete uno slash (/) di chiusura subito prima di >.
Altrimenti vi darà ERRORE, quando salvate.
PERSONALIZZARE I FONT
Se volete personalizzare il vostro carattere, alla voce 1 Scegliere gli stili desiderati potrete scegliere il tipo di spaziatura tra le lettere, la dimensione e si può addirittura cambiare anche il font-tipo. E si creerà il codice Css, da copiare e incollare nel template.
UTILIZZARE I FONT NEL BLOG
A questo punto vediamo come inserire i codici HTLML e Css nel Blog per personalizzare i post
Step 3 ⇝HTML
Andate in Design/modello poi cliccate su Modifica HTML.
Vi si aprirà la pagina con il codice del vostro blog.
Ora incollate il codice che avete copiato, subito dopo la parola <Head>.
La troverete fra le prime righe del codice.
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Poi cliccate su SALVA TEMPLATE.
Ecco un esempio di codice con la parola <Head> evidenziata.
Altrimenti vi darà ERRORE, quando salvate.
Il finale del codice sarà così :
type="text/css"/>
Fatto questo, dovete copiare il codice del font e incollarlo nel vostro codice HTML dopo il tag .post-body
Qui vedete un esempio:
La difficoltà qui è proprio nel trovare le parole all'interno del codice HTML del nostro blog. Ma a questo proposito ci viene in aiuto lo strumento "TROVA" che apparirà in alto a destra digitando la combinazione di tasti CTRL+F.
Basterà inserire nella stringa la parola che cerchiamo, nel nostro caso post-body, per vederla evidenziata nel codice.
Se nell'anteprima il carattere risulta troppo piccolo o troppo grande, vi basterà aumentare o diminuire il valore in percentuale del tag "font size" che trovate subito dopo il codice che avete inserito.
Se nell'anteprima il carattere risulta troppo piccolo o troppo grande, vi basterà aumentare o diminuire il valore in percentuale del tag "font size" che trovate subito dopo il codice che avete inserito.
Step 4 ⇝CSS
Cliccate su DESIGN > DESIGNER MODELLI> dal menu a sinistra cliccate su AVANZATO, scorrete il menu a tendina fino ad arrivare ad AGGIUNGI CSS, e nel box bianco che inserite il vostro codice css tra le parentesi graffe.
font-family: 'Lobster', cursive;
Esistono varie possibilità: potreste voler aggiungere il vostro nuovo carattere solo per i titoli o solo per i post, perciò ho distinto le varie possibilità, per rendere tutto più semplice:
- PER L’INTESTAZIONE HEADER
.header h1 { font-family: 'Lobster', cursive;}
- PER L'INTESTAZIONE SECONDARIA
h1 { font-family: 'Lobster', cursive; }
- PER SIDEBAR
.sidebar h2 { font-family: 'Lobster', cursive; }
- PER IL FOOTER
h3 { font-family: 'Lobster', cursive; }
- PER GLI ARTICOLI – POST
POST { font-family: 'Lobster', cursive; }
- PER L’INTERO MODELLO
BODY { font-family: 'Lobster', cursive; }
Naturalmente al posto di Lobster, dovrete mettere il nome del font che avete scelto.
Naturalmente al posto di Lobster, dovrete mettere il nome del font che avete scelto.
Nessun commento:
Posta un commento