Passa ai contenuti principali

Usare i web font di Google su Blogger

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 questi web font è molto semplice e le indicazioni si basano tutte su 2 elementi CSS:
  1. il link al web font di Google
  2. il nome del font da utilizzare nel foglio di stile
Partendo dalla pagina principale Google WebFont scegliete un font che vi piace dalla lista, cliccandoci sopra (come viene indicato a rollover), viene aperta la scheda del font, questa ha più voci, la prima si apre con le specifiche del font che avete scelto, ma la voce più utile è l'ultima, ed è ben evidenziata: Use this font
Cliccando su quel link vengono mostrate nella pagina 2 parti di codice:
  1. il link di riferimento, funziona come un normale CSS, 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 il nome corretto del font che avete scelto
1. il link va copiato e inserito, modificando così il design del vostro blog.
Un esempio, in questo sito ho utilizzato il font Ultra con questa stringa:
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'/>
questo è il <link> con cui ho utilizzato il font Ultra per tutti i titoli di questo stesso Blog, e l'ho inserito subito proprio dopo l'apertura del tag <head>

Una volta entrati nel vostra bacheca di blogger, andate nella sezione Design, e scegliete la sottovoce: Modifica HTML, nel secondo campo: Modifica modello vedete tutto il codice della pagina, è lì che dovete lavorare, cercate all'inizio del codice il tag <head> e subito dopo inserite il link del font che avete copiato.

ATTENZIONE: il codice che vi viene fornito non è esatto per Blogger, inserito così come l'avete copiato, non appena salverete le modifiche vi darà un errore XML, in effetti per Blogger questo link non è chiuso; la soluzione è semplice: inserite prima della fine del tag <link> uno: / in modo che questa stringa di codice sia chiusa, fate riferimento alle specifiche XML per i tag senza chiusura.

2. cercate il selettore o le classi o i div a cui attribuire il nome del font che avete scelto e inseritelo facendo attenzione a come è scritto nell'esempio, se il nome è composto da più parole l'intero nome va chiuso tra virgolette (singole, ma non dovrebbero esserci problemi anche con le doppie).

Per utilizzarlo 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 e questo per poterlo fare lavora con delle variabili nel CSS, visibili dentro al campo Modifica Modello subito dopo il tag, se dovete intervenire su un selettore che è presente in queste variabili, noterete che hanno i valori che sembrano ripetuti 2 volte, uno per il default e uno per il value. Se volte essere certi 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, così si può scegliere che peso o stile utilizzare (grassetto o corsivo), per questo c'è tutta una sezione dedicata sono le API dei WebFont di Google,  sempre qui troverete tutte le specifiche per un utilizzo specifico dei web font, come l'utilizzo selettivo, o il loader per precaricare i caratteri.

Mi auguro che Google implementi la possibilità di poter utilizzare questi font direttamente da blogger.
Spero di essere stato il più chiaro possibile, se avete domande: i commenti sono aperti.

Post popolari in questo blog

InDesign dinamico attraverso l'unione dati

Ringrazio l'unione dati di Indesign.

Nel caso qualcuno non sapesse di cosa sto parlando a questo link c'è un ottimo tutorial, spiega molto bene come funziona il popolamento di dati in InDesign tramite l'unione dati.

Se l'argomento vi interessa c'è un video-tutorial:

Perché ringrazio l'unione dati?
Credo di aver sfruttato al meglio le funzionalità, le possibilità, e i conseguenti vantaggi dell'utilizzo di un semplice foglio di testo (.csv) all'interno dn InDesign CS3 e devo aggiungere che e sono riuscito a fare l'equivalente con un.txt importando tutti i record.

Consiglio vivamente l'utilizzo di un semplice file .txt per la sua semplicità d'uso (sempre che sia anche semplice il lavoro da eseguire), se il lavoro di popolamento è complesso, è meglio l'utilizzo di strumenti come excel che producono fogli di calcolo con tabelle che diventeranno .csv

Io il .txt l'ho utilizzato, ad esempio, per compilare nomi su dei badge, dovevo solo inser…

Google Reader è morto, viva Google Reader

Schiamazzi e condoglianze per il Re che muore Ora che gli animi si sono un minimo sedati e qualcuno sembra essersi dimenticato, o per lo meno è caduto nell'oblio dell'attesa, vi scrivo la mia idea alla chiusura del servizio di Reader da parte di Google; ora, ad acque calme posso esternare, oltre al mio rammarico, i motivi per cui questo annuncio mi ha dato non poco fastidio.

Scartate subito l'idea di leggere anatemi da infuencer: è fatto da google – è gratis – è l'unico – etcetera, etcetera, etcetera …
Ne sono qui a proporvi o a recensire alternative per leggere feed RSS; comunque la mia idea è alla fine di questo post.

Cosa verrà a mancare ulteriormente I servizi che mi interessano e ci verranno tolti sono in particolare 2 e strutturati all'interno di Google Reader, sono a supporto di altri strumenti di Google, e per quanto se ne dica a suon di post e condivisioni sul mancato servizio, non sono ancora incappato in nessuno che dicesse anche queste semplici cose:
ad…