internet explorer erreur 404 font faceHello 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.
Partager sur:
A propos de l'auteur:
Guillaume Jeantet: titulaire d'une licence pro et fort de quelques années d'expériences je suis administrateur système et développeur mais surtout un autodidacte dynamique et passionné. Je partage sur UBDT mes coups de coeurs et astuces.

Autres articles qui pourraient vous intéresser.

facebook vignetteFacebook: forcer le rafraîchissement d'une vignette
Lorsqu'on désire partager une page sur facebook il arrive parfois que la prévisualisation de celle-ci soit vide. Voici une petite astuce permettant de pallier ce problème.
taille image responsive designResponsive design: la taille des images
Faire du responsive design oui, mais dans la simplicité. Découvrez une astuce en css simple pour gérer la taille des images en responsive design.
optimiser mise cache mutuOptimiser la mise en cache sur les mutu ovh et autres hébergeurs
Optimisez le chargement de vos pages web en utilisant le mécanisme de cache sur les serveurs ovh et d'autres hébergeurs. Voyons comment faire avec mod_expires.
taxe publicite ligne 1 pourcentPublicité en ligne: taxe de 1%
Dans le cadre du projet de loi de finances 2011 un sénateur UMP a soutenue un amendement visant à taxer les dépenses publicitaires en ligne des professionnels à hauteur de 1%.
rss blog trop modificationModification de l'adresse du flux RSS d'un blog de trop.
L'adresse du flux rss d'un blog de trop change, pensez à mettre votre lecteur à jour avec l'adresse http://www.unblogdetrop.com/rss.xml
#1 Le par Rwk
C'est ce que tu dois faire mon grand, une feuille de style conditionnelle. C'est comme ça que nous gérons ça, j'avais déjà eu le soucis.

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');
}
#2 Le par Guillaume
1 - Oui oui, déjà trouvé pour convertir en EOT.
2 - "C'est ce que tu dois faire mon grand" pour UBDT ce que l'on va faire c'est que les utilisateur d'ie iront se faire foutre. Pas envi de me faire chier pour un navigateur à la con. Pour d'autres projets plus gros si le cas se représente on verra en attendant je ne pense pas réutiliser l'insertion de polices tant que tous les navigateurs dominants ne supporteront pas le même formats (woff). Cela devrait arriver vers avril avec la sortie d'ie9 ...

3 - "Tu peux aussi et surtout simplifier" -> Pour la syntaxe j'ai simplement suivi les recommandations de hacks.mozilla.org différencier les 2 me plait bien

Proposer un nouveau commentaire

Votre pseudo s'il vous plaît :

Email (Facultatif, n'est pas affiché et permet de recevoir des notifications de validation / réponses):

Votre site Web (facultatif) :

Exprimez vous :

:arrow::D:confused::cool::cry::eek::evil::!::idea:lol:mad::|:?::p:redface::rolleyes::(:):wink: