Polices personnalisées grace au WebFont Loader de Google
Voilà donc comme promis le premier article de ce blog, avec une astuce technique bien connue maintenant mais qui vaut toujours le coup d’être dite et répétée.
Comment insérer des polices ( fontes ) particulières ( c’est-à-dire qui ne font pas partie de celles par défaut - Arial, Verdana, Times, etc. ) dans son site ?
Il y a bien évidement ( et comme toujours ) plusieurs manières de faire, mais je vous livre ici celle que j’ai choisi.
Elle utilise la règle de CSS 3 "@font-face" ( cf le paragraphe sur font-face ) mais aussi la Google Font API, code Javascript qui encapsule le procédé et lui ajoute de la souplesse.
Principe
Le principe est très simple : on laisse l’API Javascript charger des fontes ( disponibles sur des ressources distantes ou bien en local, ce qui nous intéresse bien plus ).
Le script marque l’arborescence HTML ( ie ajoute une classe à la balise html ) en fonction de l’état de chargement de la fonte ( en attente, réussi ou bien erreur ).
Il ne reste plus qu’à styler notre code HTML en fonction de l’état de téléchargement de la fonte, par exemple :
- Si la fonte n’est pas encore téléchargée, ne rien afficher.
- Si la fonte est téléchargée sans erreur, afficher le texte avec cette fonte
- Si une erreur est survenue dans le téléchargement de la fonte, afficher le texte avec une police de substitution ( toute la mise en page est alors adaptable )
Charger une fonte
Préparer les font-face
Afin que la ou les fontes puissent être lues par le plus grand nombre de navigateurs possible, on utilise les règles font-face de CSS.
On peut bien entendu les écrire soi-même, mais le plus simple reste de les générer sur le très utile Font-face generator de Font Squirrel.
L’utilisation en est très simple, et on obtient un kit contenant les règles font-face ainsi que les fichiers convertis.
Le code des font-face ressemble à ça ( ici sur la DIN Regular ) :
font-family: 'DINRegular';
src: url('font/din-regular-webfont.eot}');
src: local('DIN'), url('font/din-regular-webfont.woff') format('woff'), url('font/din-regular-webfont.ttf') format('truetype'), url('font/din-regular-webfont.svg#webfontS1vh2GiA') format('svg');
font-weight: normal;
font-style: normal;
}
On place ce code dans un fichier fonts.css, qui sera appelé par l’API afin de télécharger les bonnes fontes.
Lancer le WebFont Loader
Dans le head de la page, on écrit le script qui va charger nos fontes.
On peut bien entendu appeler l’API de Google Font de manière personnalisée, mais autant utiliser le bout de code présent sur leur site et fait pour ça !
Dans l’exemple on charge deux familles de police : DIN Regular et DIN Condensed Medium. Les font-face sont déclarés dans le fichier styles/fonts.css
custom: { families: [ 'DINRegular', 'DINCond-MediumRegular'],
urls:['styles/fonts.css']}
};
(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);
})();
Au chargement de la page, l’API ajoute des classes à la balise html de ladite page.
Les classes utiles sont :
- .wf-loading : L’API est en train de charger au moins une des fontes.
- .wf-active : Toutes les fontes sont chargées ( éventuellement certaines sont en timed out )
- .wf-inactive : Toutes les chargements de fontes ont échoués
Les WebFont Loader ajoute aussi des classes similaires, mais particulières à chaque fonte dont le chargement à été demandé, ce qui permet d’être encore plus précis. Dans notre cas :
- .wf-dinregular-n4-loading
- .wf-dinregular-n4-active
- .wf-dinregular-n4-inactive
et
- .wf-dincondmediumregular-n4-loading
- .wf-dincondmediumregular-n4-active
- .wf-dincondmediumregular-n4-inactive
Styler la page en fonction de l’état de chargement de la fonte
On peut maintenant styler la page ( dans la feuille de style appropriée ) en fonction de l’étape de chargement de la fonte
On pourra par exemple afficher une image de preloading tant que les fontes sont en chargement.
display:none;
visibility:hidden;
}
.wf-loading div.main{
background-image:url('img/preloading.gif') ;
background-repeat:no-repeat;
background-position:center center;
}
.wf-active div.main *, .wf-inactive div.main *(
display:block;
visibility:visible;
background-image:none;
}