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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

9  +  1  =