Hello world !Comme vous l'avez remarqué la nouvelle version d'un blog de trop est disponible depuis hier. Cette mise en productions de la V3 est l'occasion de tester de nouvelles techniques en CSS3. Les plus filous d'entre vous auront remarqué que j'utilise une police embarquée pour une section assez spécifique du blog. C'est la première fois que j'essaye ce système en production.
Conjointement à la mise en ligne de cette V3 je me suis lancé dans le développement d'un petit outils qui devrait me permettre d'affiner la stratégie de linking interne au blog et proposer aux visiteurs une fonctionnalité sympa. Tout aujourd'hui et pour les besoins de ce développement j'ai donc eu l'occasion de scruter mes outils de statistiques et me suis rendu compte qu'un nombre important d'erreurs 404 étaient sortie depuis hier. Il ne m'aura pas fallu longtemps pour découvrir que le problème vient de la propriété css @font-face que certains navigateurs interprètent mal.
En effet comme vous le savez certainement IE (même en v8) ne gère que les polices embarquées aux format propriétaire .eot par conséquent si on veut conserver la compatibilité entre différents navigateurs il est donc nécessaire de déclarer 2 fois la police avec @font-face. Un premier coup pour IE en .eot et un autre coup pour les autres en .ttf, .woff ou autre format standard. Cela donne un truc dans le genre:
@font-face {
font-family: mapolice;
src: url(./fonts/mapolice.eot);
}
@font-face {
font-family: mapolice;
src: url(./fonts/mapolice.ttf) format(truetype);
}
Il faut absolument pour IE que la police eot soit positionnée en premier, aussi on remarque que bien qu'IE ait réussit à charger la police eot il va quand même télécharger tous les autres fichier (ttf, woff etc.) mais non content d'essayer de les télécharger il va se crouter lamentablement dans l'interprétation de la css en essayant de récupérer le fichier "./fonts/mapolice.ttf)%20format(truetype)" ce qui bien évidemment provoque une jolie erreur 404 !!!
Attention donc si vous projetez de mettre en production @font-face sur un site à fort trafic, en particulier si la majorité des visiteurs est sous IE. Vous allez non seulement gaspiller de la bande passante car le navigateur essayera de télécharger plusieurs fichier de fonts (j'imagine que sans l'instruction "format()" le téléchargement doit fonctionner) mais si ce dernier échoue vous risquez aussi de gaspiller des ressources serveur en appelant une 404 personnalisé.
La solutions pour les plus courageux réside peut-être dans la gestion d'une feuille de style dédié à IE avec un appel conditionnel.
Il existe d'ailleurs des petits softs et des webapp' pour transformer tes polices TTF → EOT
Tu peux aussi et surtout simplifier ta font-face comme ça :
@font-face {
font-family: 'Celtic';
src: url('font/CELTG.EOT');
src: local('Celtic'),
url('font/CELTG.TTF') format('truetype');
}