The Ultimate Guide to Web Fonts

Historiquement, choisir la bonne police pour votre courriel n’a jamais été trop difficile, compte tenu du nombre limité de polices sûres pour le Web parmi lesquelles choisir. Mais les choses ont changé. De plus en plus de concepteurs d’emails repoussent les limites et adoptent les mêmes techniques de développement que les concepteurs web utilisent depuis des années – en mettant en œuvre des polices web dans leurs emails.

Les polices web permettent aux concepteurs web d’être plus créatifs avec leur typographie, en leur permettant de choisir des polices non standard dans leurs conceptions.

Comme c’est généralement le cas lorsqu’il s’agit d’innover dans la conception et le développement d’emails, les membres avant-gardistes de la communauté ont été parmi les premiers à apporter ces techniques à nos boîtes de réception (et à notre attention). Nous devons un grand merci au fantastique guide de Campaign Monitor sur les polices Web, à  » A Type of Email  » de Paul Airy et à Style Campaign pour leur inspiration.

Dans le Guide ultime des polices Web, nous allons creuser dans les détails de ce que sont les polices Web et comment les concepteurs d’emails peuvent les mettre en œuvre dans leurs emails.

Qu’est-ce qu’une police web ?

Il existe deux types de polices différentes disponibles pour les concepteurs d’emails pour leurs emails – les polices web safe et les polices web. Voici la différence entre les deux :

• Polices sûres pour le Web
  Pensez à Arial, Times New Roman, Verdana ou Georgia comme des exemples parfaits de polices sûres pour le Web. Ce sont les polices par défaut que l’on trouve sur la majorité des différents systèmes d’exploitation et appareils.

• Polices web
  Les polices web ne se trouvent pas parmi les polices par défaut disponibles sur les différents appareils et systèmes d’exploitation, et sont spécifiquement conçues et autorisées pour être utilisées sur des sites web. Quelques polices web que vous connaissez peut-être sont Open Sans et Roboto.

Pourquoi des polices web ?

En tant que marketeur et designer, vous connaissez la pression pour rester sur la marque dans les emails, avec les couleurs, le design et-oui la typographie. Le verrouillage de la copie importante dans les images a été une pratique standard dans la conception de la conception comme un moyen de rester sur la marque et d’être créatif. Mais « cacher » le texte dans les images limite l’accessibilité de l’email car les lecteurs d’écran ne peuvent pas lire le texte sur l’image.

Les polices Web ouvrent de nouvelles voies de créativité dans la typographie, permettant aux concepteurs d’emails d’être créatifs et accessibles – et de coller à l’apparence de leur marque.

Courrier électronique et polices Web

Bien que les polices Web ne bénéficient pas d’un support universel, voici les clients de messagerie où elles sont prises en charge :

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook pour Mac
• Outlook App

La liste des clients de messagerie pris en charge peut sembler courte, mais prenez courage – la plupart d’entre eux figurent parmi les 10 clients de messagerie les plus populaires. Il y a de quoi être enthousiaste !

*Conseil de pro : en avril 2018, Gmail a publié une interface mise à jour pour son client de messagerie web. Cette nouvelle interface utilise deux polices web populaires : Google Sans et Roboto. Qu’est-ce que cela signifie ? Bien que Gmail ne prenne pas en charge les polices web, si vous utilisez l’une ou l’autre de ces polices web dans vos e-mails, elles seront effectivement rendues dans Gmail. Il suffit d’ajouter les polices à votre attribut CSS font-family si vous souhaitez les utiliser dans votre courriel.

Découvrez votre top 10 Lorsqu’il s’agit de marketing par courriel, tout dépend de votre public. Utilisez Litmus Email Analytics pour découvrir quels clients de messagerie sont les plus populaires auprès de vos abonnés. Inscrivez-vous gratuitement ! Découvrez votre public →

Comment intégrer des polices web dans un email

