web-dev-qa-db-fra.com

Existe-t-il un moyen d'utiliser les polices Web Google dans un e-mail HTML?

Un e-mail HTML doit (devrait) avoir son CSS en ligne afin d'avoir la conception attendue dans la plupart des clients de messagerie.

Existe-t-il un moyen de lier une police Web Google à un tel e-mail ou de l'intégrer à un tel e-mail tout en conservant une large acceptation (rendu approprié) parmi les clients de messagerie?

Je sais qu'une alternative serait d'avoir une image avec la typographie correspondante, mais je chercherais d'abord autre chose qui pourrait fonctionner.

cssfontshtml-emailgoogle-webfonts
18
Gabriel Petrovay

Si la police est absolument nécessaire, vous devrez utiliser le texte comme solution d'image. Depuis décembre, seuls iOS Mail, Mail.app, Lotus Notes 8, Mail par défaut sur Android, Outlook 2000 et Thunderbird prennent en charge l'utilisation d'une police personnalisée externe.

Voir: http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

Edit 2/10/2014: Puisque c'est l'une de mes réponses les plus populaires, voici le lien mis à jour sur les meilleures pratiques des polices Web dans les e-mails:

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

28
samanthasquared

Vous pouvez maintenant utiliser le package NPM custom-fonts-in-emails pour incorporer des polices personnalisées en tant qu'images dans vos e-mails. https://github.com/crocodilejs/custom-fonts-in-emails

import customFonts from 'custom-fonts-in-emails';
import path from 'path';

const options = {
  text: 'Make something people want',
  fontNameOrPath: 'GoudyBookletter1911',
  fontColor: 'white',
  backgroundColor: '#ff6600',
  fontSize: 40
};

customFonts.png2x(options)
  .then(console.log)
  .catch(console.error);

Les sorties:

<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;">

Rendu:

4
niftylettuce