Utiliser une web font dans un email.

Email-Tricks_Webfonts-1

Utiliser une web font dans un email :

Les polices dites « systèmes » peuvent vite être une limitation en matière de design sur internet. Pour pallier à ce problème, les designers et intégrateurs utilisent depuis quelques années les « web fonts » chargées sur les sites depuis un service extérieur (Ex: google font) ou directement depuis le serveur.

Il est tout à fait possible aujourd’hui d’utiliser les « web fonts » dans vos emails et nous allons voir comment.

Il existe plusieurs méthodes pour utiliser une web font dans votre email mais je recommande d’utiliser des services comme google font qui vous proposent une feuille de style externe contenant la police. Placez alors leur code (Voir ci-dessous) dans le <head> de votre email :

Dans cet exemple je charge la police « Lato » en « regular » et « bold ».

Une fois la police placée dans votre email je vous recommande de l’utiliser de la manière suivante.

1. Déclaration dans le body :

L’objectif de cette déclaration est d’indiquer, à tous les clients de messagerie qui l’interprètent, la police qui doit être utilisée par défaut ainsi que les polices systèmes de substitution en cas de non chargement de la police.

2. Utilisation dans une balise <td> :

Le bémol avec les web fonts c’est qu’elles ne sont pas interprétées par Outlook et quelques autres clients de messageries. Il faut donc, comme précédemment, indiquer les polices de substitution que l’on souhaite utiliser dans ce cas. Mais, comble de malchance, certaines versions de Outlook n’interprètent pas les mentions des polices de substitution. Il faut donc user d’astuce pour garantir la meilleure compatibilité de votre email.


Astuce n°1 :

Dans ce code nous déclarons dans une td les polices de substitution à utiliser puis dans un <span> (mais vous pouvez le faire dans une balise <p> ou <div>) nous déclarons « normalement » la web font voulue.

Dans ce cas de figure les versions de Outlook qui n’interprètent pas les web fonts ne vont lire que la déclaration dans la <td> et utiliser naturellement la première police de substitution. Tous les autres clients de messagerie vont utiliser la déclaration dans la balise <span> et utiliser alors soit « Lato », soit les polices de substitution.

IMPORTANT : A noter que la présence de l’espace entre sans-serif et !important est obligatoire si vous souhaitez que ça fonctionne. (Sans l’espace certaines versions de Outlook affichent une police différente de celles renseignées).


Astuce n°2 : (Proposé par Michael Muscat sur Litmus).

C’est une astuce que je n’ai malheureusement pas encore eu l’occasion de tester mais qui semble fonctionner parfaitement.

Placez le code suivant dans la balise <style> dans le <head> de votre email.

Puis utilisez votre police comme suit dans vos <td> :

Dans ce cas de figure, Outlook et les clients n’interprétant pas les web fonts utiliseront la police de substitution (Arial / Helvetica) et les clients interprétant les web fonts utiliseront le code présent dans la balise <style> qui force l’utilisation de ‘Lato’ quand celle-ci est rencontrée dans le code.


Voila ! j’espère que cet article vous aura plu ! N’hésitez pas à laisser un commentaire ou poser vos questions ci dessous.