12

I've been trying to incorporate google webfonts in MailChimp and can't get any solutions to work.

I've tried the approach listed on Campaign Monitor's site using @import:

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

but I get this error when trying to preview:

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

Has anyone been able to use custom fonts within MailChimp?

reor
  • 820
  • 9
  • 22
RustyDev
  • 1,094
  • 1
  • 9
  • 18

3 Answers3

25

It turns out it's not possible through the @import syntax. It does work using tag:

<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
RustyDev
  • 1,094
  • 1
  • 9
  • 18
  • 1
    I @import webfonts in all of my emails and use Mailchimp and they work just fine for me. – davidcondrey Mar 21 '14 at 17:49
  • In my tests with fonts hosted on my own server, the method described in this answer is the only method that works in MailChimp. The other methods described in MailChimp's own documentation did not work: @import failed per the OP (a parsing error), and font-face declarations were either stripped entirely, or mangled so badly by MailChimp's CSS parser that they no longer worked. – Jonathan Nicol Nov 06 '15 at 04:37
  • 3
    Almost 4 years later, this has not changed. It's 2017 and, just in case you landed here through a Google search, note that MailChimp unbelievably _still_ has this parsing error when you use `@import`. This is what I'm using, so that Outlook doesn't render Times New Roman: ` ` – Cosmin Jan 11 '17 at 14:04
7

I use custom fonts in all of my emails but not through . If your having trouble using Google's webfonts I recommend you host the file on your own server and try to use that instead.

For me, I import my like so:

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

I also add a below my style declarations to enhance webfont fallbacks in . Without this, Outlook will likely substitute your webfont for whatever it feels like, and not respect your fallback font. But if you declare this conditional comment and then wrap your text with an additional span with the class, Outlook will respect your fallback and use the font you decide.

<!--[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]-->

The markup looks like this:

<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>

This even works for styling image alt text like so:

<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>
davidcondrey
  • 34,416
  • 17
  • 114
  • 136
2

I have been building emails a lot using mailchimp recently and I had been scratching my head over this for a while. These are my findings:

  • works for google fonts.

  • @import works for fonts hosted through other sites then google (for ex. your personal site)

  • using something like:

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

  • using @import for google fonts gives you an error in mailchimp (like the one horizens posted).

  • base64 works as well. But the code can get way to long and cause other problems.

  • Firefox blocks the fonts in Mailchimp preview (because it's https).

PS: different but related topic: Making responsive emails is not as terrible as the people of the internet claim.

Leopold Kristjansson
  • 2,246
  • 28
  • 47