@font-face IE 9 - 10 - 11

Bonjour,

Je m'arrache la tête avec Internet Explorer, même dans sa dernière version, pour faire fonctionner @font-face. J'ai pourtant suivi les pré-requis d'un site qui offre quelques astuces pour que cela "fonctionne".

Voilà mon code :

@font-face {
    font-family: 'OpenSansBold'; /*a name to be used later*/
    src: url('open-sans/OpenSans-Bold.eot'); /* Pour IE9 Compat mode */
	src: url('open-sans/OpenSans-Bold.eot?') format('eot'),
    	 url('open-sans/OpenSans-Bold.ttf') format('truetype'); /*URL to font*/
}

Merci de vos réponses.

Bonjour Kikimagik,

Plusieurs petites questions pour éclaircir la situation :
1 - Les fichiers .eot sont-ils bien présents dans le dossier open-sans ?
2 - Le code CSS que vous présentez a-t-il été généré automatiquement ou non ?

En l'attente...

Bonjour Guiwint,

1 - Les fichiers .eot sont bien présents dans le dossier open-sans.
2 - Le code n'a pas été généré mais écris à la main.

NB : Je possédais au départ un fichier .ttf. Je suis aller sur un site qui converti une font au format que l'on désire et nous propose de la télécharger. A partir de ce .ttf, j'ai généré le .eot, ainsi que d'autre format comme le .svg et le .woff. Est-ce bon de faire ça ? Je n'ai aucun moyen de trouver cette font sur le web dans tout les format malheureusement.

Je sais qu'un jour j'ai eu un souci avec @font-face qui utilisait une typo corrompu, et j'ai mis quelque temps avant de comprendre pourquoi je n'avais rien.

Enfin voilà pour les précisions.

Rebonjour Kikimagik,

Alors peut-être que dans ce cas vous pourriez regénérer tous les fichiers en une fois, à partir de votre fichier .ttf, sur http://www.fontsquirrel.com/tools/webfont-generator.

Vous n'aurez plus qu'a récupérer le .zip qui contiendra les différents formats de votre font, et des pages d'exemples HTML, sur lesquelles vous pourrez vous appuyer pour votre intégration.

Pour vous donnez une idée un peu plus précise, voici le type de structure qu'il peut vous fournir :

/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

@font-face {
    font-family: 'font_family_name';
    src: url('my-font.eot');
    src: url('my-font.eot?#iefix') format('embedded-opentype'),
         url('my-font.woff') format('woff'),
         url('my-font.ttf') format('truetype'),
         url('my-font.svg#font_family_name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ce site est un bon outil : jusqu'à présent, il m'a donné pleine satisfaction.

En attendant votre feedback, bon code...
Modifié par Guiwint (05 Mar 2014 - 16:35)

salut,
si c'est en local ça ne marchera pas pour IE. La font "open sans" est une fonte gratuite que tu peux trouver sur Google fonts. Google te donnera même un simple <link> à insérer dans ton code pour pouvoir l'utiliser.
J'utilise aussi "fontsquirrel", il existe aussi Yahoo smushit.
Avec Google font, pas besoin de télécharger tes fonts.

Bonjour à tous,

Je me permet de rebondir sur les infos données par Zelalsan.
En effet Google Fonts facilite grandement l'exploitation des polices de caractères sur webapp.

Pour ma part, je n'ai pas rencontré de problématique particulière en local dans IE avec les fichiers d'exemples fournis par Font Squirrel.

@font-face est compatible à partir de IE8 (voir http://caniuse.com/#feat=fontface). Au pire un crénelage est présent, et à partir de IE9 les caratères sont bien lissés.

Bonne journée et bon code...
Modifié par Guiwint (06 Mar 2014 - 10:52)