Dans le cadre de l’intégration du nouveau design sur le site et le blog, je suis comment souvent confronté aux spécificités d’Internet Explorer qui ne fait jamais rien comme tout le monde.

Dans le cas présent je souhaitais importer une police spécifique pour les menus du haut et du bas.
Pas de problèmes sous Firefox et Google Chrome, j’ai récupéré la police souhaitée dans le dossier des polices de Windows (Windows/Fonts/) et je l’ai importé dans mon fichier de style via le code suivant  et le tour est joué.

@font-face {
font-family: “Segoe” ;
src: url(“../font/segoeprb.ttf”) format(‘opentype’);
}

Après plusieurs recherches sur Internet je comprends que pour Internet Explorer il sera nécessaire de convertir cette police au format “.eot” afin de pouvoir réaliser cet import.
Un logiciel windows “archaïque” est disponible pour réaliser cette manipulation : WEFT (Web Embedding Fonts Tool), mais son fonctionnement est difficile à comprendre et il a été réalisé pour Windows 98 !!
Si vous souhaitez l’utiliser rendez-vous par ici : http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

J’ai également trouvé un service web qui propose une conversion directe en ligne : http://www.fontsquirrel.com/fontface/generator , cependant celui-ci n’a pas fonctionné dans mon cas 🙁

La dernière solution est la bonne ! Un groupe google propose un utilitaire pour windows et linux qui permets de réaliser cette transformation sans aucun problème 🙂

Son fonctionnement nécessite l’utilisation de la ligne de commande mais rien de bien méchant :

  • Conversion de polices ttf en eotTélécharger l’utilitaire depuis la page http://code.google.com/p/ttf2eot/downloads/list
  • Dézipper le dans le dossier de votre choix.
  • Lancer la console Windows ( Démarrer / Exécuter / cmd )
  • Placez-vous dans le dossier dans lequel est situé le fichier ttf2oet.exe
  • Saississez la commande suivante “ttf2oet.exe c:/Windows/Fonts/Votrepolice.ttf c:\dossier\sortie\Votrepolice.eot”
  • Et voila votre fichier .eot est généré 🙂

Il ne vous reste plus qu’a l’insérer dans votre feuille de style spécifique à IE et le problème est résolu !

@font-face {
font-family: “Segoe” ;
src: url(“../font/segoe.eot”);
}