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.

Comments

Simon H. 8 years, 5 months ago

Voilà un billet bien utile, qui répond à certaines de mes propres questions.

En revanche, que se passe t il si l'utilisateur n'a pas FF/de navigateur supportant @font-face ? Il n'y a aucun titre qui s'affiche ? Une police par défaut reprend le dessus ? Y a t il moyen de contrôler quelle police ?

Mitternacht 8 years, 5 months ago

Simon > je réponds à ta question en direct depuis un Firefox 2 : c'est une police par défaut qui est utilisée, ça passe très bien. J'imagine qu'il y a moyen de déclarer quelque chose comme "font-family: Fertigo (la fonte appelée par @font-face), Verdana, sans-serif;" pour avoir des polices par défaut. Olivier, je me trompe ?

Emmanuelc 8 years, 5 months ago

Un coup d'oeil vite fait dans les CSS de http://www.webfonts.info/ et on voit clairement l'appel @font-face comme il se doit, tout en haut de fichier, puis les appels classiques de famille de police. Si la première police annoncée (correspondant par ex. au @font-face déclaré) est entendue par le navigateur, elle est affichée, si elle n'est pas prise en compte c'est la seconde, troisième etc. qui est affichée.

Erebuss 8 years, 5 months ago

Pour ton problème de protection d'URL ... si tu utilises le Platform for Privacy Preferences (http://www.w3.org/P3P/) , FF ne te permet pas d'y accéder sans avoir à modifier le htaccess ?

Ombre 8 years, 5 months ago

À noter que IE permet aussi d'utiliser @font-face... Problème : il ne reconnaît pas les OTF et TTF mais un format particulier, voir l'article ci-dessous :

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Simon H. 8 years, 5 months ago

@Mitt et Emmanuelc : merci pour l'info :-) Je sens que je vais bien m'amuser dans les prochains temps...

[SiMON] 8 years, 5 months ago

Voilà le rendu que j'ai sur Firefox 3.5 (installée avec le paquet firefox-3.5 sur une Ubuntu Jaunty) : http://img196.imageshack.us/img196/7443/capturedcran1.png

À noter que j'ai un rendu "classique" (avec des polices par défaut) pendant un court instant, avec l'apparition de ces choses. Si quelqu'un a une idée de comment solutionner tout ça...

Laurentj 8 years, 5 months ago

@simon : la version que tu as est certainement une beta de Firefox 3.5, pas la finale.

[SiMON] 8 years, 5 months ago

Voui, après avoir ajouté le dépôt mozilla daily et balancé un petit apt-get upgrade ça passe beaucoup mieux :) .

gru 8 years, 5 months ago

"mais que fait la police?"

hahahahahahaha! c'est complètement débile! (j'entends cela comme un compliment hein :) )