Avantages et inconvénients des deux solutions

Ces deux manières de gérer l’affichage des polices personnalisées fait l’objet d’un débat assez virulent chez les web designers anglo-saxons. Il est difficile, voire impossible de départager les deux camps car les avantages des uns sont les inconvénient des autres et réciproquement. Mais de quoi parle-t-on exactement ?

Afficher les fontes uniquement après leur chargement

Le principal avantage de cette technique est que vous avez un meilleur contrôle de votre design. Vous ne risquez pas de vous retrouver avec une fonte toute moche à la place de votre police d’origine. Par contre, si par malheur votre police met du temps à se télécharger, il n’y a rien à lire.

Afficher les fontes de substitution en attendant le chargement

De l’autre coté, afficher le texte avec les polices de substitution prévues dans la chaîne CSS permet au navigateur d’afficher le texte dès que possible, même si la fonte personnalisée n’est pas encore là. Par contre selon la vitesse de chargement, vous allez exposer vos visiteurs à un effet de clignotement somme toute assez disgracieux.

Et c’est quoi le mieux ?

Difficile à dire et il n’y a pas de réponse absolue à cette question. Certains pensent que ce n’est qu’un détail anodin, et je ne leur donnerai pas tort dans la mesure où une fois que la police a été téléchargée, si le navigateur l’a correctement mise en cache, les prochains chargements de page ne souffriront plus ni d’un clignotement ni d’une absence de rendu.

À titre personnel, je suis plutôt partisan de la méthode choisie par Firefox et Opera. En effet, le Web est un milieu hostile où l’on ne maîtrise pas les conditions de rendu ni la latence réseau. En conséquence je préfère être sûr que mes visiteurs pourront lire le texte plutôt que d’être sûr que celui-ci sera joli (mais si je peux avoir les deux, je préfère encore plus). Ceci étant, si vous construisez des sites où le design est primordial et où le contenu textuel n’est qu’un soutien graphique, il est effectivement souhaitable d’avoir un comportement comme celui de Safari, Chrome ou Internet Explorer. Ah ! Cruel dilemme.

Limiter le clignotement

Allons courage, il n’y a pas de fatalité, et il est possible de réduire les inconvénients liés à l’une ou l’autre des solutions d’affichage. D’abord voyons comment limiter l’effet de clignotement de Firefox et Opera.

Bien choisir votre chaîne de polices CSS

La première chose à faire pour réduire l’effet de clignotement c’est de choisir avec soin la liste des polices typographiques à déclarer dans la propriété CSS font-family.

1. Assurez-vous que le dessin des polices est proche (évitez de déclarer une fonte manuaire avec une fonte de substitution de type linéal)
2. Assurez-vous que la hauteur d’x de chacune des polices est équivalente. Le clignotement perçu sera plus important avec un changement de hauteur d’x plutôt qu’avec un changement de chasse.

/* A éviter */
p {
    font-family : "Garamond", sans-serif;
}

/* C'est mieux */
p {
    font-family : "Garamond", "Times New Roman", Times, serif;
}

Harmoniser les hauteurs d’x

Comme je vous le disais, c’est le changement de hauteur d’x qui est le plus perturbant lorsqu’une fonte est substituée à une autre. Pour harmoniser les hauteurs d’x, vous pouvez utiliser la propriété CSS font-size-adjust. Cette propriété fait partie du module “CSS3 Font”. Malheureusement, à ce jour, seul Firefox l’implémente.

Cette propriété permet d’ajuster la taille des fontes de manière à ce que chacune des polices déclarées dans la propriété font-family ait la même hauteur d’x apparente. La valeur de cette propriété est un nombre décimal, à vous de voir quelle est la valeur la plus adaptée à votre chaîne de déclaration de fonte. Il n’y a malheureusement pas de recette miracle ici… il faut tester.

/* C'est beaucoup mieux */
p {
    font-family : "Garamond", "Times New Roman", Times, serif;
    font-size-adjust : 0.5;
}

Choisir le comportement que l’on veut.

L’idéal, ce serait de pouvoir choisir le comportement que l’on souhaite selon les cas d’utilisation. S’il existe beaucoup de ressources qui expliquent comment faire en sorte que Firefox réagisse comme Safari et Chrome, il est par contre beaucoup plus difficile de trouver comment faire l’inverse.

Les équipes de Google et de Typekit ont travaillé dur sur la question et proposent une solution assez élégante à base de Javascript qui vous permet de choisir le comportement de votre choix : Web Font Loader. Cette bibliothèque Javascript vous permet de contrôler très finement le chargement de vos polices et leur affichage. Son utilisation est des plus simples.

Tout d’abord, il vous faut une feuille de style qui comporte uniquement vos déclarations @font-face (vous pouvez aussi faire appel directement aux feuilles de style fournies par certains services de fontes comme FontDeck ou Google Font Directory)

@font-face{
    font-family : "maFonte";

    src : url('maFonte.eot');

    src : local('☺'),
          url('maFonte.woff') format('woff'),
          url('maFonte.svg#abcd') format('svg'),
          url('maFonte.ttf') format('truetype');
}

Ensuite, il vous faut appeler cette feuille de style via le script Web Font Loader

<script>
WebFontConfig = {
    custom: { families: ['maFonte'],
              urls: [ 'http://yourwebsite.com/styles.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.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

De cette manière, le chargement des polices va être monitoré par le script qui va, selon l’état du chargement (en cours, terminé ou échoué, globalement ou bien fonte par fonte), attacher des classes à votre page HTML, ce qui va vous permettre de choisir le comportement que vous voulez simplement via CSS.

En admettant que votre chaîne de déclaration de fonte soit la suivante

p {
    font-family : "maFonte", Arial, sans-serif;
}

Pour toujours avoir un comportement comme celui de Safari il faut rajouter la règle suivante :

.wf-mafonte-n4-loading p {
    visibility:hidden;
}

Pour toujours avoir un comportement comme celui de Firefox il faut rajouter la règle suivante :

.wf-mafonte-n4-loading p { 
    font-family : Arial, sans-serif;
}

Conclusion

Que vous soyez pro Safari ou pro Firefox peu importe, désormais vous êtes équipé pour contrôler le chargement de vos fontes. Dans tous les cas, je vous encourage à toujours penser à vos utilisateurs et à tester au maximum les différents contextes d’utilisation pour vous rendre compte de ce qui se passe. Tout le monde n’a pas le dernier navigateur à la mode associé à une connexion haut-débit.