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




Lascia un commento

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


8 + 5 =