Besoin de quelqu’un sous IE9 pour test webfont

Bonsoir,

Comme le titre l’indique, j’ai juste besoin que quelqu’un qui a un IE9, et qui veut bien tester si les webfonts fonctionnent ou pas avec ce navigateur sur mon forum :

http://bulleforum.net

Si la très aimable personne le veut bien, il faudrait voir une pages d’indexe et une page de sujet, car une des deux polices, Lilly (*), n’est utilisée que dans les corps des messages des sujets (un bon substitut à Comic Sans cette police ).

C’est OK avec FireFox et Opera, et au passage j’ai remarqué que l’italique rend mieux avec FireFox qu’avec Opera, pourtant sous la même plateforme (étrange). Sous Chrome, une seule des deux polices est chargée (Lilly, mais pas Comfortaa). Sous IE8, la plus récente version d’IE à laquelle je puisse avoir accès sous Windows XP, c’est KO, mais je m’y attendais.

Merci d’avance.

(*) D’ailleurs, il faudra que je vérifie si je peux effectivement l’utiliser comme webfont, la licence dit qu’elle est utilisable quelque soit l’usage, mais qu’elle n’est pas re-distribuable, et je ne sais pas si l’usage comme webfont, est considéré comme une distribution de la police ou pas.

P.S. Je poste dans la section Débutants, parce que dans le Café, ça aurait fait trop flemmard qui n’a même essayé de chercher le bon endroit, et un si petit test ne justifiait pas un poste dans Critiques.

Salut, ça me semble fonctionner sous ie9.

Lily pour sûr, l'autre elle est quand même standard alors je ne pourrais pas te le jurer, mais ça me semble bon.

OK sous IE9 et IE10 (version finale).
Modifié par jb_gfx (18 Sep 2012 - 04:03)

Waw, vous avez fait vite,

Ça vous semble OK à tous les deux alors, ça me rassure. Je chercherai quand-même des substitutions (puis il faut que je fasse le ménage dans ce CSS de toutes façons)

Vaxilart a écrit :
Lily pour sûr, l'autre elle est quand même standard alors je ne pourrais pas te le jurer, mais ça me semble bon.

Tu les connaissais déjà ? Moi qui pensais avoir trouvé quelque chose d’original, ... Je ne savais pas que Comfortaa est standard.

Si tu doute pour Comfortaa, je vais voir si je peux trouver un mail et poser la question.

Merci bien bien à vous deux
Modifié par hibou57 (18 Sep 2012 - 04:17)

Ça y est, ça marche pour IE8 maintenant. J’avais oublié, pourtant je l’avais sut, maintenant je me souviens : IE8 ne supporte que le format EOT, et avec une petite astuce, qui est de spécifier deux fois la propriété “src”. Une propriété “src” pour Internet Explorer 8, qui ignore la seconde (un hack qui profite d’un bug, classique, mais propre ce hack-là), et une seconde propriété “src”, pour les autres navigateurs.

Pour convertir au format EOT, j’ai utilisé l’application en ligne @font-fac kit generator (fontsquirrel.com). En fait je suis tombé dessus en cherchant un moyen de compresser les deux fichiers de polices. Le format EOT à lui tout-seul, aboutit à une taille qui est proche d’une compression GZIP de la police TTF originale.

Je n’utilise que les deux formats EOT et TTF, parce que ce sont les deux qui ensemble, me semble présenter la plus large couverture [1]. De plus, je place EOT avant TTF, car le format EOT est plus petit que TTF, et même que WOFF, ce qui me surprend, parce que le format WOFF est présenté comme étant l’avenir des WebFonts.

@font-face {
   font-family: 'Lilly';
   font-style: normal;
   font-weight: normal;
   src:
      url('/fonts/lilly-webfont.eot');
   src: 
      local('Lilly'),
      url('/fonts/lilly-webfont.eot') format('embedded-opentype'),
      url('/fonts/lilly-webfont.ttf') format('truetype');
}

Commentaires :

* Dans la seconde propriété “src”, j’ajoute le format au moins pour Opera, qui sinon se plain que le format de la police n’est pas valide. Opera ne semble pas pouvoir se contenter de l’extension du nom de fichier pour déterminer le format. Il ne s’en plain pas explicitement, ça apparait les logs d’erreur de DragonFly seulement.
* Dans la seconde propriété “src”, le format EOT est placé avant le format TTF, pour la raison donnée plus haut (raison de taille).
* Dans la seconde propriété “src”, j’ajoute une correspondance locale avec “local”, pour économiser un chargement de police pour les gens chez qui elle est installée. Ceci ne fonctionne pas avec IE8, je l’ai constaté, donc je ne le fais pas dans la première propriété “src”.
* Je n’ai pas testé si IE8 supporte la spécification d’un format, mais ça ne servirait à rien, s’il ne reconnait que EOT. Autant laissé comme ça, c’est plus sûr.
* Prudence avec la spécification du format pour une police dont le fichier a l’extension TTF, parce que cette extension est utilisée aussi bien pour le format “truetype” que le format “opentype” (qui lui même est différent de “embedded-opentype”).

Une remarque à propos du @font-fac kit generator (fontsquirrel.com) : pensez à utiliser le mode expert si vous ne voulez pas qu’il vous filtre les jeux de glyphes pour certaines langues. Si vous constatez qu’il vous manque des glyphes après la conversion, genre glyphes pour les mathématiques ou pour une langue quelconque, alors c’est sûrement ça.


[1]:

* Support general de font-face
* EOT, pour IE
* WOFF, non supporté par Androïd
* TTF, bien supporté
Modifié par hibou57 (19 Sep 2012 - 21:08)

Une sorte de tuto a lui tout seul ton poste, merci des infos car ça va m'aider pour mon projet

Voici la seule syntaxe qui fonctionne partout : Bulletproof @font-face syntax.

C'est celle que j'utilise sur mon blog, avec une particularité : la fonte woff en data-uri car à l'époque Firefox s'échinait à la télécharger 2 fois.
Modifié par Patidou (20 Sep 2012 - 11:57)