Polices Web : comment les faire fonctionner parfaitement dans les e-mails

Publié: 2021-04-24

De mon étude très scientifique (j'ai observé ma fille alors qu'elle commençait à écrire des rapports au cours de la dernière année), j'ai appris que l'un des premiers aspects du design avec lequel les gens commencent à jouer est la typographie. Lorsque vous commencez à rédiger des rapports, vous passez des heures à essayer de trouver la meilleure police à utiliser. D'accord, peut-être pas des heures, mais la plupart des gens y consacrent un peu de temps. Car, comme le savent les grandes marques, la typographie compte. Et c'est important dans les e-mails.

Mais l'accessibilité compte aussi. Alors arrêtez de piéger votre message dans des images et commencez à utiliser du texte en direct avec des polices Web sécurisées et des polices Web. Après tout, un texte qui ne dépend pas des images et peut être lu par un public plus large conduit à une excellente expérience d'abonné. Et comme vos meilleurs clients (les e-mails renvoient 36 $ pour chaque 1 $ investi), c'est parfait pour votre stratégie marketing globale.

Dans cet article de blog, je vais décomposer :

Polices Web par rapport aux polices Web sécurisées
Les avantages des polices Web
Assistance client par e-mail et licence
Où trouver des polices Web
Les coder dans les e-mails
Excellents exemples de polices Web dans les e-mails

Polices Web par rapport aux polices Web sécurisées

Il existe deux manières différentes de créer du texte en direct : les polices Web sécurisées et les polices Web. Bien qu'ils sonnent de la même manière, il existe des différences nettes. Afin de comprendre ces différences, examinons le fonctionnement des polices dans vos e-mails.

Lorsque votre e-mail est codé, la police est déclarée à l'aide d'une propriété CSS appelée font-family. Cette propriété de famille de polices peut avoir un seul nom de police ou plusieurs noms de police, souvent appelés pile de polices. L'inclusion de plusieurs noms de police garantit que si une police ne fonctionne pas, il existe une police de secours ou de sauvegarde de votre choix. Sans répertorier plusieurs noms de polices, le client de messagerie décide de votre police de sauvegarde. Lorsque vos abonnés ouvrent votre e-mail, le navigateur lit la propriété font-family et extrait la police à utiliser.

Polices sécurisées pour le Web

Avec les polices sécurisées pour le Web, le navigateur extrait la police de votre répertoire de polices local. Cela signifie qu'il s'agit de polices déjà installées sur votre ordinateur. Tous les ordinateurs sont livrés avec des polices préinstallées, et celles-ci sont considérées comme sûres pour le Web. Ils sont sûrs à utiliser , car il y a vraiment avoir de bonnes chances de votre abonné déjà, aussi.

