Outlook 2011 & 2013 Defaulting To Times New Roman With @import

I coded up an email today for the first time using @import to use a Google webfont - with of course appropriate fallbacks for clients that don't support it.

Everything was working swimmingly until I tested Outlook 2013 and 2011.  No matter what - it rendered everything in Times New Roman. 

To make sure the issue was related to the @import line - I took that out and retested, and they properly fell back to Arial. 

So - has anyone figured out how to use @import, and get Outlook 2013 and 2011 to fallback properly, or am I doing something else stupid?

The relevant code from my stylesheet is:

<style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,600italic,600,700,300);

        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; font-family: 'Open Sans', arial, sans-serif;} 

Here's the scope of the email - and here's a comparison with screens from Litmus - with Outlook 2003 (which falls back properly) and Outlook 2011 and 2013 (which insist on displaying everything in Times New Roman).

Redferret, 3 years ago

This was recently discussed and it seems the only solution is to hide the font family declaration from Outlook. The best way to do this is with

@media screen{
font-family: 'Open Sans', arial, sans-serif;

this should target only the clients that have support for modern CSS standards, just remember to declare it again in your mobile media queries.

Gmail app apologist
atourgates atourgates, 3 years ago

Thanks!  That worked beautifully. 

Just to clarify for anyone else having the issue, the solution was to modify the above styles like so:

    <style type="text/css">
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,600italic,600,700,300);
        #outlook a {padding:0;} 
        body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; font-family: arial, sans-serif;} 
         @media screen{
            font-family: 'Open Sans', arial, sans-serif;

And then add this bit to my mobile-specific style sheet:

@media only screen and (max-device-width: 480px) {
            body {
                font-family: 'Open Sans', arial, sans-serif;

The result is an email that uses Open Sans in clients that support it - and gracefully degrades in clients that don't, now including Outlook 2011 and 2013.

Goon, 2 years ago

I'm curious if this works for you guys in Firefox if you choose the "View it in your browser" option that is common in many emails.  Firefox is seeing the font declaration properly in the CSS, but it's not loading the font.  We're hosting our own font files, so I'm fairly certain it's some sort of security thing that Firefox doesn't want to look to another server to grab font files, but I'm curious if you're seeing the same issue while using Google Fonts.

I'm not sure if it's something that we would have to configure on our domain, or if it's campaign monitor's servers that are hosting the email.

As an example, see this preview in Chrome and Firefox

joshatminacs, 1 year ago

@Goon You probably fixed this issue, or more recent versions of Firefox fixed this; I'm not seeing it on Firefox.

I also found this on the Internet: @font import won't work with MailChimp, you have to use <link>

But I did notice your title tag in the header doesn't match the content (oops). I do that too, so just thought I'd gently point it out.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free