Et j’ai résolu un mystère d’Outlook vieux de douze ans au passage.
Ce matin, je faisais des tests dans Outlook sur les styles supportés dans les listes HTML. Et mon attention s’est vite détournée sur quelque chose qui n’a rien à voir. En utilisant le site What does it paste pour la première fois pour récupérer le code généré par Outlook et son moteur de rendu de Word, le <head> de l’e-mail contenait le code suivant :
<style> <!-- /* Font Definitions */
@font-face {
font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-536859905 -1073732485 9 0 511 0;
}
</style>@font-face ? Dans Outlook ? Qu’est-ce que cette diablerie ?
Si vous êtes habitués aux polices web dans les e-mails, vous savez surement qu’il y a un bug notable dans les Outlook (2007, 2010, 2013 and 2016) sur Windows. À chaque fois que vous importez une police web en utilisant une déclaration @font-face, Outlook l’ignore (comme on pourrait s’y attendre). Mais Outlook ignore alors aussi les polices alternatives définies dans vos styles, forçant tous les textes utilisant cette police web en Times New Roman. Prenez l’exemple suivant :
<!doctype html>
<html>
<head>
<title>mso-generic-font-family</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
</head>
<body>
<p style="font-family:Pacifico, sans-serif;">
This is a text set in the <strong>Pacifico</strong> font.
</p>
</body>
</html>Outlook va irrémédiablement afficher ce texte en Times New Roman, ignorant l’alternative sans-serif définie dans la propriété font-family.
Captures d’écrans sur Email on Acid montrant le texte en Times New Roman sur Outlook 2016.
Plein de solutions ont été trouvées au fil des années pour éviter ce bug, de l’utilisation d’!important en ligne à la déclaration de la police à l’intérieur d’une media query. Ma solution préférée a toujours été de cacher l’appel à la police web aux yeux d’Outlook en utilisant un commentaire conditionnel comme dans l’exemple suivant.
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />
<!--<![endif]-->J’ai toujours trouvé ce comportement de Outlook bizarre (même pour Outlook, c’est dire). Mais cette solution fonctionnait suffisamment bien pour que je ne cherche jamais à creuser davantage. Et qui plus est, ce bug a été corrigé dans la dernière version d’Outlook (2019). L’affaire était donc classée pour moi. En tout cas c’est ce que je croyais.
Quand j’ai vu cette déclaration @font-face ajoutée par Outlook ce matin, je savais que j’étais tombé sur quelque chose. La ligne suivante, en particulier, a retenu mon attention :
mso-generic-font-family:swiss;Je n’avais jamais entendu parlé de cette propriété. Mais le nom sonne vraiment comme quelque chose qui pourrait avoir un lien avec le comportement d’Outlook et des polices web.
J’ai donc repris mon premier exemple de test, j’ai déclaré ma police web dans une balise <style>, et j’ai ajouté cette propriété mso-generic-font-family.
<!doctype html>
<html>
<head>
<title>mso-generic-font-family</title>
<style>
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://www.caniemail.com/tests/assets/fonts/ pacifico-regular.woff2) format('woff2');
mso-generic-font-family:swiss;
}
</style>
</head>
<body>
<p style="font-family:Pacifico, sans-serif;">
This is a text set in the <strong>Pacifico</strong> font.
</p>
</body>
</html>Et voilà !
Captures d’écrans sur Email on Acid montrant le texte en Arial sur Outlook 2016.
La propriété mso-generic-font-family accepte les valeurs suivantes :
decorativemodernroman(correspondant à duserif)scriptswiss(correspondant à dusans-serif)auto(correspondant àromanpar défaut)
Ça explique tout. Outlook supporte bel et bien la déclaration @font-face (mais ne charge pas les polices distantes). Et parce qu’Outlook ne peut pas afficher pas cette police, il va chercher à se replier sur la valeur attendue de la propriété mso-generic-font-family. Et parce qu’elle n’est pas définie, on tombe sur sa valeur par défaut auto qui correspond à la famille roman, elle-même correspondant à du Times New Roman.
Affaire classée.
En creusant un peu plus à travers le code généré par Outlook et en lisant la documentation du HTML dans Outlook et Microsoft Office, je suis tombé sur une autre propriété nommée mso-font-alt. Cette propriété permet d’affiner encore un peu plus la police alternative dans Outlook en y attribuant le nom d’une autre police. En ajoutant les lignes suivantes à notre déclaration @font-face, Outlook va d’abord chercher à appliquer la police définie dans la propriété mso-font-alt (si elle est installée sur la machine) ou sinon appliquer la famille définie dans la propriété mso-generic-font-family.
mso-generic-font-family: swiss;
mso-font-alt: "Century Gothic";J’espère que vous avez apprécié cette lecture autant que j’ai aimé faire ces recherches. Je me demande quand même s’il n’y aurait pas encore autre chose à creuser avec @font-face dans Outlook. N’y aurait-il pas moyen de charger des polices distantes ? Faites moi signe si vous trouvez quelque chose à ce sujet.
Greg, le
Encore un boulot incroyable <3 Merci pour la profession !
Thomas, le
Mais du coup ça ne fonctionne que sur des polices déclarées dans la balise ? On ne peut pas appliquer ce correctif sur une Google font présente dans un ?
Thomas, le
dans la balise style je voulais dire
Lio, le
Bonjour,
Je m’arrache les cheveux aussi sur un point avec outlook desktop!
Ma signature d’emails en HTLM s’affiche correctement mais lors des réponses à un mail avec ma signature, outlook modifie le html/css et ma signature devient du grand n’importe quoi: taille et position de certainement images changent, les marges disparaissent, etc…
Je n’ai pas ce problème avec outlook webapp, ni avec gmail!
Y-a-t-il un guide du CSS compatible avec Outlook?
Je deviens fou ;)
Merci beaucoup si vous pouvez m’aider.