Come si usano i web font di Google?

immagine-come-si-usano-i-web-font-di-googleCome si usano i web font di Google? Avete il bisogno di utilizzare dei font personalizzati per il vostro sito web e avete scelto un font di Google (Google Font Directory)? Volete sapere a questo punto come inserirli nel vostro sito? Bene, continuate a leggere questo articolo per scoprire come fare…

I web font ci aiutano a creare un sito con una scelta dei font non limitata al set di font installati nel computer dei visitatori. Generalmente viene utilizzata direttamente la direttiva @font-face. Google ha messo a disposizione una serie di web font e un’API per utilizzarli, aggiungendo dei link ai file delle API nelle nostre pagine web. I font a disposizione sono visualizzabili nella Google Font Directory.

Un primo modo di utilizzarli è includere direttamente il CSS nella pagina web con una direttiva link:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lobster”>

dove Lobster è il nome del font che vogliamo utilizzare. Se vogliamo caricare più famiglie di font, si devono separare i nomi con un carattere pipe ( | ), ad esempio se vogliamo caricare Lobster e Cardo:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lobster|Cardo”>

Attenzione: se il nome del font è composto da più parole, è necessario inserire dei + al posto degli spazi: Ad esempio, se vogliamo caricare Cardo e Droid Sans (che sarà scritto Droid+Sans):

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Cardo|Droid+Sans”>

Se si vogliono inserire varianti come bold o italic, inserire il nome della variante dopo il nome del font, separandoli con : . L’esempio precedente, caricando però la variante bold del font Cardo:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Cardo:bold|Droid+Sans”>

Per altre informazioni, vedi la documentazione

Una volta inserito il link (meglio se come primo tag della sezione <head> per compatibilità con IE), sarà sufficiente inserire il font in una normale regola CSS, ad esempio per formattare i titoli h1 col font Lobster:

h1 { font-family: ‘Lobster’, serif; }

Il limite di questo metodo è che generalmente, finché i font non vengono scaricati dall’utente, le scritte formattate con quel font sono sostituite da uno spazio bianco. Per ovviare a questo inconveniente si può usare un secondo metodo, un’API Javascript di Google chiamata Web Font Loader. Questo si include con questo tag nella sezione <head>:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js”></script>

Per caricare i font, si usa questa sintassi:
<script type=”text/javascript”>
WebFont.load({
google: {
families: [ ‘Lobster’, ‘Cardo’ ]
}
});
</script>
A questo punto si può scegliere una famiglia di font per sostituire i web font fintantoché questi non sono stati ancora caricati, usando le classi (aggiunte in automatico nei tag) wf-active e wf-inactive, come nell’esempio seguente:
.wf-inactive h1 { font-family: serif; }
.wf-active h1 { font-family: ‘Cardo’, serif; }
 
0 Kudos
Non ti
muovere!

Condividi il Post