Is it possible to use google webfonts in a MailChimp template?

Question

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

Answer 1

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

Answer 2

I use custom fonts in all of my emails but not through google. 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 webfonts stylesheet like so:

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

I also add a conditional-comments below my style declarations to enhance webfont fallbacks in outlook. 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 html 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>

Answer 3

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.