Come usare font esterni : REDAZIONE

D	L	M	M	G	V	S
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

« Quali font usare sul web? | Homepage | Come aggiungere icone “Social” personalizzate nei post »

10/09/2010

Come usare font esterni

Come sapete, i font standard per il web, riconoscibili sia da PC che da Mac e dai browser più diffusi non sono molti, ma nessuno vieta di utilizzarne altri. L’unico problema è che dobbiamo avere la certezza che chi legge il nostro Blog abbia sul proprio computer lo stesso font, altrimenti tutto il nostro lavoro diventa inutile.
Se scegliamo la prima soluzione abbiamo il 50% di possibilità che il nostro lettore abbia quel font installato, ma l’altro 50% non vedrebbe il Blog in modo corretto. La seconda soluzione, invece, obbliga il nostro lettore a scaricare ed installare il font, ma non tutti desiderano scaricare qualcosa dal web. Inoltre, se utilizziamo un font a pagamento, dobbiamo dire ai nostri lettori che se vogliono vedere il nostro Blog in modo corretto devono acquistare quel font, se glielo facciamo scaricare noi andremmo contro le leggi del copyright!

Come superare il problema? In rete possiamo trovare diverse soluzioni che ci permettono di utilizzare i font che vogliamo senza violare nessun diritto di copyright, sia a pagamento che gratuitamente.

Tra i più diffusi e gratuiti c’è Google Font Directory, un servizio gratuito che permette di utilizzare all’interno di un Blog o di un sito web font esterne. I font a disposizioni non sono molti, ma sono gratuiti e permettono di creare sul testo degli effetti come questo:

Qual'è il vantaggio? Solitamente se si vuole inserire un testo utilizzando quel font, bisogna creare e caricare sul Blog un’immagine. Questa soluzione rende il nostro Blog più pensate da caricare, inoltre, se non ci ricordiamo di inserire la tag “alt” all’immagine, possiamo “perdere punti” nell’indicizzazione dei motori di ricerca.

Come funziona Google Font Directory? E’ molto semplice. Dalla pagina di Google Font Directory, cliccate sul font che vi piace. Clicchiamo sul bottone “Get code” e seguiamo le istruzioni:

Andiamo in “Presentazione > Opzioni avanzate” ed incolliamo il codice "embed” con il link al font tra le tag <head> ed </head> delle seguenti pagine del template:

Modello della homepage
Modello della pagina categoria
Modello di pagina Link permanente
emplate tags
Tutti gli archivi

Possiamo scegliere noi a quale testo del Blog associare quel font modificando il Foglio di stile.
Ad esempio, vogliamo associare quel font solo ai titoli degli elementi presenti nella colonna laterale del Blog. Restando in questa sezione, clicchiamo su “Modifica modello” del Foglio di stile, cerchiamo il codice relativo ai titoletti e aggiungiamo la riga di codice “font-family” con il nome del font scelto su Google:

   .sidebar h2 {
    margin: 0px 0px 0px 0px;
    font-family: 'Lobster', arial, serif;
    font-size: 130%;
    font-weight: bold;
    color: #080300;
    padding-left: 30px;
    padding-top:5px;
    }

Ora tocca a voi. Buon lavoro!