Come utilizzare i font | Blog Tutorial

Buongiorno lettori, oggi accontento una richiesta tutorial: come utilizzare i font.

In un precedente post vi avevo mostrato 5 font preferiti e per qualcuno è stato un po' rivelatore, ciò mi invita a fare altri post come quello. Io adoro lavorare con font diversi e oggi voglio farvi vedere come istallare i font nella vostra libreria caratteri, come utilizzarli nel blog.

Iniziamo con il primo step:

1. RECHIAMOCI AL SITO DAL QUALE SCARICHEREMO I NOSTRI FONT. Il sito che uso è DaFont - Download fonts. Una volta individuato il font che ci interessa, clicchiamo su Scarica e il font lo troveremo nella cartella Download. Estraiamo il file dalla zip, basterà anche lasciarlo momentaneamente sul desktop, ma estraiamolo dalla zip. 

2.CERCHIAMO NEL NOSTRO COMPUTER LA CARTELLA DELLA LIBRERIA DI FONT. Se anche voi, come me, non avete una versione Windows aggiornata, andiamo a Pannello di controllo> Tutti gli elementi del Pannello di controllo> Caratteri, oppure, nella versione più attuale di Windows, possiamo cercare nella barra di RICERCA IN WINDOWS E NEL WEB, la cartella CARATTERI.

Basterà trascinare il file del font che abbiamo lasciato sul desktop nella cartella dei font.

3.IL FONT SI INSTALLERÀ NELLA RACCOLTA CARATTERI AUTOMATICAMENTE E LO RITROVEREMO IN QUALSIASI PROGRAMMA come Word, Photoshop o altri editor immagini. Per trovare i font basterà andare sulla barra dei caratteri.

Avete visto? I caratteri sono installati. Sono carinissimi non credete? Continuiamo..

Possiamo utilizzare i font anche nel nostro blog, non solo per il titolo ma anche per il testo e i tutte le parti del layout che vogliamo. Il modo più semplice è utilizzare la raccolta di font di googlefonts, ma non è l'unico. Ci sono font che googlefonts non ha e in tal caso il lavoro si complica ma non è impossibile installarli nel nostro blog.

Vi mostro come installare font di googlefonts nel nostro blog:

1.ANDIAMO SU GOOGLE FONTS E CLICCHIAMO SUL FONT CHE CI INTERESSA

2.CLICCHIAMO SUL + SELECT THIS FONT (IN ALTO A DESTRA 

In basso comparirà una finestra grigio scuro con su scritto 1 family selected. Clicchiamoci. Se vogliamo modificare il carattere, se lo vogliamo in grassetto o in corsivo, possiamo cliccare su CUSTOMIZE, se invece non vogliamo modificare nulla saltiamo questo passaggio.

3.COPIAMO CON IL TASTO DESTRO DEL MOUSE IL CONTENUTO DEL PRIMO RIQUADRO GRIGIO 

ES: <link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">

 4. ANDIAMO SU BLOGGER> MODELLO> MODIFICA HTML

Cerchiamo (CTRL + F) la dicitura </head> e incolliamo sopra il codice html copiato, ma ATTENZIONE non è finita qui.

Una volta copiato il codice dobbiamo modificarlo in tal modo, inserendo type='text/css'/, come nell'esempio qui di seguito:

<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet" type='text/css'/>

5.SALVIAMO IL MODELLO

Possiamo utilizzare il font lì dove ci fa più comodo, per il titolo del blog, per le schede delle pagine, per il titolo del post, per il testo del blog e ancora per i widget...

6. ANDIAMO SU BLOGGER> MODELLO> PERSONALIZZA> AGGIUNGI CSS

Useremo tra parentesi graffe il contenuto che segue la freccia grigia.

•PER CAMBIARE IL FONT DEL TITOLO DEL BLOG (Header h1) dobbiamo inserire:

.Header1{

font-family: 'Arima Madurai', cursive;

}

•Stessa cosa vale per cambiare il carattere delle schede delle pagine,

.page.list. {

font-family: 'Arima Madurai', cursive;

}

•Per cambiare il carattere del titolo del post  

h3.post-title a {

font-family: 'Arima Madurai', cursive;

}

•Per la data

.main-inner h2.date-header {

font-family: 'Arima Madurai', cursive;

}

•Per il testo nelle apicette

blockquote {font-family: 'Arima Madurai', cursive;

}

•Per tutto il testo del post

.post-body {

font-family: 'Arima Madurai', cursive;

}

•Per il testo dei widget

.widget {

font-family:'Arima Madurai', cursive;

}

7. PER ULTIMA COSA SALVIAMO e il gioco è fatto.

Bene lettori, tutto chiaro? Spero che questo tutorial vi abbia aiutato a comprendere come installare i font sul vostro computer. Per qualsiasi problema, potete scrivermi nei commenti.

Vi aspetto.

Baci, R ♥