Il existe trois approches principales que vous pouvez adopter lorsque vous utilisez des polices web dans vos emails.

@import

L’utilisation de @import est l’une des approches les plus simples pour importer des polices web dans un email. Placez la ligne de code suivante dans le <head> de votre courriel, généralement en haut de votre <style>.

@import url('https://fonts.googleapis.com/css?family=Montserrat');

Dans cet exemple, le nom de la font-family importée est « Montserrat. »

Votre service de polices web vous donnera l’URL dont vous avez besoin. Si vous hébergez la police vous-même, vous devrez faire pointer l’URL vers l’endroit où se trouve votre fichier de police web.

Cette méthode est bien supportée par la plupart des clients de messagerie ci-dessus, et ne manque de support que dans Android 2.3 (Android Gingerbread) – une ancienne version d’Android qui a une part de marché de plus en plus petite.

<link>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

Comme la méthode @import, votre service de police web définira la valeur href. Si vous hébergez vous-même le fichier de police, modifiez cette URL pour qu’elle pointe vers l’endroit où se trouve la police Web sur votre serveur. Et vous voudrez placer cette ligne de code dans le <head> de votre courriel, près du haut.

La méthode <link> est légèrement plus performante que la méthode @import, avec un support de tous les clients de messagerie ci-dessus (hourra !).

Alors pourquoi choisir une méthode plutôt qu’une autre ? La méthode @import reporte le chargement de la police web qui est importée jusqu’à ce que le HTML dans lequel elle est intégrée soit entièrement chargé. Cela peut conduire à ce que votre police Web prenne un peu plus de temps pour apparaître dans votre courriel, pendant que le reste du courriel est chargé. À l’inverse, la méthode <link> charge la ressource en ligne au fur et à mesure que le code du fichier HTML est lu (de haut en bas), ce qui peut retarder le chargement de votre courriel si votre fichier de police web est particulièrement volumineux.

@font-face

Les services de police web en ligne proposent généralement cinq formats de fichiers parmi lesquels choisir : .eot, .woff, .woff2, .svg et .ttf. Le format .woff bénéficie du meilleur support lorsqu’il s’agit de courrier électronique, nous vous suggérons donc d’utiliser ce format lorsque vous le pouvez. La méthode @font-face est la seule méthode qui vous permet de choisir spécifiquement le format de fichier que vous souhaitez importer, ce qui en fait la méthode la plus inattaquable pour la mise en œuvre des polices web.

Voici une déclaration @font-face typique pour importer une police web dans une messagerie en utilisant Google Fonts comme service de polices web choisi :

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}

Malheureusement, si vous utilisez Google Fonts, il n’est pas facile de trouver l’URL d’une police web – il y a quelques cerceaux que vous devez franchir.

1. Recherchez la police web que vous souhaitez utiliser.
Une fois que vous l’avez trouvée et sélectionnée, une petite barre noire apparaît en bas de l’écran. Lorsque vous cliquez dessus, vous verrez un écran comme celui-ci :

2. Copiez l’URL de la police web (surlignée ci-dessus), et collez-la dans la barre d’adresse de Safari ou d’Internet Explorer.
Nous utilisons Safari ou Internet Explorer dans cette méthode car Google Fonts utilise la détection du navigateur pour décider quel type de fichier de police est servi. Pour cette méthode, nous voulons utiliser le type de fichier .woff. Avec Google Chrome, c’est le type de fichier de police .woff2 qui est proposé dans le navigateur, dont la prise en charge est limitée. Merci à Elliot Ross pour cet aperçu supplémentaire !

Une fois la page chargée, vous verrez une déclaration CSS sur la page :

3. Copiez cette CSS et collez-la dans la section <style> de votre courriel.
Bien que cette méthode soit considérée comme la plus inattaquable, des modifications pourraient être apportées par le fournisseur de service de police Web à l’URL d’accès direct utilisé pour importer la police Web. Si vous choisissez d’utiliser cette méthode, testez régulièrement votre courriel pour vous assurer que vos polices Web continuent de s’afficher au fil du temps.

