Par
Autrice spécialisée dans l'emailing et les solutions emailing.

Peut-on utiliser @font-Face en emailing ?

font face email marketing

Qu’est-ce que @font-face ?

@font-face est une règle CSS3 permettant d’intégrer une police non standard dans un document web même si celle-ci n’est pas installée sur le poste client.

Généralement, il est impératif d’utiliser une police standard dites «websafe», c’est-à-dire celles installées par défaut sur l’ensemble de nos systèmes telles que Times ou Arial. Elles sont utilisées communément en emailing pour garantir un rendu identique sur les différents clients de messagerie.

Le websafe c’est bien, mais pas très original…!

Pour se différencier ou tout simplement pour utiliser la police de votre charte graphique, pourquoi ne pas sauter le pas ?

font email

Comment ca marche ?

Il existe plusieurs méthodes, la plus simple et la plus rapide est peut-être d’utiliser Google fonts.

Etape 1 : Choisissez votre police dans leur bibliothèque et cliquez sur «quick use»

Etape 2 : Récupérez la balise méta, par exemple ci-dessous, et copiez-la dans l’entête HTML de votre emailing.

Etape 3 : Il ne vous reste plus qu’à préciser la police que vous souhaitez utiliser pour habiller le texte. Par exemple :

Astuce : la fonte Arial est ici déclarée en 2e position. Elle sera utilisée en police de substitution pour les clients de messageries qui ne prennent pas en charge cette fonctionnalité.

Résultat des tests

Prise en charge de @font-face sur Outlook 2003, Outlook Express, Thunderbird, Apple Mail (Desktop et Mobile) et le client Email natif Android.

Pour aller plus loin et pour les plus experts

Pour ajouter les webmails Zimbra, Orange et SFR au rang des messageries compatibles, il faudra user de subterfuges. Il est possible «d’embarquer» la police en base64 et de l’intégrer dans le css sous la forme :

Des outils avancés comme le Webfont Generator de chez www.fontsquirrel.com permettent de faire cette opération automatiquement. Attention toutefois à votre délivrabilité, car avec cette dernière technique le code devient beaucoup plus «lourd».

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *