Personalizzare i caratteri del proprio sito con Google Fonts
Il metodo, forse, più semplice per usare i font personalizzati sul web, alternativo all’inclusione dei font con l’utilizzo di @font-face, è quello creato dalla “grande G”: Google Fonts (già Google Web Fonts). L’unica pecca sta nell’accontentarsi dei font che Google mette a disposizione. Non è possibile, quindi, utilizzare un font dal proprio archivio (acquistato o free). I vantaggi: oltre all’archivio gratuito(!) di font, con poche righe di codice avrete una soluzione cross-browser, funzionante anche sulle vecchie versioni di Internet Explorer!
Guida all’utilizzo
Dopo aver selezionato dal sito ufficiale www.google.com/fonts il font, gli stili ed il set di caratteri che si vuole utilizzare nel vostro progetto, occorre includere il codice che Google vi indicherà, all’interno del tag <head> della pagina html. Ci sono 3 modalità di inclusione: Standard, @import e Javascript.
Standard
Ad esempio, utilizzando il primo metodo per includere il noto font Lobster, dovremo scrivere:
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
@import
Nel secondo caso, occorrerà scrivere:
@import url(https://fonts.googleapis.com/css?family=Lobster);
Javascript
Google mette a disposizione anche la possibilità di includere i web font via javascript:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lobster::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
A questo punto basterà usare nei vostri stili il nome del font, come nell’esempio seguente (è sempre bene specificare anche un font alternativo o di default):
h1 { font-family: 'Lobster', cursive; }
#titolo { font-family: 'Lobster', serif; }
.paragrafo { font-family: 'Lobster', sans-serif; }
Per maggiori dettagli, potete consultare la documentazione creata su Google Developers per l’utilizzo dei Google Fonts: https://developers.google.com/fonts/docs/getting_started
Demo
Abbiamo realizzato un esempio di inclusione in una pagina web del font Lobster di Pablo Impallari, utilizzando Google web fonts.