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.
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
Posta un commento
Ringrazio tutti quelli che vorranno lasciare un commento o che seguiranno o sottoscriveranno il mio blog. Il linea di massima cercherò sempre di rispondere.
Nel caso vogliate fare delle richieste o dei commenti off-topic ossia non collegati all'argomento dell'articolo, vi sarei grato se li postaste sulla pagina Facebook del blog. Grazie!