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


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

<link href='' rel='stylesheet' type='text/css'>

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('');

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]>
    .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; }

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>

This even works for styling image alt text like so:

    <a href="" 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;">