web-dev-qa-db-fra.com

Est-il possible d'utiliser Google WebFonts dans un modèle MailChimp?

J'ai essayé d'incorporer Google WebFonts dans MailChimp et je ne parviens pas à trouver de solution.

J'ai essayé l'approche indiquée sur le site de Campaign Monitor à l'aide de @import:

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

mais j'obtiens cette erreur en essayant de prévisualiser:

An error occurred parsing your template CSS:
Cannot find a CSS file at: http://fonts.googleapis.com/css?family=Montserrat

Est-ce que quelqu'un a pu utiliser des polices personnalisées dans MailChimp?

html-emailmailchimp
12
RustyDev

Il s'avère que ce n'est pas possible avec la syntaxe @import. Cela fonctionne en utilisant tag:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
25
RustyDev

J'utilise des polices personnalisées dans tous mes courriels, mais pas avec google . Si vous rencontrez des difficultés pour utiliser les polices Web de Google, je vous recommande d'héberger le fichier sur votre propre serveur et d'essayer de l'utiliser à la place.

Pour moi, j'importe mes webfontsstylesheet like so:

@import url('https://www.mydomain.com/en/img/cms/mail/_a/fonts/fonts.css');

J'ajoute également un conditionnel-comments au-dessous de mes déclarations de style pour améliorer les replis de WebFont dans Outlook . Sans cela, Outlook va probablement remplacer votre police Web par ce que vous ressentez, et ne pas respecter votre police de remplacement. Toutefois, si vous déclarez ce commentaire conditionnel, puis que vous enveloppez votre texte d'une étendue supplémentaire avec la classe, Outlook respectera votre solution de secours et utilisera la police de votre choix.

<!--[if gte mso 9]>
<style>
    .flowerpwr { font-family:Arial,sans-serif; }
    .proxima { font-family:Arial,sans-serif;font-weight:normal; }
    .proxima_novasemibold { font-family:Arial,sans-serif;font-weight:normal; }
</style>
<![endif]-->

Le balisage html ressemble à ceci:

<td align="center" style="font-family:'proxima_novaregular',Arial,sans-serif;font-size:16px;letter-spacing:0.04em;color:#333333;">
    <span class="proxima">Text here</span>
</td>

Cela fonctionne même pour le style du texte alt image comme ceci:

<td>
    <a href="https://www.mylink.com/" target="_blank" style="display:block;font-family:'proxima_novaregular',Arial,sans-serif;color:#666666;font-size:16px;text-align:center;letter-spacing:0.04em;text-decoration:none;outline:none;">
        <span class="proxima">
            <img src="a3.jpg" alt="STYLED ALT TEXT WITH WEBFONT AND Outlook MAINTAINED FALLBACK" border="0" style="display:block;">
        </span>
    </a>
</td>
6
davidcondrey

J'ai construit beaucoup de courriels en utilisant mailchimp récemment et je m'y étais moqué pendant un moment. Ce sont mes conclusions: 

  • fonctionne pour les polices google.

  • @import fonctionne pour les polices hébergées via d'autres sites, puis google (par exemple, votre site personnel)

  • en utilisant quelque chose comme: 

    <http://fonts.googleapis.com/css?family=Montserrat 'rel =' stylesheet 'type =' text/css '> 

  • utiliser @import pour les polices google vous donne une erreur dans mailchimp (comme celle affichée par horizens).

  • base64 fonctionne aussi bien. Mais le code peut être long et causer d'autres problèmes.

  • Firefox bloque les polices dans l'aperçu de Mailchimp (parce que c'est https).

PS: Sujet différent mais lié: La création d'e-mails réactifs n'est pas aussi terrible que le prétendent les gens d'Internet.

1
Leopold Kristjansson