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 ?
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».
