Create a Discussion

Mailchimp Stripping Out My @media Tag

Ade-Lee Adebiyi posted 2016-05-03 14:05:38

Hey everyone, so I have a particular issue with Mailchimp I was hoping someone knows how to fix. Basically I'm using the webfont fix

@media {
    @font-face { your webfont }
}

However when I save this in mailchimp it strippes out the @media {} leaivng only the @font face. This causes it to render Times New Roman in outlook 2007-2013.

Does anyone have a workaround this so that the @media tag stays when uploaded to mailchimp?

Thank you in advance!

James White replied 2016-05-05 08:34:41

Try using:

@media screen { 
    @font-face {
         /* Specific font-face stuff */
    }
}

You may also want to add something like the code below in your <head> to make sure Microsoft Word based Outlook clients don't display ugly serif fonts, replace with a fallback font stack of your choice. @media screen should usually prevent this, but there is an interesting behaviour quirk in Outlook that it will display serif fonts for custom font stacks if someone previously sent a campaign without being defensive with the font stacks until the Outlook client itself is restarted. Prevents your Litmus test results being skewed by someone else.

<!--[if mso]>
<style type="text/css">
    body, h1, h2, h3, h4, h5, h6, p, a, table, td, span, strong { font-family:Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->

Reply to James White

Ade-Lee Adebiyi replied 2016-05-05 19:46:46

Hey James thanks for the suggestion. Mailchimp was stripping out the second style tag and putting it inside the first so that didn't work for me.

I got it working by adding an MSO style within the @font-face declaration. mso-font-alt: 'Arial';

@font-face {font-family: /*Font Family and links etc */
  mso-font-alt: 'Arial';
}

Mailchimp Stripping Out My @media Tag

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password