Google ha rilasciato delle nuove API per utilizzare all'interno delle proprie pagine web un proprio set di Font. In questo modo si supera un limite ritenuto insormontabile da sempre per gli sviluppatori web, quello di dare la possibilità ai creativi di scegliere un font alternativo rispetto ai soliti 4/5 font-safe che si vedono correttamente su tutti i browser.
Google font directory, offre tramite Google Font API, una libreria di font che è possibile utilizzare nei propri siti web. I vantaggi sono diversi
Se vi state chiedendo cosa può aver spinto Google a mettere a disposizione un servizio come questo, la risposta è abbastanza semplice. Il fatto di poter utilizzare font non standard fa in modo che i web designer evitino l’uso di testo scritto all’interno di immagini,favorendo l’indicizzazione sui motori di ricerca (Google chiaramente in Primis). In questo modo ci guadagna sia il Web Designer che da sfogo al suo estro creativo sia Google che indicizza molti più contenuti.
La seguente parte dell'articolo è tradotto dal un articolo di David Walsh
Diamo un rapido sguardo al modo con cui il Font di Google API può essere utilizzata.
Molti dei caratteri all'interno dell'archivio font di Google sono disponibili non solo in formato standard, ma anche in corsivo, grassetto e corsivo grassetto. Per richiedere una variante di un font si scriverà
{font}:{variant1},{variant2}
ecco un po di esempi per la richiesta di varianti
Cantarell Cantarell:bold Cantarell:italic Cantarell:bolditalic
Vediamo ora come possiamo includere ed utilizzare i caratteri speciali nella nostra pagina
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell" />
Il foglio di stile viene incluso nella pagina come qualsiasi altro foglio di stile. Una querystring con una variante per la famiglia può essere aggiunta alla URL del foglio di stile con il carattere da caricare. Caratteri multipli possono essere richiesti con l'uso del carattere "|" (pipe) carattere.
Alcuni esempi:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn:bold" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn|IM+Fell+Great+Primer" />
Prendetevi un momento per esaminare il foglio di stile di Google:
@font-face {
font-family: 'IM Fell Great Primer';
font-style: normal;
font-weight: normal;
src: local('IM Fell Great Primer'), url('http://themes.go
ogleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype');
}
@font-face {
font-family: 'Vollkorn';
font-style: normal;
font-weight: normal;
src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype');
}
Il metodo @font-face è quello scelto da Google per inserire il tipo di carattere. Utilizzando il font è semplice come utilizzare un font di sistema:
.mySpecialFontClass { font-family:'Vollkorn', serif; }
È anche possibile incorporare il font all'interno dell'attributo "style" di un dato elemento:
<p style="font-family:'Vollkorn';">Lorem ipsum....</p>
IL METODO JAVASCRIPT SEMPLICE
Google fornisce anche un semplice metodo JavaScript per inserire caratteri personalizzati all'interno di una pagina. Questo metodo richiede anche di includere il JSAPI JavaScript file e un frammento molto piccolo di JavaScript:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('webfont','1');
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: ['Tangerine','Cantarell']
}
});
});
</script>
Selezione varianti di carattere è estremamente semplice. Si usa il delimitatore ":" tra il tipo di carattere e la variante:
WebFont.load({
google: {
families: ['Tangerine:bold']
}
});
Si possono anche caricare più caratteri all'interno di un array di famiglie:
WebFont.load({
google: {
families: ['Tangerine:bold','Cantarell','Lobster']
}
});
IL METODO JAVASCRIPT AVANZATO
Il metodo avanzato JavaScript impiega un metodo asincrono JavaScript accoppiato con un oggetto WebFontConfig. Il metodo avanzato aggiunge anche chiamate per le richieste di carattere:
WebFontConfig = {
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
/* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
loading: function() {
// do something
},
/* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontloading: function(fontFamily, fontDescription) {
// do something
},
/* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontactive: function(fontFamily, fontDescription) {
// do somet
hing
},
/* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
fontinactive: function(fontFamily, fontDescription) {
// do something
},
/* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
active: function() {
// do something
},
/* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
inactive: function() {
// do something
}
};
/* async! */
(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);
})();
Si potrebbe utilizzare questo metodo anche per pre-caricare font prima di assegnareli a elementi specifici. Altra grandezza di questo metodo è che Google utilizza rapprentazioni delle classi CSS "attive" e "inattive" sull'elemento HTML per designare la rappresentazione di un carattere prima e dopo che il font sia stato caricato:
.wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */
font-family: serif
}
.wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */
font-family: 'Tangerine', serif
}
.wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */
font-family: serif;
font-size: 16px
}
.wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */
font-family: 'Cantarell', serif;
font-size: 16px
}
L'esempio completo è visualizzabile qui