À Litmus, la méthode @font-face est notre implémentation de référence pour importer des polices Web dans nos courriels.

Tout le mérite de cette méthode d’importation de polices Web revient au défenseur de l’accessibilité des courriels Paul Airy, comme détaillé dans un ancien bulletin Type : E (auquel vous devriez absolument vous abonner, si vous ne l’êtes pas déjà).

Utilisation des polices web dans le courrier électronique

Une fois que votre police web est importée, l’utiliser dans le courrier électronique est aussi simple que d’utiliser une police sûre pour le web, en utilisant le nom de la famille de polices défini dans la méthode d’importation :

font-family: 'Montserrat', sans-serif;

Choisir une police de repli

Lorsque vous utilisez des polices web, il est nécessaire d’avoir une police de repli sûre pour le web en place pour les clients de messagerie qui ne prennent pas en charge les polices web.

Polices web safe par défaut

Chaque client de messagerie a une police par défaut si la police répertoriée dans la pile des familles de polices est indisponible. Par exemple, Gmail utilise Arial, Apple Mail utilise Helvetica, et Outlook utilise Calibri.

Si vous n’aimez pas le son de l’une de ces polices par défaut, nous avons une bonne nouvelle : vous pouvez choisir votre police de repli dans la pile des familles de polices.

font-family: 'Montserrat', Verdana, sans-serif;

Pensez-y comme une liste hiérarchisée de polices préférées. Si un client ne peut pas se conformer à votre choix numéro un, il se rabattra sur la suivante de votre liste.

Par exemple, en utilisant la pile de polices de caractères ci-dessus, Gmail ignorera la première police de la liste car il s’agit d’une police web qui n’est pas prise en charge par Gmail, et la police rendue dans le courriel sera Verdana. Si Verdana n’est pas prise en charge sur le périphérique utilisé (ce qui serait très rare, car Verdana est une police sûre pour le web), le périphérique utiliserait la police sans-serif par défaut pour son système, car il s’agit de la troisième police de la liste.

Comment choisir la bonne police de repli

Choisir la bonne police de repli qui conserve le design de votre courriel est essentiel pour servir une excellente expérience à tous vos abonnés, quel que soit le client de messagerie qu’ils utilisent.

Les polices de repli doivent être du même type que la police web – utilisez une police de repli sans empattement si votre police web est une police sans empattement, et une police de repli à empattement si votre police web est également une police à empattement. En utilisant le même style de police, vous pourrez conserver le design de votre message dans différents clients de messagerie. Vous pouvez aller un peu plus loin en analysant la hauteur x des polices.

La hauteur x est la hauteur verticale de la police. Idéalement, vous devriez choisir une police de repli qui a une hauteur x similaire pour éviter que votre conception d’email ne s’effondre lorsque la police de repli est utilisée.

Voici un exemple des différences subtiles de hauteur x entre les polices Verdana, Arial et la police web Proxima Nova. Ces différences subtiles peuvent faire toute la différence pour faire ou défaire votre conception d’email lorsque les polices web ne sont pas rendues.

CSS Font Stack dispose d’une liste complète – y compris la couverture des systèmes d’exploitation – de polices sûres pour le web qui peuvent être utilisées comme polices de repli.

Éviter le faux gras / faux italique

Si vous avez des versions grasses et italiques d’accompagnement de vos fichiers de polices web, alors utilisons-les ! Les concepteurs de caractères ont mis beaucoup de réflexion et d’efforts pour obtenir tous les différents styles d’une police juste comme il faut, donc c’est la meilleure pratique d’appliquer la conception de type original plutôt que de permettre au client de messagerie ou au navigateur d’appliquer au hasard un faux gras ou un faux italique à la police régulière.

Basiquement, ne faites PAS ceci :

