Outlook not displaying fonts correctly

I'm having an odd issue that is only affecting how fonts display in Outlook 2007 / 2010 / 2013. In all other clients, fonts are displaying as wanted, with Google Fonts 'Oswald' showing firs, then fallback Arial, then default sans-serif... but in those three flavors of Outlook, fonts are displaying serifed. I've debugged this thing backwards & forwards and I can't figure this out, so I was wondering if anyone here had any insight on how to attack this.

Here are my test results: https://litmus.com/pub/0d2ca3d

And here's my email code - any help would be greatly appreciated:

...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="title" content="Hai Street Kitchen | Philadelphia, PA, USA" />
<meta name="description" content="Hai Street Kitchen &amp; Co.  is a fresh and urban Japanese-casual concept that offers ridiculously good (yummy) food featuring all-natural ingredients for customers who are diverse, smart and hungry." />
<meta name="keywords" content="philadelphia, pennsylvania, launch, burrito, sushi, delicious, simple, flavours, responsibly sourced, health-conscious, healthy, 100% natural, ingredients, local, fast, press, PR, street, kitchen, fresh, urban, Japanese, Japanese-casual, yummy, all-natural, diverse, smart, hungry" />
<meta name="robots" content="all,index,follow," />
<meta name="refresh" content="300">
<meta name="copyright" content="Copyright 2013-2014 Hai Street Kitchen. All Rights Reserved.">
<meta name="author" content="fathead design, inc.">
<meta name="revisit-after" content="7">
<meta property="og:title" content="Hai Street Kitchen & Co. is a fresh and urban Japanese-casual concept that offers ridiculously good (yummy) food featuring all-natural ingredients for customers who are diverse, smart and hungry." />
<meta property="og:type" content="restaurant" />
<meta property="og:url" content="http://www.haistreetkitchen.com" />
<meta property="og:description" content="Hai Street Kitchen & Co.  is a fresh and urban Japanese-casual concept that offers ridiculously good (yummy) food featuring all-natural ingredients for customers who are diverse, smart and hungry." />
<meta property="og:image" content="http://www.haistreetkitchen.com/img/layout/hsk-strap.png" />
<meta property="og:site_name" content="Hai Street Kitchen | haistreetkitchen.com" />
<meta property="fb:admins" content="609401657" />
<meta property="og:fb:app_id" content="661471513916251">


<title>Hai Street Kitchen | Philadelphia, PA</title>


<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
                                                                                                                                                                                                                                                                                                                                                                                                        
<style type="text/css">

/* 
*
* Responsive Email Template | One Main Article, Two Secondary Articles, Modifiable Minor Article (2col), No Repeaters
*
* template design by fathead design | www.fatheaddesign.com
*
* Author: Gregg Tomlinson
* 
* // 05.03.15  //
*
*
*
* Outlook 2013? Step off. 
*
*/

/*  Fonts */

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);

