IE9 sur WP7 et @font-face : je t’aime, moi non plus.

Cependant, je dois également avouer que certaines choses me surprendront toujours : c’est le cas du support de @font-face sur Windows Phone 7. 

Un jour, j’ai fait un test

Raphaël Goetter a annoncé aujourd’hui la refonte de son site principal, goetter.fr, sur son blog. Étant donné que nous avions discuté quelques jours auparavant de ligatures sur Twitter, j’ai lâché un commentaire au sujet de cette nouveauté sur le site de M. Goetter. Cependant sa réponse m’a légèrement surpris, puisque je ne m’attendais pas à ce qu’il doive se séparer de cet ornement sur mobile – pour d’excellentes raisons au demeurant.

Pris de curiosité, j’ai alors décidé d’y jeter un œil sur mon smartphone : un Lumia 800 tournant sur Windows Phone 7.10, et Internet Explorer 9. Outre l’absence de la typographie «Calendas Plus», j’ai constaté que la typographie générée sur Icomoon pour gérer les icônes était également absente.

Je remonte ce problème ni une ni deux à l’auteur, qui est dans l’impossibilité de tester lui-même. Je décide donc de le faire, en commençant par regarder mon propre site – je ne disposais pas encore de ce téléphone lorsque cette version est apparue : sans appel, mon logo basé sur @font-face n’apparaît pas non plus.

Un doute m’habite

Dès lors je sens poindre l’éventualité de l’absence de support de @font-face… Je fais donc le tour de plusieurs sites réalisés au sein de l’agence 1-ter-net et utilisant @font-face. La encore, aucun doute possible : @font-face ne fonctionne sur aucun d’entre eux.

Au cas ou, j’emprunte le smartphone d’une collègue, lui aussi sur Windows Phone 7. C’est le drame.

Google m’a répondu !

Je vous laisse le soin de parcourir les résultats les plus intéressants :

• Font-Face isn’t working on IE9 inside of Windows Phone 7
• Supported fonts on IE for Windows Phone 7
• The differences between IE9 for desktop and IE9 on WP7

Sans équivoque : IE9 sur WP7 supporte @font-face mais ne chargera pas de fichiers typographiques externes. Ça explique également le faux-positif de Modernizr concernant la détection de cette fonctionnalité.

Vous voilà prévenus : définir un fallback est un minimum pour se prémunir contre ce problème; cependant le cas des icon-fonts est plus ennuyeux puisqu’on s’appuie souvent sur des caractères unicodes indisponibles dans la plupart des typographies, et un remplacement d’images conditionnel semble compliqué…

Si quelqu’un connait un moyen de cibler uniquement IE9 sur Windows Phone 7, je suis preneur ! De plus, je n’ai aucun moyen de tester IE sur Windows Phone 8 pour le moment, je ne saurais donc préciser si ce problème existe toujours dans les versions les plus récentes.

Edit : La nuit portant conseil, l’astuce dans le cas d’une icon-font semble finalement «simple». Il s’agira de les baser sur des caractères unicodes ayant un intérêt ( par exemple, ☎ ). Cependant, cette astuce n’est possible que lorsqu’on a le choix des glyphes utilisés comme support – ce qui, je crois, est le cas dans IcoMoon – et de disposer d’un caractère unicode signifiant.