L'inconvénient est qu'il existe un nombre limité de polices Web sécurisées par rapport aux polices Web. Et ils sont utilisés assez fréquemment, vous êtes donc moins susceptible de vous démarquer (si c'est ce que vous visez).

Les polices Web sûres évidentes sont :

Arial
Helvetica
Verdana
Géorgie
Times New Roman

Mais il en existe plusieurs autres que vous pouvez utiliser avec un certain degré de confiance. Alors sortez de la boucle de polices Arial ou Helvetica standard et trouvez une police sécurisée pour le Web qui fonctionne pour votre marque.

La meilleure ressource que j'ai trouvée pour les polices sécurisées pour le Web est les polices CSS. J'aime le fait qu'ils incluent un pourcentage d'utilisation pour les PC et les Mac pour chaque police afin que vous sachiez approximativement combien de vos abonnés pourraient voir la police que vous voulez et combien verront votre solution de secours à la place.

Polices Web

Les polices Web sont extraites d'un serveur, soit celui que vous hébergez vous-même, soit un serveur externe (comme Google ou Adobe). Pour cette raison, la variété de polices pouvant être utilisées est beaucoup plus grande et elles peuvent être utilisées sur n'importe quel ordinateur… tant que le navigateur ou le client de messagerie peut extraire la police. Dans certains cas, votre abonné peut déjà avoir un site Web. police téléchargée et installée sur leur machine, ces polices fonctionneront donc même dans les clients de messagerie qui ne prennent pas en charge les polices Web !

Ainsi, bien que les polices Web vous offrent beaucoup plus de variété et de liberté de création, elles ont un coût : une prise en charge limitée des clients de messagerie (dans laquelle je me plonge plus loin).

Pourquoi des polices Web ?

Vous vous demandez peut-être pourquoi s'embêter avec les polices Web ? En tant que spécialiste du marketing et concepteur, vous connaissez la pression pour rester fidèle à la marque dans les e-mails avec les couleurs, le design et, oui, la typographie. Les polices Web vous permettent de montrer votre marque sans compter sur des images pour votre texte.

Verrouiller une copie importante dans des images a été une pratique courante dans la conception d'e-mails comme moyen de rester sur la marque et d'être créatif. Mais « masquer » le texte dans les images limite l'accessibilité de l'e-mail car les lecteurs d'écran ne peuvent pas lire le texte sur l'image.

Exemple de courrier électronique Ace Hardware de polices Web avec et sans images — E-mail avec et sans images lors de l'utilisation d'une police Web

Exemple de courrier électronique Magic Spoon de polices Web avec et sans images — E-mail avec et sans images lors de l'utilisation de texte dans des images

Et, avoir du texte dans vos images nuit à l'expérience des abonnés s'ils ont des images désactivées par défaut. Ce n'est peut-être pas une grande partie de vos abonnés, mais il n'y a vraiment aucun moyen de savoir si quelqu'un a désactivé ses images et ouvre votre e-mail. Alors pourquoi ne pas offrir la meilleure expérience au public le plus large possible ?

Les polices Web ouvrent de nouvelles voies de créativité en typographie, permettant aux concepteurs d'e-mails d'être créatifs et accessibles, et de s'en tenir à l'apparence de leur marque.

Puis-je utiliser des polices Web dans les e-mails ?

Si vous ne l'avez pas déjà deviné, la réponse est oui ! Mais, comme dans tout ce qui concerne les e-mails, il y a des mises en garde.

Assistance client par e-mail

Les polices Web ne fonctionnent que dans certains clients de messagerie et il faut veiller à ce que, lorsqu'elles ne sont pas prises en charge, la police retombe en douceur.

Client de messagerie	Prise en charge des polices Web
Courrier Apple	✓ Oui
Perspectives 2007-2016	Non
Perspectives 2019	Non*
Outlook pour Mac	✓ Oui
Outlook Office 365	Non*
Application Gmail	Non*
iOS	✓ Oui
Application Outlook	Non
Courrier Samsung	Non*
Courrier AOL	Non
Gmail	Non*
Bureau 365	Non
Outlook.com	Non
Yahoo! Courrier	Non

*A des résultats bancals en fonction de la méthode d'intégration d'e-mails, discutée plus tard.

Cela vaut la peine de jeter un œil à votre base d'abonnés pour voir combien consultent vos e-mails dans un client de messagerie qui prend en charge les polices Web. Si un nombre suffisant de vos abonnés le sont, c'est une merveilleuse façon de donner une touche supplémentaire à votre e-mail.

Si la majorité ne le sont pas, cela ne vaudrait tout simplement pas votre temps et vos efforts, surtout si vous envisagez d'utiliser une police Web payante.

Quels clients de messagerie vos abonnés utilisent-ils ?

Découvrez où vos abonnés ouvrent vos e-mails et comment ils interagissent avec Litmus Email Analytics. Obtenez les informations dont vous avez besoin pour optimiser vos e-mails et au-delà.

En savoir plus →

Licence

Les polices Web ont été conçues à l'origine pour être utilisées uniquement sur des sites Web, de sorte que leur licence est 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 n'autorisent pas l'utilisation dans les e-mails est qu'elle est considérée comme une distribution de la police, ce qui va à l'encontre de nombreux accords de licence d'utilisateur final (CLUF) des services.

Tous les fournisseurs de polices Web que nous avons contactés ont pris en charge l'utilisation de leurs polices dans les e-mails. Chaque fournisseur avait une licence différente qui était requise, il n'y a donc pas de méthode standard pour les polices d'e-mail. Si vous souhaitez utiliser une police, contactez l'entreprise pour savoir exactement comment elle licencie ses polices.

Où trouver des polices Web

Vous avez donc tout réfléchi et décidé que vous vouliez essayer les polices Web. Avec des options apparemment infinies, vous pouvez trouver celles qui correspondent à votre marque. Mais il est également important de garder à l'esprit l'accessibilité.

Certaines polices sont plus faciles à lire que d'autres.

Les polices ornées ou décoratives, telles que les polices d'affichage ou d'écriture manuscrite, peuvent rendre difficile pour les personnes malvoyantes ou dyslexiques de faire la différence entre les formes des lettres. Les polices sans empattement (polices sans fonctionnalités étendues ou boucles dans leurs lettres telles que Arial, Calibri, Century Gothic ou Helvetica) et les polices de dalle (polices avec des lignes plus épaisses telles que Museo Slab et Rockwell) sont considérées comme plus accessibles.

Voici quelques bons endroits pour commencer à chercher.

Polices Google

De nombreux services de polices Web sont disponibles, 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 simulez des conceptions dans Adobe Photoshop, Sketch ou un autre logiciel de conception.

Polices Adobe

Typekit est devenu Adobe Fonts depuis octobre 2018. Ils prennent désormais en charge à la fois la méthode <link> et la méthode @import pour utiliser les polices comme polices Web (plus d'informations à ce sujet ensuite). Le service n'est pas entièrement gratuit, mais si vous avez déjà un abonnement Creative Cloud, il est inclus avec celui-ci.

Services de polices Web

Il existe plusieurs autres services de polices Web disponibles sur une base payante. Vous devrez vous assurer que vous obtenez la bonne licence pour les utiliser dans votre courrier électronique.

Type Réseau (Licence Web)
Fonderie de type de processus (licence Web)
Optimo (Licence Annonces Numériques)
Fontspring (licence de messagerie personnalisée)
Typothèque (Licence Web)
Type de production (licence de publicité en ligne)
MyFonts (Licence Web)
Type commercial (Licence Web)

Avec les licences Web, vous pouvez choisir d'héberger la police vous-même ou de faire héberger la police par le fournisseur. Dans certaines licences Web, vous payez pour un certain nombre de pages vues avec chaque e-mail qui charge la police en tant que page vue, alors assurez-vous de prendre cela en considération lorsque vous achetez une licence.

Comment intégrer des polices Web dans les e-mails

Étant donné que les polices Web ne se trouvent généralement pas sur l'appareil local de quelqu'un et sont plutôt hébergées ailleurs, vous devez d'abord « intégrer » ou importer votre police Web dans vos e-mails avant de pouvoir réellement les utiliser.

1. Obtenez l'URL de votre fichier de police

Vous aurez besoin de l'URL de votre police Web pour l'appeler dans votre courrier électronique. Votre service de polices Web doit avoir cette URL. Mais si vous hébergez vous-même le fichier de police, obtenez l'URL à partir de laquelle se trouve la police Web sur votre serveur. Assurez-vous qu'il s'agit d'une URL publique et qu'elle ne provient pas d'un serveur local. Sinon, vos abonnés ne pourront pas accéder à la police Web et verront à la place une police de secours.

Si vous utilisez Google Fonts, trouver l'URL est un peu délicat, mais pas trop difficile. Découvrez comment procéder à l'étape suivante pour la méthode d'intégration @font-face.

2. Importez la police Web en utilisant l'une des trois méthodes

Il existe trois méthodes pour intégrer des polices Web dans les e-mails (et une mise en garde qui peut limiter la méthode que vous pouvez utiliser). Les trois méthodes pour intégrer votre police sont :

<lien>
@importer
@font-face

Alors pourquoi choisir une méthode plutôt qu'une autre ?

La méthode @import diffère le chargement de la police Web en cours d'importation jusqu'à ce que le code HTML dans lequel elle est intégrée soit complètement chargé. Cela peut conduire à ce que votre police Web prenne un peu plus de temps à apparaître dans votre e-mail, tandis que le reste de l'e-mail 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 e-mail si votre fichier de police Web est particulièrement volumineux.

Une autre chose à garder à l'esprit lors du choix d'une méthode à utiliser est ce que votre ESP prend en charge.

Vous pouvez créer un beau code qui fonctionne dans Litmus toute la journée, mais si votre ESP modifie votre code, comme nous le savons la plupart d'entre eux, alors rien de ce que vous faites n'aura d'importance. Assurez-vous que votre ESP ne modifie pas votre code d'une manière qui empêcherait vos polices de fonctionner. Chez Litmus, notre ESP ne nous permet pas d'inclure des conditions MSO autour des éléments de style. Ainsi, les méthodes <link> et @import ne fonctionneront pas pour nous car elles ne sont pas bien prises en charge dans Outlook, dont nous discutons plus loin.

Utilisation de <lien>

L'utilisation de la méthode <link> est une méthode relativement simple pour intégrer des polices dans votre courrier électronique. Placez cette ligne de code dans le <head> de votre e-mail, près du haut :

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Utilisation de @import

La méthode @import est également une méthode relativement simple. Placez cette ligne de code dans le <head> de votre email entre les balises <style> :

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Utilisation de @font-face

Les services de polices Web en ligne proposent généralement cinq formats de fichiers parmi lesquels choisir : .eot, .woff, .woff2, .svg et .ttf. Les formats .woff et .woff2 offrent la meilleure prise en charge en matière de courrier électronique, nous vous suggérons donc d'utiliser l'un de ces formats ou les deux 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 à l'épreuve des balles pour implémenter des polices Web.

Voici une déclaration typique @font-face pour importer une police Web dans un courrier électronique à l'aide de Google Fonts comme service de police Web choisi :

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

Si vous utilisez Google Fonts, trouver le code @font-face n'est pas le plus simple, mais ce n'est pas trop difficile.

Tout d'abord, vous devez trouver la police que vous souhaitez utiliser sur Google Font. Ensuite, choisissez le style que vous souhaitez utiliser. Un menu déroulant apparaîtra sur la droite.

googe_fonts

Dans le menu volant, il y aura un choix pour <link> ou @import. Les deux auront une URL (surlignée dans la capture d'écran ci-dessus). Vous pouvez copier cette URL et la coller dans la barre d'adresse de votre navigateur pour trouver la feuille de style CSS utilisée par Google.

google_font_api

Copiez et collez la version 'latin' de @font-face entre vos balises <style>.

Chez Litmus, la méthode @font-face est notre implémentation de prédilection pour l'importation de polices Web dans nos e-mails.

Tout le mérite de cette méthode d'importation de polices Web revient au défenseur de l'accessibilité des e-mails, Paul Airy, comme détaillé dans un précédent bulletin Type: E.

3. Choisissez la bonne police de secours

Lorsque vous utilisez des polices Web, il est nécessaire de mettre en place une police Web sécurisée de secours pour les clients de messagerie qui ne prennent pas en charge les polices Web.

Chaque client de messagerie a une police par défaut si la police répertoriée dans la pile de familles de polices n'est pas disponible. Par exemple, Gmail utilise Arial, Apple Mail utilise Helvetica et Outlook utilise Times New Roman. Si vous n'aimez pas le son de l'une de ces polices par défaut, nous avons de bonnes nouvelles : vous pouvez choisir votre police de secours lorsque vous codez dans la pile de la famille de polices (à l'étape suivante).

Choisir la bonne police de secours qui conserve la conception de votre e-mail est essentiel pour offrir une excellente expérience à tous vos abonnés, quel que soit le client de messagerie qu'ils utilisent.

Les polices de secours doivent être du même type que la police Web. Utilisez une police de secours sans empattement si votre police Web est une police sans empattement et une police de secours avec empattement si votre police Web est également une police avec empattement. L'utilisation du même style de police vous aidera à conserver la conception de votre e-mail dans différents clients de messagerie.

Vous pouvez aller plus loin en analysant la hauteur d'x des polices.

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

exemple de hauteur d'x comparant verdana, arial et proxima nova

Voici un exemple des subtiles différences de hauteur d'x entre les polices Verdana, Arial et la police Web Proxima Nova. Ces différences subtiles peuvent faire toute la différence dans la création ou la rupture de la conception de votre courrier électronique lorsque les polices Web ne sont pas rendues.

4. Utilisez vos polices dans les e-mails

Une fois votre police Web importée et vos solutions de remplacement choisies, les utiliser dans les e-mails est aussi simple que d'utiliser une police sécurisée pour le Web. Utilisez simplement le nom de famille de polices défini dans la méthode d'importation, suivi de vos polices de secours dans le CSS en ligne ou dans l'en-tête :

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

Considérez cela comme une liste prioritaire de polices préférées. Si un client de messagerie ne peut pas se conformer à votre choix numéro un, il reviendra au suivant sur votre liste.

Par exemple, en utilisant la pile de familles de polices 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 dans Gmail. La police rendue sera donc Verdana. Si Verdana n'est pas pris en charge sur l'appareil utilisé (ce qui serait très rare puisque Verdana est une police sécurisée pour le Web), l'appareil utilisera la police sans-serif par défaut pour son système, car il s'agit de la troisième police de la liste.

5. Évitez les faux gras ou les faux italiques

Si vous avez des versions en gras et en italique de vos fichiers de polices Web, alors utilisons-les !

Typographes ont mis beaucoup de réflexion et d' efforts à faire tous les différents styles d'une police juste, si les meilleures pratiques de pour appliquer la conception de type d' origine plutôt que de permettre au client de messagerie ou le navigateur pour appliquer au hasard un faux gras ou faux italique la police normale.

En gros, ne faites PAS ceci :

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

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

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

Comme vous pouvez le voir, les différents styles utilisent différentes polices quelle que soit la famille de polices. De cette façon, si vous stylisez votre police dans le HTML comme ceci :

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

… alors il tirera la véritable police « Roboto-BoldItalic » ! De même, en ajoutant simplement font-weight: bold; va tirer 'Roboto-Bold' et ajouter simplement le style de police: italic; va tirer 'Roboto-Italic' .

Ne le faites PAS non plus !

Alors, vous vous demandez peut-être pourquoi procéder ainsi au lieu de déclarer une famille de polices différente pour chaque style, qui extrait également les polices authentiques ? Voilà à quoi ça ressemble :

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

Cela pose un problème. L'utilisation de noms de famille de polices pour stocker des styles crée non seulement un CSS trop compliqué et redondant, mais supprime également le style de votre texte si vos solutions de secours se déclenchent. Ainsi, par exemple, si vous affichez le code ci-dessus dans Gmail (ce qui ne t prend en charge les polices Web personnalisées), alors vous ne verrez que Verdana non gras et non italique au lieu de Roboto Bold Italic .

En gardant votre famille de polices et vos poids de police ou styles de police séparés, vos polices de secours conserveront toujours le style correct.

6. Utilisez un correctif pour Outlook

Outlook a une merveilleuse bizarrerie que vous voudrez surveiller. Surtout si c'est ce que beaucoup de vos abonnés utilisent.

Voir à quoi ressemblent vos e-mails dans Outlook et plus encore

Chaque client de messagerie a ses particularités. Heureusement, vous pouvez les voir dans vos e-mails avant d'appuyer sur envoyer, avec Litmus Email Previews. Plus d'e-mails cassés.

Apprenez comment →

Si vous utilisez la méthode <link> ou @import, tout ce qui précède Outlook 2019 affichera Times New Roman, quelles que soient les solutions de secours que vous avez mises en place pour votre police.

La solution la plus simple consiste à utiliser la méthode @font-face. Mais si vous devez utiliser la méthode <link> ou @import, utilisez les conditions Microsoft Office (MSO) pour commenter cette section de vos styles. Cela empêchera Outlook de les voir et il utilisera vos polices de secours comme prévu :

Sans conditionnel MSO	Avec conditionnels MSO
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

Mais attendez une minute. Je viens de tout dire avant Outlook 2019. Alors que se passe-t-il dans Outlook 2019 (et Outlook Office 365) ? Eh bien, dans ces clients de messagerie, Outlook revient à votre solution de secours même sans les conditions MSO.

Sans conditionnel MSO	Avec conditionnels MSO
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

En fait, dans ces clients, le @import semble fonctionner ! Mais le fait-il vraiment ? Nous l'avons essayé avec d'autres polices, et les résultats étaient à peu près à la hauteur de ce que vous attendez d'Outlook :

tester les polices Web dans Outlook

On dirait parfois qu'il met une police système au lieu des polices que vous spécifiez. Et dans le cas de Montserrat, je ne sais pas trop ce qui se passe là-bas, mais ce n'est pas Montserrat. Il ressemble en fait plus à Lato. Il semble donc qu'Outlook tente de prendre en charge les polices Web, mais ce n'est pas encore tout à fait là. C'est certainement quelque chose à surveiller à l'avenir.

En attendant, pour les raisons ci-dessus - et parce que vous ne pouvez pas cibler uniquement Outlook 2019 - il est préférable d'utiliser @font-face ou de masquer vos déclarations <link> ou @import.

Si Outlook convertit votre police en Times New Roman, vous pouvez ajouter mso-font-alt : 'Arial'; au bloc @font-face pour fournir une solution de secours alternative pour Outlook :

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Une autre solution que vous pouvez utiliser consiste à coder la famille de polices avec la pile de polices Web sécurisée en ligne et à inclure un bloc <style> pour remplacer les polices par la police Web. Ensuite, il suffit de masquer ce bloc de style d'Outlook :

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. Utilisez également un correctif pour Gmail (je plaisante, il n'y en a pas)

Vous vous demandez peut-être « Et Gmail ? Nous utilisons Google Fonts après tout « .

On pourrait penser que, comme Gmail est un produit Google et Google Fonts est un produit Google, ils joueraient bien ensemble. Mais hélas, ce n'est pas le cas.

Les polices Web ne fonctionnent pas dans Gmail même si ce sont des polices Google et même si vous utilisez le code fourni par Google. La seule exception à cela est Roboto :

Utiliser différentes polices Google	Utilisation de différentes méthodes d'intégration

Et en fait, sur l'application Gmail Mail sur Android, toutes les polices sans empattement reviennent à Roboto :

Utiliser différentes polices Google	Utiliser différentes méthodes d'intégration

Un peu d'inspiration pour vous aider à démarrer

D'accord, maintenant qui est prêt à voir quelques exemples impressionnants de marques utilisant correctement les polices Web dans les e-mails ?

Ace Hardware a utilisé des polices Web là où elles sont prises en charge, mais a choisi Rockwell comme police de dalle de secours pour garantir que l'e-mail reste fidèle à la marque dans d'autres clients de messagerie.

Avec des polices Web	Avec des replis

Webflow utilise les polices système comme solution de repli pour leurs polices Web et utilise des poids de police pour garantir une excellente expérience typographique, quelle que soit la police qui apparaît.

e-mail du flux Web

Restez fidèle à la marque et sans erreur

Les polices Web sont un excellent moyen de garder le texte de vos e-mails à la fois marqué et accessible. Mais comme vous pouvez le voir sur cet article, il y a beaucoup de nuances à considérer. C'est pourquoi il est tout aussi important de…

Testez toujours !

Nous avons fait de notre mieux pour tester un tas de circonstances différentes, mais votre ESP peut déformer votre code de manière inattendue. Assurez-vous de tester vos e-mails avant de les envoyer pour vous assurer que toutes vos solutions de secours fonctionnent correctement.

QA testez les polices Web dans vos e-mails

L'avez-vous bien fait ? Découvrez-le avec un essai gratuit de Litmus. Prévisualisez l'apparence de vos e-mails dans plus de 90 clients de messagerie, applications et appareils. Et maintenez la réputation de votre marque avec des e-mails impeccables.

Commencez votre essai gratuit de Litmus →

L'ajout de polices Web en vaut la peine en tant qu'amélioration progressive importante pour vous aider à offrir la meilleure expérience à vos abonnés dans leurs boîtes de réception. S'amuser! Et faites-nous savoir si vous avez des questions ou des commentaires ci-dessous.

Publié à l'origine le 11 avril 2019, par Jaina Mistry. Dernière mise à jour le 23 avril 2021.