font, typography, webdesign

Utilizzare i web-font di Google su Blogger


Anche se questa di WordPress non è la sede più adatta🙂 voglio descrivere come si possono integrare i web font di google sulla su piattaforma di Blogger.

Aggiornamento 29-06-2011

È stato aggiornata la sezione Google Fonts alla versione 2

Intanto vi consiglio questo bookmarklet che individua i web font inseriti in una pagina web. Ad esempio potete andare su minimu.it e vederlo in funzione

Consigli per come utilizzare i Web Font di Google su Blogger

In questa directory di Google trovate tutti i font che è possibile utilizzare per modificare l’aspetto tipografico sul vostro Blog.

Il procedimento per utilizzare i web font è molto semplice e le indicazioni si basano tutte su 2 componenti CSS:

  1. il link al web font di Google
  2. il nome del font da usare nelle dichiarazioni del foglio di stile

Partendo dalla pagina principale Google WebFont potete scegliete un font che vi piace dalla lunga lista.

Cliccandoci sopra (e come viene indicato a rollover), entrate nella la scheda del font, questa ha più sottovoci, la prima ad esempio indica le specifiche del font scelto, la voce che serve è l’ultima, ed è ben evidenziata: Use this font

L’articolo prosegue ->

Cliccando su quel link vengono mostrate nella pagina 2 parti di codice:

  1. è il link di riferimento, funziona come l’incorporamento di un CSS esterno in una pagina html, richiama un indirizzo in cui viene preso il font, e va inserito nell’header della pagina
  2. la seconda riga di codice è un esempio di come richiamare il font nel vostro foglio di stile: inserendo correttamente il nome del font (attenzione ai nomi composti da più parole sono compresi tra virgolette)

1. il link di riferimento va copiato e inserito in blogger, seguendo questo percorso: una volta entrati nel vostra bacheca di blogger, andate nella sezione Design, e scegliete la sottovoce: Modifica HTML, nel secondo campo: Modifica modello e vedrete tutto il codice della pagina, è lì che dovete lavorare per l’inserimento, cercate all’inizio del codice il tag <head> e subito dopo inserite tutto il link del font che avete copiato.

ATTENZIONE: il codice del link che vi viene fornito per il font scelto, per Blogger non è esatto.

Inserito così come l’avete copiato, e dopo aver salvato le modifiche vi darà un errore XML; per Blogger questo link non è chiuso; la soluzione è semplice: inserite, alla fine del tag <link>,prima dell’ultima parentesi, uno slash “/” in questo modo questa stringa di codice sia chiusa (fate riferimento alle specifiche XML per i tag senza chiusura).

2. cercate il selettore font a cui attribuire il carattere e scrivete il nome del font che avete scelto, facendo attenzione a riportarlo com’è scritto nell’esempio.

Per utilizzarlo nel campo Modifica Modello prestate attenzione alle variabili dei selettori che sono nei CSS del blog.

Blogger offre la possibilità di modificare l’aspetto di alcune parti tramite l’editor Designer Modelli, questo Editor per poter lavorare sfrutta delle variabili nel CSS, visibili nel campo Modifica Modello, subito dopo il tag <head>, se dovete intervenire su un selettore che è presente in queste variabili, noterete che hanno i valori che sembrano ripetuti 2 volte, sono uno per il valore: default e uno per il valore: value. Se volte essere “assoluti” del corretto funzionamento inserite il nome del font in entrambi i valori.

Ci sono altre opzioni, ad esempio nel caso il font abbia più varianti, per questi caratteri si può scegliere che peso o stile utilizzare (grassetto o corsivo), per questo c’è tutta una sezione dedicat le: API dei WebFont di Google.

Qui troverete tutte le specifiche per un utilizzo specifico dei web font, come l’utilizzo selettivo, o il loader per pre-caricare i caratteri.

Per gli aggiornamenti c’è anche un blog (sempre su blogger) dedicato ai Google Web Font

Un ultimo link a un video che racconta per Google dell’importanza dei WebFont

Standard

One thought on “Utilizzare i web-font di Google su Blogger

  1. Pingback: Font pairing – scegliere il miglior abbinamento tra caratteri (e font) « Paolo Valzania

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...