In The Box

Si vous êtes nouveau ici, je vous recommande de vous inscrire à mon flux RSS afin de suivre l'actualité de ce blog.

CSS3 arrive avec son lot de nouveautés, dont certaines étaient présentées la semaine dernière à ParisWeb.

Sans aller jusqu’aux démos bluffantes utilisant l’accéléromètre du MacBook (je vous recommande vivement d’installer Minefield pour le tester) de nombreuses améliorations arrivent.

S’il en est une qui va intéresser nombre de designers, c’est la possibilité d’utiliser n’importe quelle police d’écriture sur un site web.

En gros, jusqu’à présent, une police utilisée sur un site internet devait obligatoirement exister sur l’ordinateur de l’internaute qui le visitait, afin que la police puisse s’afficher correctement.

Nous avions donc 4 alternatives possibles:

• Utiliser les Web Safe Font, à savoir l’une des polices disponibles sur les principaux systèmes d’exploitation (Arial, Georgia, Times New Roman, Verdana, quelques polices complémentaires comme Tahoma ou Trebuchet étant mal implémentées); ça fonctionnait très bien mais c’était parfois moche, en tout cas un peu limité.
• Remplacer les polices par des images (qu’il s’agisse de PNG, GIF ou animation Flash); c’était certainement la pire des solutions (mise en place, mise à jour des contenus, inutilisable par les mal-voyants, perte du référencement, …), uniquement envisageable pour quelques petits éléments graphiques.
• Opter pour un outil comme sIFR ou FLIR, le premier utilisant Flash et le second PHP pour la substitution des polices, ces deux solutions dégradant toutefois le temps de traitement d’une page, et restant là aussi envisageable uniquement pour quelques petits éléments graphiques.

CSS3 @font-face à la rescousse!

L’inclusion de police n’est pas nouvelle, puisque à priori il s’agissait d’une recommandation CSS2 de 1998, qui fait son retour dans CSS3 en devenant un standard.

Ce qui est nouveau est son implémentation et support dans les principaux navigateurs:

• Internet Explorer: depuis IE5
• Firefox: depuis FF3.5
• Safari: depuis Safari 3.2
• Opera: depuis Opera 10

Seul Google Chrome, pourtant basé sur la même version du Webkit que Safari 3.1, ne reconnaît pas @font-face. Il est cependant possible de pallier à cela, en indiquant à Chrome qu’il doit accepter cette directive au démarrage. Il suffit d’ajouter le paramètre « –enable-remote-fonts » lors du lancement du programme.

Pour OS X, ouvrir le Terminal et exécuter:

/Applications/Chromium.app/Contents/MacOS/Chromium --enable-remote-fonts

La mise en place est relativement simple:

• Choisir une police TTF libre de droit et librement diffusable, par exemple sur Search Free Fonts ou DaFont.com (attention aux polices sous copyright).
• Convertir cette police au format EOT (Embedded OpenType), c’est indispensable pour Windows. Un outil en ligne le fait très simplement.
• Installer la font sur votre site web.
• Déclarer la font dans votre CSS. Notez au passage qu’il faut d’abord faire la déclaration pour IE, et ensuite pour les autres navigateurs. Cela ressemblera à quelque chose comme:

<style type="text/css">
 @font-face {
 font-family: MyCustomFont;
 src: url("MonkeyLove.eot") /* EOT file for IE */
 }
 @font-face {
 font-family: MyCustomFont;
 src: url("MonkeyLove.ttf") /* TTF file for CSS3 browsers */
 }
 </style>

• Apliquer la nouvelle font où vous le désirez, par exemple:

<style type="text/css">
body {
 font-family: MyCustomFont, Verdana, Arial, sans-serif;
 font-size: 50px;
 color: black
}
</style>

Tester en ligne

Edit du 25.10.09: Un excellent article du 22 octobre publié dans Smashing Magazine décrit toutes les possibilités d’utilisation de typographie enrichie sur le web.