Google Fonts API: includere facilmente font non standard nei nostri progetti

Una bella notizia per tutti coloro che hanno l’esigenza di utilizzare Font non standard all’interno di pagine web e non vogliono ammattire da soli con il @fontface e con il supporto dei font di Internet Explorer.

Google ha infatti rilasciato una nuova API che consente di utilizzare facilmente font non standard contenuti all’interno del suo repository richiamando semplicemente un file Javascript. Tale script trasforma automaticamente il test attraverso il font-face senza bisogno di ulteriori azioni da compiere.

Il funzionamento dello script è davvero semplicissimo ed abbiamo bisogno di solo due righe di codice per essere subito operativi. Innanzitutto richiamiamo lo script scegliendo il font che preferiamo da questa directory: http://code.google.com/webfonts. Una volta scelto il font, inseriamo all’interno del tag <head> della pagina il seguente codice:

view sourceprint?

1 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie">

Notiamo che viene passato un parametro contenente il nome del font da noi scelto. In questo caso Reenie Beanie. A questo punto assegniamo il font all’interno del CSS, con un codice simile al seguente:

view sourceprint?

1 h1 {

2 font-family: "Reenie Beanie", serif;

3 font-size: 40px;

4 }

A questo punto caricando la pagina verrà visualizzato il tag <h1> con il font da noi scelto. Il risultato finale sarà il seguente: