On en parle depuis quelques temps, Google est décidé à faire changer le Web. La révolution en cours propose actuellement quelques solutions.
API Webfonts – Font directory
Le géant lance une API qui propose une solution pour intégrer des polices exotiques à vos sites Internet grâce à une ligne de code simple à comprendre !
Avant de vous donner ce fameux code, qui ne restera pas secret longtemps si vous êtes déjà sur le site de Google Webfonts, je vous conseille d’aller voir la liste des polices disponibles chez Google.
Celle-ci propose plus de 820 familles différentes (chiffre mis à jour en 2017). Ce qui est énorme.
Bon et ce code il vient !
Voici comment intégrer une fonte grâce à son nom répertorié sur la page Font directory.
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css" />
Il vous suffit ensuite d’appeler la police comme vous le feriez habituellement avec une autre fonte grâce aux CSS :
font-family: 'Reenie Beanie', arial, serif;Voici un test de la police
Pour obtenir le link exact il vous suffit de cliquer sur Click to embed Font name lors du survol d’une des fontes proposées par Google. Un aperçu vous sera proposé ainsi que de nombreuses informations techniques dont l’onglet Get the code.
API Webfonts – WebFont Loader
Vous n’êtes pas sans savoir qu’il y a toujours des différences entre les navigateurs. Dans le chargement des polices c’est exactement la même chose.
Afin de placer les navigateurs à peu près au même niveau de ce point de vue, Google propose une sorte d’extension à son API Webfonts qui permet l’utilisation d’un fonte commune (arial, verdana, par exemple) en attendant le chargement de la fonte exotique. Cette extension s’appelle Google WebFont Loader.
Voici l’exemple d’utilisation que Google donne sur son site :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>Il vous suffit ensuite de préciser dans vos CSS quelle police commune sera utilisée pendant le chargement de la police exotique.
/*utilisée pour tous les P lorsque Tangerine est en chargement*/
.wf-inactive p {
font-family: serif
}
/*utilisée pour tous les P lorsque Tangerine est chargée*/
.wf-active p {
font-family: 'Tangerine', serif
}
/*utilisée pour tous les H1 lorsque Cantarell est en chargement*/
.wf-inactive h1 {
font-family: serif;
font-size: 16px
}
/*utilisée pour tous les H1 lorsque Cantarell est en chargée*/
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px
}Il vous sera même possible d’utiliser le loader pour le chargement d’une police utilisée sur TypeKit grâce à l’ID de votre fonte (kit).
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: 'myKitId'
});
Ici nous avons donc géré le chargement des deux polices de Google, ainsi qu’une police chargée depuis TypeKit.
C’est beau, mais…
Et bien voilà, c’est sympa tout ça, mais vous dépendez ainsi encore plus de Google. Ce n’est peut-être pas un mal pour de petits projets, des sites Internet personnels, mais pour de la production je reste sceptique.
Toujours est-il qu’il est bon de savoir que ça existe, et je pense l’utiliser pour mes petits projets perso, à vous de voir de votre côté 😉
Enjoy !
