Utiliser Google Font API pour ajouter des polices à ses pages Web

Posté par seiyar81 le 2 août 2010 | Laisser un commentaire (1)

Parmis les nombreuses API disponibles dans ses Code Labs, Google a mis en place une API particulièrement intéressante : Google Font API !

Cette dernière nous permet très simplement d’inclure une ou plusieurs polices hébergées sur les serveurs de Google via un simple fichier CSS.

Un petit exemple pour illustrer le tout, dans la balise head :

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

Et plus loin dans le corps de la page :

<span style="font-family: 'Lobster', arial, serif; font-size: 16px;">Hello World !</span>

Ce qui donne le résultat suivant :

Hello World

Tout de même bien pratique cette API ! Vous pouvez consulter la liste des polices disponibles sur cette page.

Sachez qu’il est aussi possible d’utiliser un script Javascript co-développé par Google et TypeKit : WebFont Loader.

Rien de bien compliqué ici non plus, si ce n’est que vous pouvez mieux contrôler le chargement des polices via WebFont Loader :


      WebFontConfig = {
        google: { families: [ 'Lobster', 'Nobile' ] }
      };
      (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);
      })();

Vous pouvez ensuite définir vos styles comme ceci :

<style>
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Lobster', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 18px
      }
      .wf-active h1 {
        font-family: 'Nobile', serif;
        font-size: 18px
      }
</style>

L’avantage de WebFont Loader est qu’il supporte le chargement de polices via plusieurs fournisseurs. Ainsi vous pouvez charger des polices provenant des serveurs de Google mais aussi de TypeKit, Ascender, et même de n’importe quel fournisseur via un loader dit “custom” :

WebFontConfig = {
  custom: { families: ['OneFont', 'AnotherFont'],
    urls: [ 'http://www.yriase.fr/mystylesheet1.css',
      'http://www.weblike.me/stylesheet2.css' ] }
};
Catégorie: Développement Web, Javascript | Laisser un commentaire (1)


Un commentaire pour “Utiliser Google Font API pour ajouter des polices à ses pages Web”

Laissez un commentaire