@font-face {font-family: 'Montserrat';src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

Comme pour la conception web, vous pouvez tirer les polices authentiques en incluant ces styles dans votre pile @font-face, comme ceci :

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: normal;src: local('Montserrat-Italic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUQjIg1_i6t8kCHKm459WxRyS7m0dR9pA.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: normal;font-weight: bold;src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_vx3rCs.woff2) format('woff2');}@font-face {font-family: 'Montserrat';font-style: italic;font-weight: bold;src: local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}

Comme vous pouvez le voir, les différents styles tirent différentes polices indépendamment de la famille de police. De cette façon, si vous donnez un style à votre police dans le HTML comme ceci:

style="font-family: 'Montserrat', Verdana, sans-serif; font-weight: bold; font-style: italic;"

…alors il tirera la véritable police ‘Montserrat-BoldItalic’ ! De même, il suffit d’ajouter font-weight : bold ; pour tirer la police ‘Montserrat-Bold’ et il suffit d’ajouter font-style : italic ; pour tirer la police ‘Montserrat-Italic’.

Alors, vous vous demandez peut-être pourquoi procéder de cette façon au lieu de déclarer une font-family différente pour chaque style, ce qui tire également les polices authentiques ? Voici à quoi cela ressemble :

Ne faites PAS cela non plus !

@font-face {font-family: 'Montserrat Bold Italic';src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUPjIg1_i6t8kCHKm459WxZcgvz_PZwjimrqw.woff2) format('woff2');}style="font-family: 'Montserrat Bold Italic', Verdana, sans-serif;"

Cela présente un problème. L’utilisation des noms de famille de police pour stocker les styles ne crée pas seulement des CSS trop compliqués et redondants, mais elle prive également votre texte de style si vos fallbacks se déclenchent. Ainsi, par exemple, si vous visualisez le code ci-dessus dans Gmail (qui ne prend pas en charge les polices Web personnalisées), vous ne verrez que de la Verdana sans caractères gras ni majuscules au lieu de la Montserrat Bold Italic. En gardant votre font-family et vos font-weights/font-styles séparés, vos polices de repli conserveront toujours le style correct.

Outlook, qu’est-ce que tu me fais !

Avec Times New Roman comme police de repli par défaut, Outlook a traditionnellement été un défi pour les spécialistes du marketing par courriel ayant un cœur pour la typographie. Alors qu’Outlook 2019 – c’est-à-dire la version la plus récente du client de messagerie de bureau de Microsoft – honore les polices de repli spécifiées dans le code, les anciennes versions d’Outlook constituent toujours un défi.

Si vous utilisez la méthode d’importation @font-face, Outlook 2007/10/13/16 utilisera par défaut Times New Roman, quelle que soit la police de repli que vous avez mise en place. La bonne nouvelle est qu’il existe un hack bien testé qui résout ce problème.

Le CSS suivant cible Outlook, comme indiqué par <!-> et <!->, et indique à Outlook d’utiliser une pile de polices différente.

<!--><style type="text/css">.fallback-font {font-family: Arial, sans-serif;}</style><!-->

Utilisez la classe « fallback-font » dans votre courriel partout où vous définissez votre font-family :

<td class="fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">Your text here</td>

Et vos polices dans Outlook 2007/10/13 se replieront gracieusement sur Arial, plutôt que sur Times New Roman.

Une autre solution pour ce bogue est d’envelopper le code d’importation @font-face dans une requête média, le cachant à Outlook:

@media screen { @font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');}}

Outlook va maintenant simplement ignorer « Montserrat » dans votre pile de font-family et lire la police suivante.

Il y a aussi la méthode de cibler la propriété spécifique à Microsoft Office, mso-font-alt, avec votre system-font choisi à votre bloc de déclaration @font-face.

@font-face {font-family: 'Montserrat';font-style: normal;font-weight: normal;src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');mso-font-alt: 'Arial';}

Cela indiquera à Outlook pour MS Office d’utiliser par défaut la police de repli qui vous a été attribuée.

Où trouver des polices web

Google Fonts

Il existe des tas de services de polices web, mais Google Fonts est notre préféré. Le service est totalement gratuit, et vous pouvez télécharger les polices web sur votre ordinateur si vous maquettez des conceptions dans Adobe Photoshop, Sketch ou un autre logiciel de conception.

Typekit par Adobe

Le populaire service d’abonnement aux polices d’Adobe a été peu utile aux concepteurs de courriels dans le passé, car Typekit s’appuyait sur JavaScript pour intégrer les polices. Depuis août 2017, Typekit a permis l’utilisation de polices Web en utilisant uniquement CSS – aucun JavaScript n’est nécessaire – et cela ouvre les polices Web trouvées dans Typekit pour une utilisation dans les courriels. Vous trouverez des instructions détaillées sur la façon d’ajouter les polices web de Typekit à vos courriels en utilisant @import dans la documentation d’aide de Typekit.

Plus de services de polices Web

Si vous cherchez encore plus de sites Web qui offrent des polices Web sous licence pour une utilisation dans les courriels (la plupart du temps sur une base payante), consultez certains des services ci-dessous :

• MyFonts
• Commercial Type
• Font Spring
• Font Shop
• You Work for Them
• Village

.

• Process Type Foundry

Licensing web fonts in email

Les polices web ont été conçues à l’origine pour être utilisées uniquement sur des sites web, leur licence est donc généralement destinée à être utilisée uniquement sur des sites Web et des applications mobiles. La raison pour laquelle de nombreux services de polices web ne permettent pas l’utilisation dans les courriels est que cela est considéré comme la distribution de la police, ce qui va à l’encontre de l’accord de licence de l’utilisateur final (EULA) de nombreux services.

Les fournisseurs de polices web dans la liste ci-dessus comprennent des licences d’utilisation de polices web dans les courriels. Cependant, de nombreuses licences sont facturées sur le nombre d’ouvertures mensuelles, ce qui doit être pris en compte lors de l’utilisation d’un service de police web payant.

Puis-je utiliser des polices web ?

Il n’y a absolument aucun mal à utiliser les polices web comme une amélioration progressive dans vos emails dès maintenant. Implémentez correctement vos polices de repli et poussez vos emails dans le futur !

Il vaut la peine de jeter un coup d’œil à votre base d’abonnés pour voir combien d’entre eux consultent vos emails dans un client de messagerie qui supporte les polices web. Si la majorité ne le sont pas, cela ne vaudrait tout simplement pas la peine de consacrer votre temps et vos efforts, surtout si vous envisagez d’utiliser une police web payante.

Les polices web bien faites

Pour vous donner un peu d’inspiration dans ce qui est possible, voici quelques-uns de nos courriels préférés mettant en vedette des polices web.

Ne pas oublier de tester

Comme l’utilisation des polices web dans les emails est encore considérée comme légèrement expérimentale, nous vous recommandons de tester souvent, surtout si vous avez déployé des polices web dans des modèles qui peuvent ne pas être mis à jour régulièrement. Les changements et les mises à jour des capacités de rendu des clients de messagerie ne sont généralement pas annoncés à l’avance et peuvent se produire sporadiquement, il est donc préférable de tester régulièrement.

Il convient de noter que si vous avez installé la police web sur votre propre ordinateur, vous serez en mesure de la voir lors du test en direct dans un client de messagerie sur votre ordinateur – quelque chose à garder à l’esprit au cas où il semblerait soudainement que Gmail prenne désormais en charge les polices web.

Tester la typographie dans vos campagnes

Inspiré pour faire passer votre jeu de caractères au niveau supérieur ? Veillez simplement à tester vos campagnes avant de les envoyer. Essayez gratuitement Litmus et assurez-vous que votre typographie a l’air incroyable dans plus de 90 clients de messagerie, y compris les ordinateurs de bureau, les webmails et les appareils mobiles.

En savoir plus →