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…

Illustrazione per AQuest

AQuest
Una agenzia digitale italiana, ha lanciato un contest per celebrare il suo trasloco.
Chiedono di illustrare dove potrebbero trasferirsi e per ogni disegno che viene inviato parte una donazione a Medici senza frontiere e ABEO.

Io ho fatto questa immagine ispirandomi alla forma loro logo AQ, ci ho visto una montagna e un sole, da lì tutto si è evoluto costruendo il resto: altre montagne, la neve, un lago ghiacciato…

Se vi piace, sapete già cosa vi chiedo: mettetegli un like!

We can almost feel a fresh breeze today 🏔 @paolospotvalzania played with our logo and we really appreciate the setting! Thank you Paolo 🙌🏻 The #AQHome #contest is still open: you can find the link in bio! #aquestdigital #illustration #illustrator #artist #art #illustrazione #charity #webdesign #design Un post condiviso da AQuest (@aquestdigital) in data: 26 Lug 2017 alle ore 00:12 PDT

Il corpo del reato

Come ho fatto a scoprirlo adesso, dopo 7 anni?
È come se avessi perso gli occhiali, brontolo, sbuffo – ma dove li ho messi, erano lì, dai! – Poi li ritrovo una volta di fronte allo specchio del bagno, erano sulla testa, portati alla Bertinotti, così la pace, la serenità, la sicurezza – che sbadato – quindi idem per questo testo di Iosonouncane, che nel finale chiude in un perfetto Lucio Dalla degli anni '70.

Ora recupero, lo ascolto spesso, mentre si litiga sul rinnovato panorama della musica italiana, poco m'importa, le chicche si trovano anche se impolverate, e anche se fanno la muffa potrebbero fare del buon gorgonzola. Poi qualcosa mi piace, oppure, a volte basta scendere in una piazzetta, ascoltare il gruppo locale simpatico e bravo, mentre tu piangi davanti a YouTube per il discorso di Totti, io ho un po' più di paura, non solo siamo più deboli ma siamo anche più stupidi, ma preferisco averti vicino e praticare con te lo sport nazionale, critichiamoci a vicenda.

Non p…