Google fonts in un articolo di Blogger


Google Web Fonts mette a disposizione una raccolata di oltre 600 tipi di carattere che possono essere utilizzati nella realizzazione di siti web o anche nel template di un blog o in un singolo post.

L'utilizzo dei font tradizionali, per motivi di compatiblita, era limitato ai cosiddetti font di tipo Web safe, i soliti Arial, Times etc.
Con CSS3 ed HTML5 tutti i font che utilizziamo possono essere incorporati nelle pagine html, ospitando il font stesso su un web server: uno dei  problemi che potrebbe sorgere utilizzando questo metodo è quello della licenza associata al font, visto che il font utilizzato viene scaricato da chi visualizza la pagina che lo usa.

Google Web Fonts ci viene incontro mettendoci a disposizione sui suoi server una serie di font che possiamo utilizzare senza eventuali problemi di licenza.

Molte guide si riferiscono all'installazione di un carattere proveniente da Google Font ottenuta modificando il template: ma se vogliamo utilizzare qualche font particolare in alcuni post non è necessario modificare il template.

L'utilizzo è estremamente semplice: andiamo su Google Fonts e otteniamo il codice relativo ai font che ci interessano: possiamo scegliere un solo font o una serie di font.
Per il seguente esempio ho scelto i font Fascinate e Hanalei

Il codice che ci interessa è composto di due parti:
la prima, in giallo, riguarda il codice che a rigore, secondo le specifiche W3C, andrebbe inserito nella sezione <head> della pagina e quindi bisognerebbe modificare il template
ma se noi inseriamo tale codice all'interno del nostro articolo visto che in pratica funziona lo stesso
(ci possono essere dei problemi che ritengo minori con il tempo di ricarica ed il rendering della pagina)

<link href="http://fonts.googleapis.com/css?family=Fascinate|Hanalei" rel="stylesheet" type="text/css"></link>


Inseriamolo quindi  nel nostro post all'inizio della pagina in visualizzazione HTML, comuque meglio inserirlo  prima di applicare il font tramite codice CSS

Vediamo la seconda parte del codice
"font-family: 'Fascinate' e "font-family: 'Hanalei'

Se si è un minimo pratici di CSS non sono necessarie altre spiegazioni, comunque farà un ulteriore esempio:


<div style="font-family: 'Fascinate', cursive; font-size: 60px;">
Prova Fascinate</div>   produce
Font Fascinate

mentre 

<div style="color: blue; font-family: 'Hanalei', cursive; font-size: 70px;">Prova Hanalei</div>  produce
... e tipo Hanalei
Nota: l'editor di Blogger non mostra correttamente i font utilizzati, bisogna fare l'anteprima per vedere la visualizzazione corretta

Commenti

Post popolari in questo blog