ici & ailleurs

Mais que fait la police ?

Quand Firefox 3.5 RC est sorti, je l'ai installé pour jouer avec. Constatant qu'il fonctionnait bien et que les extensions qui me sont indispensables étaient compatibles, j'ai décidé de l'utiliser à plein temps. Du coup, je m'amuse avec les nouveautés.

La vidéo me laisse complètement de marbre, surtout depuis que j'ai lu que Mozilla ne compte pas implémenter de support pour DirectShow ou Quicktime. Je comprends assez bien les problèmes de sécurité que ça pose mais trouve ça dommage dans la mesure où ça laisse un boulevard à la vidéo en Flash. Qui s'amusera à encoder en H.264 et en Theora pour diffuser des films avec la balise video ? D'autant que, une fois en H.264, une vidéo devient lisible par Flash. Bref, pour l'instant, je ne vois pas trop comment la vidéo sur le web peut passer par autre chose que Flash. J'espère que l'avenir permettra de changer un peu la donne.

Tout ceci n'est pas le sujet de ce billet. J'ai surtout joué avec la directive CSS @font-face. Celle-ci me semble bien plus promise à un bel avenir car quoiqu'on en dise, le web est encore principalement un média textuel et les mêmes formats de police de caractères sont compris sur tous les systèmes d'exploitation.

@font-face, c'est facile. Il suffit de déclarer une nouvelle police pour pouvoir l'utiliser. Par exemple :

@font-face {
font-family: Fertigo;
src: url(fonts/Fertigo-Pro.otf);
}
...
h2 {
font-family: Fertigo;
}

Ça marche bien et c'est génial. Je trouve quelques belles polices sur webfonts.info et commence à les tester en local. Me disant que j'aime bien, je passe tout en production. Et là, catastrophe, pas de polices. La seule différence entre mes tests et la production réside dans l'emplacement des médias, css et autres. Alors que ce site s'affiche sur http://neokraft.net, les feuilles de style, images, polices, viennent de http://m.neokraft.net/. C'est à ce moment que je découvre ce nouveau système appelé HTTP access control. Pour résumer, Firefox refuse de charger certaines ressources si elles ne proviennent pas du même site (principalement les requêtes Ajax mais aussi les polices). C'est une excellente chose mais c'est ennuyeux dans mon cas. La solution est assez simple : il faut, sur le serveur de médias, spécifier qui a le droit d'accéder aux polices de caractères. Donc, tout bêtement dans la configuration de l'hôte Apache ou dans un fichier .htaccess, il suffit d'ajouter :

<FilesMatch "\.(otf|ttf)$">
Header set Access-Control-Allow-Origin "http://votre-site-principal"
</FilesMatch>

Cet en-tête HTTP indique au navigateur qu'il peut charger la ressource si elle est demandée par le site principal. Bien sûr, si votre serveur n'est pas Apache, il faudra faire autrement.

Le support des polices embarquées est quelque chose que j'attends depuis bien dix ans. Donc, si vous avez Firefox 3.5, Safari 4, Opera 10 ou Chrome 2, vous verrez de bien belles polices de caractères sur ce site. C'était vraiment très intéressant.