Je travaille un mailers HTML (HTML Email) et le design que j'ai reçu contient des polices personnalisées. Comment puis-je utiliser des polices personnalisées dans mon e-mail HTML?Comment importer des polices personnalisées dans des publipostages HTML (HTML HTML)
Merci d'avance.
D'abord et avant tout, les polices Web sont actuellement pris en charge dans ces clients de messagerie :
(Par ex. donc il n'y a aucun moyen d'afficher une police Web personnalisée dans Web Gmail, Yahoo, ou des versions plus récentes de Windows d'Outlook)
Étape 1: Si la police est déjà hébergé sur un service comme Google Fonts, il peut être référencé à partir de là dans la section <head> du HTML comme ceci:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
Vous pouvez également utiliser la méthode @import.
<style>
@media screen {
@import url('https://fonts.googleapis.com/css?family=Roboto');
}
</style>
Outlook ne prend pas en charge les polices Web et étoufferait sur cette référence, l'enveloppant donc dans une balise @media fera d'Outlook ignorer tout cela ensemble.
Si la police est déjà pas disponible en ligne, mais vous avez le fichier de police, il peut être converti en une police Web à l'aide d'un outil comme font squirrel. Les fichiers résultants peuvent être téléchargés sur un serveur et référencé comme ceci:
@media screen {
@font-face {
font-family: {font-name};
src: url({http://www.website.com/font-url}) format('woff'),
url({http://www.website.com/font-url}) format('truetype');
font-weight: normal;
font-style: normal;
}
}
Note: Pour une plongée profonde sur la façon de référencer les polices Web dans le courrier électronique, consultez this article by Litmus.
Étape 2: A partir de là, faisant référence à la police Web dans la pile de police affichera dans les clients de messagerie qui prennent en charge les polices Web.
font-family: 'Roboto', 'fallback font 1', 'fallback font 2', sans-serif;
Les clients de messagerie qui ne pas les polices Web de support (tels que le Web Gmail, Yahoo, ou des versions plus récentes de Windows Outlook) ignoreront la police personnalisée et essayer d'afficher les polices de secours figurant dans la pile de police.
L'utilisation de polices personnalisées dans les messages électroniques HTML est une mauvaise pratique. Mais vous pouvez les utiliser comme ceci: comprennent hébergé la police personnalisée quelque part entre <head></head> balises
<style>
@font-face {
font-family: FontName;
src: url(http://www.fonts.com/fontname.otf);
}
</style>
et l'appliquer à l'élément en ligne
<h1 style="font-family: FontName">My heading</h1>
Merci. Mais ça ne fonctionnait pas. –
Merci pour les réponses et l'édition de ma question. –