.ReadMsgBody {width: 100%; background-color: #cc0000;}
.ExternalClass {width: 100%; background-color: #cc0000;}

body {
    width: 100%; 
    background-color: ##ebebeb; 
    margin:0; 
    padding:0; 
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust:none;
    color: #4a4a4a;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    text-align: center;
    }
table {border-collapse: collapse;}

/* here we go */
.preheader { 
    color: #ebebeb;
    background: #ebebeb;
    display: none !important; 
    }
p {
    color: #4a4a4a;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    }    
a { 
    color: #e98400;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    text-decoration: none;
    }
a:hover { color: #fdce52; }


/* Header */
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}

table.head-wrap { 
    width: 100%;
    background: url('http://contactsolved.com/ar/hsk/01/headerrule.png') repeat-x;
    }
.logocontent {
    float: none;
    }
    
/* Footer */
table.footer-wrap { 
    width: 100%;
    clear:both!important;
    }
.footer-wrap .container td.content  p { 
    border-top: 1px solid rgb(215,215,215); 
    padding-top:15px;
    }
.footrule {
    background: url('http://contactsolved.com/ar/hsk/01/footrule.png') repeat-x;
    height: 39px;
    margin-top: 50px;
    }
.footvign {
    background-color: #ebebeb;
    }    
.footvignleft {
    background-repeat: repeat-x;
    background-position: right;
    }
.footvignright {
    background-repeat: repeat-x;
    background-position: left;
    }
.insetimage img {
    width:125px;
    height:auto;
    }    
.socialheight {height:300px!important;}        
/* adjust for mobile */
@media only screen and (max-width: 640px)  {
    body[yahoo] .deviceWidth {width:440px!important; padding:0;}    
    body[yahoo] .center {text-align: center!important;}   
    body[yahoo] .insetimage img {
        text-align: center!important;
        valign: middle;
        width: 125px!important;
        height: auto!important;
    } 
    body[yahoo] .socialheight {height:300px!important;}
}            
@media only screen and (max-width: 479px) {
    body[yahoo] .deviceWidth {width:280px!important; padding:0;}       
    body[yahoo] .center {text-align: center!important;} 
    body[yahoo] .insetimage img {
        text-align: center!important;
        valign: middle;
        width: 125px!important;
        height:auto!important;
    }
    body[yahoo] .socialheight {height:300px!important;}
}

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: 'Oswald', Arial, sans-serif !important;">
    
<span class="preheader">The latest and greatest from Hai Street Kitchen!</span>
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="100%" valign="top" bgcolor="#ebebeb" style="padding-top:5px">
        
    <!-- BEGIN Header-->
            <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                <tr>
                    <td width="100%" bgcolor="#ebebeb">

                            <!-- Logo -->
                            <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth head-wrap">
                                <tr>
                                    <td style="padding:0px 0px" class="center">
                                                                       
                                        <a href="http://www.haistreetkitchen.com/uk"><img src="http://contactsolved.com/ar/hsk/01/haistreetlogo-white.png" border="0"></a>
                                    </td>
                                </tr>
                            </table><!-- End Logo -->
                            
        <!-- Nav table positioned below logo should go here -->

                    </td>
                </tr>
            </table>
    <!-- End Header -->
            
    <!-- BEGIN Main Article Column -->
            <table width="580"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
                <tr>
                    <td style="font-size: 16px; color: #4a4a4a; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:0px 0px 0px 0px" bgcolor="#ffffff">
                        
                        <table>
                            <tr>
                                <td valign="middle" style="padding:0px 0px 0px 0px">
                                <h2 style="text-decoration: none; font-weight:700; font-size: 54px; line-height: 54px; color: #e98400;  font-family: 'Oswald', Arial, sans-serif !important; text-align: center;"><singleline label="Main Headline">Lorem Ipsum Dolor.</singleline></h2>
                                <h4 style="text-decoration: none; font-weight:300; font-size: 36px; line-height: 36px; color: #6f6f6f;  font-family: 'Oswald', Arial, sans-serif !important; text-align: center;"><multiline label="Main Headline">Art party Banksy shabby chic, lumberjack mlkshk sartorial.</multiline></h4>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top" style="padding:50px 10px 50px 10px;">
                                    <img src="http://contactsolved.com/ar/hsk/01/560x400.gif" width="100%" editable="true" alt="Hai Street Kitchen" border="0" align="center" />
                                </td>
                            </tr>
                            
                        </table>

                        <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: 'Oswald', Arial, sans-serif !important; padding:0px 10px 0px 10px;"><multiline label="Main Article Copy">Ennui sustainable High Life, tilde pork belly Odd Future Portland roof party. Lo-fi pop-up meh, mlkshk irony authentic PBR&B American Apparel readymade four loko food truck banh mi literally chambray. Mixtape wolf flannel, readymade lo-fi distillery umami drinking vinegar keffiyeh vegan 90's American Apparel ennui pickled. Locavore beard synth 8-bit, distillery irony squid leggings health goth bitters chillwave letterpress. +1 fashion axe pop-up meditation, deep v chambray polaroid Pinterest hoodie sriracha Pitchfork leggings bitters asymmetrical tote bag. IPhone keffiyeh McSweeney's irony kale chips Carles sartorial, health goth tofu Intelligentsia four loko DIY tousled normcore. Vice organic gastropub meggings drinking vinegar.</multiline></p>                            
                    </td>
                </tr>  
        <!-- 15px white spacer div at bottom of the text block-->
                <tr>
                    <td bgcolor="#ffffff"><div style="height:15px">&nbsp;</div></td>
                </tr>                
            </table>
    <!-- END Main Article Column -->

    <!-- 15px spacer div --><div style="height:15px">&nbsp;</div>

    <!-- BEGIN Photo Left Column -->
        <!-- opening <repeater> call could go here if we want to make this flexible for client use -->

            <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ebebeb">
                
            <!-- 15px white spacer div at bottom of the text block-->
                <tr>
                    <td bgcolor="#ffffff"><div style="height:15px">&nbsp;</div></td>
                </tr>    
               
                <tr>
                    <td style="font-size: 16px; color: #4a4a4a; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:0px 0px 0px 0px" bgcolor="#ffffff">
                        <table align="left" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="middle" align="center" class="center" style="padding:10px 0px 10px 0px">
                                    <p class="insetimage" style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img src="http://contactsolved.com/ar/hsk/01/125x200.gif" alt="" border="0" style="border-radius: 0px;" class="deviceWidth" editable="true" /></p>
                                </td>
                            </tr>
                        </table>                       
                        <table align="right" width="63%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="middle" style="font-size: 16px; color: #4a4a4a; font-weight: normal; text-align: left; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:0px 8px 0px 8px">

                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: 'Oswald', Arial, sans-serif !important;">  
                                        <multiline label="Body Copy">Vinyl Banksy banh mi, YOLO narwhal Tumblr Austin deep v irony keffiyeh iPhone. Squid 90's Marfa organic, vegan disrupt asymmetrical Odd Future YOLO. Jean shorts salvia squid bespoke organic artisan. Thundercats vinyl wolf hashtag before they sold out. Sriracha keffiyeh umami, post-ironic paleo +1 retro normcore cold-pressed Bushwick lo-fi Banksy swag art party.</multiline> 
                                       </p>
                                </td>
                            </tr>
                        </table>  
                    </td>
                </tr>
               
            <!-- 15px white spacer div at bottom of the text block-->
                <tr>
                    <td bgcolor="#ffffff"><div style="height:15px">&nbsp;</div></td>
                </tr>    
                
            </table>
                
        <!-- 15px spacer div --><div style="height:15px">&nbsp;</div>
            
            <!-- closing <repeater> call could go here if we want to make this flexible for client use -->

    <!-- END Photo Left Column -->

    <!-- BEGIN Photo Right Column -->
        <!-- opening <repeater> call could go here if we want to make this flexible for client use -->

            <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ebebeb">
        <!-- 15px white spacer div at bottom of the text block-->
                <tr>
                    <td bgcolor="#ffffff"><div style="height:15px">&nbsp;</div></td>
                </tr>                
                <tr>
                    <td style="font-size: 16px; color: #4a4a4a; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:0px 0px 0px 0px" bgcolor="#ffffff">
                        <table align="left" width="63%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="middle" style="font-size: 16px; color: #4a4a4a; font-weight: normal; text-align: left; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:0px 8px 0px 8px">

                                    <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; font-family: 'Oswald', Arial, sans-serif !important;"><multiline label="Body Copy">Vinyl Banksy banh mi, YOLO narwhal Tumblr Austin deep v irony keffiyeh iPhone. Squid 90's Marfa organic, vegan disrupt asymmetrical Odd Future YOLO. Jean shorts salvia squid bespoke organic artisan. Thundercats vinyl wolf hashtag before they sold out. Sriracha keffiyeh umami, post-ironic paleo +1 retro normcore cold-pressed Bushwick lo-fi Banksy swag art party.</multiline></p>
                                </td>
                            </tr>
                        </table>
                        <table align="right" width="35%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
                            <tr>
                                <td valign="middle" align="center" class="center" style="padding:10px 0px 10px 0px">
                                    <p class="insetimage" style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img src="http://contactsolved.com/ar/hsk/01/125x200.gif" alt="" border="0" style="border-radius: 0px;" class="deviceWidth" editable="true" /></p>
                                </td>
                            </tr>
                        </table>                       
                    </td>
                </tr>
                    
            <!-- 15px white spacer div at bottom of the text block-->
                <tr>
                    <td bgcolor="#ffffff"><div style="height:15px">&nbsp;</div></td>
                </tr>                
            </table>
                
        <!-- 15px spacer div --><div style="height:15px">&nbsp;</div>
            
            <!-- closing <repeater> call could go here if we want to make this flexible for client use -->

    <!-- END Photo Right Column -->


    <!-- BEGIN Social Column -->

            <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ebebeb">
                <tr>
                    <td style="padding:10px 0">
                    
        <!-- BEGIN LEFT Social Column -->                    
                    
                            <table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth socialheight" bgcolor="#81194a">
                                <tr class="socialheight" valign="top">
                                    <td valign="top" height="300" style="height: 300px; font-size: 14px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
                                         <p style="font-size: 14px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;"><multiline label="Cranberry Block">Vinyl Banksy banh mi, YOLO narwhal Tumblr Austin deep v irony keffiyeh iPhone.  Sriracha keffiyeh umami, post-ironic paleo +1 retro normcore cold-pressed Bushwick lo-fi Banksy swag art party.</multiline></p>
                                         <p style="text-decoration:none; color: #ffffff !important; background-color: #e98400; padding:10px 16px; text-transform: uppercase; font: 700 12px/18px 'Oswald', Arial, sans-serif !important; margin-right:10px; text-align:center; cursor:pointer; display: inline-block; letter-spacing: 2px;"><singleline label="Linkie Link"><a style="color: #ffffff !important;" href="#">Read More »</a></singleline></p>
                                    </td>
                                </tr>
                            </table>
                            
        <!-- END LEFT Social Column -->  
        
        
        <!-- BEGIN RIGHT Social Column -->                    

                            <table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth socialheight" bgcolor="#eaaf0d">
                                <tr class="socialheight" valign="top">
                                    <td valign="top" align="center" height="300" style="height: 300px; font-size: 14px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
                                        <p style="padding:0 10px 0 10px"><a href="http://www.haistreetkitchen.com/" style="font-size: 14px; color: #81194a; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;">haistreetkitchen.com</a></p>
                                        <p style="font-size: 24px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;">GET SOCIAL</p>
                                        <p style="font-size: 18px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;"><a href="https://twitter.com/haistkitchen_us">@HaiStKitchen_US</a></p>
                                        <p style="padding:0 10px 0 10px; font-size: 24px; color: #ffffff; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;">
                                            <a href="https://twitter.com/haistkitchen_us"><img src="http://contactsolved.com/ar/hsk/01/social/twitter-32.png" alt="" border="0" height="32" width="32" align="center" style="padding:0 3px 0 3px"/></a><a href="https://www.facebook.com/HaiStKitchenUS"><img src="http://contactsolved.com/ar/hsk/01/social/facebook-32.png" alt="" border="0" height="32" width="32" align="center" style="padding:0 3px 0 3px"/></a><a href="http://instagram.com/haistkitchen_us"><img src="http://contactsolved.com/ar/hsk/01/social/instagram-32.png" alt="" border="0" height="32" width="32" align="center" style="padding:0 3px 0 3px"/></a>
                                        </p>
                                    </td>
                                </tr>
                            </table>  
                        </td>
                       </tr>
                </table>
                
        <!-- 15px spacer div --><div style="height:15px">&nbsp;</div>

    <!-- END Social Column -->
    
    
    <!-- BEGIN Website Link -->
            <table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
                <tr>
                    <td align="center" valign="middle" style="padding:0px 0px 0px 0px">
                        <p style="font-size: 18px; color: #4a4a4a; font-weight: normal; text-align: center; font-family: 'Oswald', Arial, sans-serif !important; line-height: 24px; vertical-align: top;">FOR LOCATIONS, PLEASE <span style="text-decoration:none; color: #ffffff !important; background-color: #eaaf0d; padding:10px 16px; text-transform: uppercase; font: 700 14px/18px 'Oswald', Arial, sans-serif !important; margin-right:10px; text-align:center; cursor:pointer; display: inline-block; letter-spacing: 2px;"><a style="color: #ffffff !important;" href="#">VISIT OUR WEBSITE »</a></p>
                    </td>
                </tr>  
            </table>
    <!-- END Website Link -->

    <!-- BEGIN Footer Section -->

    <div class="footrule"></div>
            <table width="580" class="deviceWidth footer-wrap" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
            
                  <tr class="footvign">
                    <td>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
                            <tr>
                                <td class="footer">
                                    <p style="text-align: center; font-family: 'Oswald', Arial, sans-serif !important;">&copy;<currentyear> <a href="http://www.haistreetkitchen.com/us">Hai Street Kitchen.</a> All Rights Reserved.</p>
                                    <p class="addys" style="text-align: center; font-family: 'Oswald', Arial, sans-serif !important;"><a href="http://haistreetkitchen.com/us/locationmap">32 South 18th Street</a>  &nbsp; | &nbsp; Philadelphia, PA 19103 &nbsp; | &nbsp; p: <a href="tel://12159649465">215.964.9465</a></p>
                                    <p class="addys" style="text-align: center; font-family: 'Oswald', Arial, sans-serif !important;"><webversion>View in Browser</webversion> &nbsp; | &nbsp; <preferences>Account Details</preferences> &nbsp; | &nbsp; <unsubscribe>Unsubscribe</unsubscribe> &nbsp; | &nbsp; <forwardtoafriend>Forward to a Friend</forwardtoafriend></p>
                                    <p class="addys" style="text-align: center; font-family: 'Oswald', Arial, sans-serif !important;"><tweet> &nbsp; &nbsp; |&nbsp; &nbsp; <fblike></p>
                                    <p class="addys" style="text-align: center; font-family: 'Oswald', Arial, sans-serif !important;" align="center">Email powered by <a href="http://www.contactsolved.com/">contact:solved</a>
                                    <br />
                                    <a href="http://www.contactsolved.com/"><img src="http://contactsolved.com/ar/hsk/01/contactsolved-logo.png" alt="Contact Solved" border="0" align="center"></a></p>
                                </td>
                            </tr>
                          </table>
                    </td>
                  </tr>
            </table>  
            
    <!-- END Footer Section -->
            
        </td>
    </tr>
</table>
            
</body>
</html>
anastazy, 1 year ago

Hi,

For fonts to work in Outlook, always declare it inline in <td> element.

ex.

<td style="font-family: Helvetica, Arial, sans-serif;">

Custom fonts will not work there (no-go for google fonts).

Also remember that your styles ARE NOT cascading in email.
If you nest table, you need to specify all the styles again in <td> that contain any text content.

If you declared your font in <td> and it is not working, then you are resetting it by another style or tag, or have a typo, or are using wrong font family.

For further reference: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

PS. I'm not sure if your code is okay, try running it through validator: http://validator.w3.org/

leinverheij, 1 year ago

Outlook 2007/2010/2013 don't use the fall back font, but Times New Roman.
To get the right fall back font in Outlook use this code in the head.

<!--[if gte mso 9]>
    <style>
       /* Target Outlook 2007 and 2010 */
           html, body { font-family: Arial, sans-serif !important; } 
           table { font-family: Arial, sans-serif !important; } 
          td { font-family: Arial, sans-serif !important; }   
    }
    </style>
    <![endif]-->

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
1-888-533-8098