Create a Discussion

Outlook Overrides Font to Times New Roman

Bryan Runtu posted 2015-01-08 18:39:18

We need our emails to look good on machines that have Open Sans.

Litmus shows Outlook 07, 10, & 2013 showing these in Times New Roman.
Yet, our clients are receiving these emails in Times New Roman. What am I missing? Any directions or pointers about why Outlook 07, 10, 2013 forces everything to override to Times New Roman?

Below is the code to the email. Please let me know what am I missing

Thanks!

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cloud Server</title>

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," /> 

<meta name="format-detection" content="telephone=no">

<style type="text/css">



@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

html { width: 100%; }
body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
img {border:0; -ms-interpolation-mode:bicubic;}

.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

a:hover {text-decoration:underline !important;}

.images {display:block !important; width:100% !important;}


/* MEDIA QUIRES */

@media only screen and (max-width:640px)

{

body {width:auto!important;}
table[class=devicewidth] {width:70%!important;}
table[class=devicewidth] table {width:100%!important;}
}



@media only screen and (max-width:480px)

{
table[class=devicewidth] {width:80%!important;}

}

</style>

</head>

<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0">



    <!-- HEADER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" class="devicewidth" style="background:#000000; border-radius:3px 3px 0 0;">
              <tr>
                <td valign="middle" height="100" style="padding:0 50px;">

                    <table width="105" border="0" cellspacing="0" cellpadding="0" align="center">
                      <tr>
                        <td align="center" valign="middle" height="35"><a href="http://intrinium.com"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/logo.png" alt="logo" width="200" height="73" /></a></td>
                      </tr>
                    </table>
                </td>
              </tr>
            </table>

        </td>
      </tr>
    </table>


    <!-- HEADER OR BANNER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

           <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="devicewidth" style="border-bottom:5px solid #42c0d3;">

              <tr>
                <td style="line-height:0;"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/banner.jpg" alt="image" width="700" style="width:100%;" /></td>


              </tr>
            </table> 
        </td>
      </tr>
    </table>


    <!-- NAME -->



    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#cd0006" class="devicewidth">
              <tr>
                <td height="15">&nbsp;</td>
              </tr>
              <tr>
              <td style="color:#ffffff; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold;  padding-left:50px;">Hello [Contact First Name],</td>
              </tr>


              <tr>
              <td height="15">&nbsp;</td>
              </tr>

            </table>

        </td>
      </tr>
    </table>



    <!-- CONTENT -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

          <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="devicewidth">

              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td align="left" style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; padding:0 50px;">Are you still deciding whether or not to invest in cloud server? <br />
                  <br />
                We thought we would help. </td>
              </tr>
              <tr>
              <td height="30">&nbsp;</td>
              </tr>

            </table>

        </td>
      </tr>
    </table>

    <!-- 3IMAGE/CONTENT -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="devicewidth">
              <tr>
                <td align="left" style="color:#cd0006; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; line-height:20px; padding:0 50px;"><strong>Here are four signs that you should move to the cloud. </strong></td>
              </tr>

             <tr>
              <td height="30">&nbsp;</td>
              </tr>
              <tr>
                <td style="padding:0 50px;">

                   <table width="180" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                      <tr>
                        <td align="left" style="line-height:0;"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/image1.png" width="180" alt="image" /></td>
                      </tr>
                    </table>

                    <table width="5" border="0" cellspacing="0" cellpadding="0" align="left" height="30" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td>&nbsp;</td></tr></table>

                  <table width="60%" border="0" cellspacing="0" cellpadding="0" align="right">
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-transform:uppercase;">Your current IT server is in a serious need an upgrade</td>
                      </tr>


                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;">If your current IT server is out of date, you need to decide whether you should update it or move to the cloud. You could invest in new equipment, but you still have the risk of a server crash, or you could save money and eliminated your server crash crisis plan. </td>
                      </tr>

                    </table>


                </td>
              </tr>
              <tr>
                <td height="40" style="border-bottom:1px solid #eeeeee;">&nbsp;</td>
              </tr>
              <tr>
              <td height="40">&nbsp;</td>
              </tr>
              <tr>
                <td style="padding:0 50px;">

                   <table width="180" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                      <tr>
                        <td align="left" style="line-height:0;"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/image2.png" width="180" alt="image" /></td>
                      </tr>
                    </table>

                    <table width="5" border="0" cellspacing="0" cellpadding="0" align="left" height="30" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td>&nbsp;</td></tr></table>

                    <table width="60%" border="0" cellspacing="0" cellpadding="0" align="left">
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-transform:uppercase;">Your Business is Growing</td>
                      </tr>


                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;">When you have a cloud server it’s much easier to upgrade storage than an IT server, which is vital for a growing business. It will be harder for an IT server to keep up. </td>
                      </tr>

                    </table>

                </td>
              </tr>
              <tr>
                <td height="40" style="border-bottom:1px solid #eeeeee;">&nbsp;</td>
              </tr>
              <tr>
              <td height="40">&nbsp;</td>
              </tr>
            </table>

        </td>
      </tr>
    </table>

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="devicewidth">


              <tr>
                <td style="padding:0 50px;">

                   <table width="180" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                      <tr>
                        <td align="left" style="line-height:0;"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/image3.png" width="180" alt="image" /></td>
                      </tr>
                    </table>

                    <table width="5" border="0" cellspacing="0" cellpadding="0" align="left" height="30" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td>&nbsp;</td></tr></table>

                    <table width="60%" border="0" cellspacing="0" cellpadding="0" align="right">
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-transform:uppercase;">You are opening New Locations</td>
                      </tr>


                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;">Avoid purchasing multiple IT servers for each location of your business, with a cloud server your employees from all locations can access the same server. </td>
                      </tr>

                    </table>


                </td>
              </tr>
              <tr>
                <td height="40" style="border-bottom:1px solid #eeeeee;">&nbsp;</td>
              </tr>
              <tr>
              <td height="40">&nbsp;</td>
              </tr>
              <tr>
                <td style="padding:0 50px;">

                   <table width="180" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                      <tr>
                        <td align="left" style="line-height:0;"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/image4.png" width="180" alt="image" /></td>
                      </tr>
                    </table>

                    <table width="5" border="0" cellspacing="0" cellpadding="0" align="left" height="30" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td>&nbsp;</td></tr></table>

                    <table width="60%" border="0" cellspacing="0" cellpadding="0" align="left">
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-transform:uppercase;">Have Remote Employees</td>
                      </tr>


                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#444444; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;">If you have employees that work from home, a cloud server will be very beneficial, being able to access the companies server from anywhere there is an Internet connection. </td>
                      </tr>

                    </table>

                </td>
              </tr>
              <tr>
              <td height="50">&nbsp;</td>
              </tr>
            </table>







        </td>
      </tr>
    </table>


  <!-- 2 COL -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#cd0006" class="devicewidth">

              <tr>
                <td style="padding:0 50px;">

                    <table width="46%" border="0" cellspacing="0" cellpadding="0" align="left">


                      <tr>
                        <td height="10"></td>
                      </tr>

                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#FFFFFF; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;"><strong>Toll-Free: <a href="tel:8664615099 " style="text-decoration:none;border:none;color:#ffffff;">866.461.5099</a></strong><br />
                          <br />
                          Spokane, WA (HQ): <a href="tel:5094651234" style="text-decoration:none;border:none;color:#ffffff;">509.465.1234</a> <br />
                          Seattle, WA: <a href="tel:2062741355" style="text-decoration:none;border:none;color:#ffffff;">206.274.1355</a> <br />
                          Pasco, WA: <a href="tel:5094169119" style="text-decoration:none;border:none;color:#ffffff;">509.416.9119</a> <br />
                          Olympia, WA: <a href="tel:3607014306" style="text-decoration:none;border:none;color:#ffffff;">360.701.4306</a> <br />
                          <br />
                        Portland, OR: <a href="tel:5037644244" style="text-decoration:none;border:none;color:#ffffff;">503.764.4244</a></td>
                      </tr>

                      <tr>
                <td height="10">&nbsp;</td>
              </tr>


                    </table>


                    <table width="46%" border="0" cellspacing="0" cellpadding="0" align="right">


                      <tr>
                        <td height="10"></td>
                      </tr>

                      <tr>
                        <td height="10"></td>
                      </tr>
                      <tr>
                        <td style="color:#FFFFFF; font-family:Open Sans, Arial, Helvetica, sans-serif; font-size:13px; line-height:20px;">San Antonio, TX: <a href="tel:2108810706" style="text-decoration:none;border:none;color:#ffffff;">210.881.0706</a> <br />
                          <br />
                          <strong>Mailing Address:</strong><br />
                        <a href="https://www.google.com/maps/place/Intrinium/@47.653329,-117.413638,15z/data=!4m2!3m1!1s0x0:0xf96eba7475e9715c" style="color:#ffffff; text-decoration:none;">Intrinium 609 N Argonne Rd Spokane Valley, WA 99212</a></td>
                      </tr>
                      <tr>
                <td height="10">&nbsp;</td>
              </tr>
                    </table>                

                </td>
              </tr>

            </table>

        </td>
      </tr>
    </table>

    <!-- FOOTER -->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#4f595b">
      <tr>
        <td>

            <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="devicewidth">
              <tr>
              <td>&nbsp;</td>
              </tr>
              <tr>
                <td style="padding:0 50px;">


                    <table width="480" border="0" cellspacing="0" cellpadding="0" align="center">
                      <tr>
                        <td align="center">
                            <a href="https://www.facebook.com/pages/Intrinium/154891544582822"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/facebook.png" width="45" alt="images" /></a><span>&nbsp;</span>
                            <a href="https://twitter.com/Intrinium"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/twitter.png" width="45" alt="images" /></a><span>&nbsp;</span>
                            <a href="http://www.linkedin.com/company/intrinium_networks_it_security"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/linkedin.png" width="45" alt="images" /></a><span>&nbsp;</span>
                            <a href="https://www.youtube.com/user/intrinium"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/youtube.png" width="45" alt="images" /></a><span>&nbsp;</span>
                            <a href="http://intrinium.com/blog/"><img src="http://lead-launcher.s3.amazonaws.com/Intrinium-Cloud-Server/images/blog.png" width="45" alt="images" /></a>
                        </td>
                      </tr>
                    </table> 


                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>

            </table>

        </td>
      </tr>
    </table>


</body>
</html>

Steve Redden replied 2015-11-26 11:43:50

Hi,

I tried a number of the suggestions below and many didn't work but have come up with something that works for me and uses bits of a couple of suggestions below:-

I have added this as the first bit of code after the <body> tag.

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->

It will only render in Outlook and sets the default font for the body, table and td elements on the whole document so no need to add a class everywhere you have text.

Hope it saves some hair pulling.

Steve

PS Add other tags if required such as h1, h2, li to deal with headlines and lists :o)

Reply to Steve Redden

Kristina Wright replied 2015-12-03 13:26:35

Thanks so much for this! Tried several options but this one did exactly what I wanted. Saved me a lot of time and still have most of my hair left!

Ted Fitzpatrick replied 2016-02-25 22:51:16

Thanks Steve, this technique worked for me also! Ted

Andrew Hoehn replied 2016-02-05 01:46:25

You're a hero. This is the best, easiest solution I've come across for this issue.

Elvis Travancic replied 2018-03-06 18:54:10

Fantastic! This just saved me a few hours.

Justin Gmail replied 2015-12-01 00:13:35

This is an interesting approach! Instead of trying to hide the webfont from Outlook, you explicitly set the font to Arial only in Outlook.

James White replied 2015-12-01 10:17:31

I find this approach is the best as well. Even when various defensive methods like use @media to load custom fonts, single quotes on custom font stacks etc. I have still noticed in some cases Times New Roman will creep in on Inbox Inspections.

Using a MSO conditional makes sense as you can safely target generic selectors where text is going to be contained like td, span without having to use additional classes. A rather clean solution that's easier to maintain.

Justin Gmail replied 2015-12-01 11:54:31

The reason why we see erratic cases of fonts sometimes still rendering in Times New Roman (TNR) even though precaution is taken to not load the font in Outlook is because Outlook caches @font-face declarations (until app restart).

Normally, if you hide the @font-face declaration from Outlook, you can refer to custom fonts inline and Outlook will fallback to the next declared font such as Arial because to Outlook, the font "doesn't exist".

ie. <span style="font-family:'Open Sans', Arial">

However if another email uses the same custom font but DOESN'T hide the @font-face declaration (or @import or linked stylesheet), then Outlook caches that declaration and will cause subsequent uses of the font to render in TNR.

This is all due to the fact that Outlook seems to process @font-face declarations but fail to load the font for some reason and causing it to treat the declared font as TNR.

Front-End Dcode replied 2016-09-05 19:59:39

Great explanation.

I implemented my solution this way:

// inside head tag
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,800" rel="stylesheet" />
<!--<![endif]-->

// in your html as usual
<span style="font-family:'Open Sans', Arial">

Seems to work.

Cuponatic Latam SpA replied 2016-09-05 21:20:54

This didn't work for me

Front-End Dcode replied 2016-09-05 23:14:43

Hi Camilo,

I didn't have an outlook desktop app to test, so I just rely on litmus client testing.
Can I get more informations about your feedback? I really like to know if I can rely on this trick.
Where you able to test this on a true native app?

I did launch an "obvious" test on litmus (everybody can recognise this dear 'Comic Sans MS'):

https://litmus.com/checklist/emails/public/9142891

It seems to work because:
1. Baloo Tamma is used where web fonts is supported
2. Comic Sans ms where it's not (No "Times New Roman" on outlook)
3. or else sans-serif

also add a check for the !mso conditional comment

Thanks for your feedback.

Update:

There's the same test without conditional comment above link to google font:
https://litmus.com/checklist/emails/public/1020e51

Cuponatic Latam SpA replied 2015-12-01 16:23:44

Nice solution! It works perfectly.

Web Updates replied 2016-11-30 22:21:56

Worked like a charm, thank you!

Nathan Keen replied 2020-10-22 01:46:51

Strangely, this didn't work for an issue with Times New Roman on lists (the first number of an ol was ignoring font-family and color, but the following worked (not even adding a class worked):

Zach Freed replied 2016-12-01 00:27:03

Yes...this is similar to my updated approach...except I don't even mess with MSO anymore because, well yeah I don't wanna mess with the MSO anymore (who does, honestly?).

This has to be done a bit clunky. I've found that trying a 'minified' style does not work at all in Outlook or OWA...and trying to combine all various tags/selectors/classes doesn't really work, so I go with this hideously ugly solution. I could probably cut some stuff down, but this is the version I'm at for now. A few extra lines are a small price to pay to never have to see Times New Roman ever again.

This solution also removes the need to ever call "font-family" inline or in your css, unless you want to do something specific with a separate font. Overrides will work because nothing is tagged with !important, so you have a lot of flexibility after the fact.

Sitting right below the body tag, of course...

<style type="text/css">
  @media screen {
      @font-face { font-family: 'Helvetica Neue'; font-style:normal; src: local(Helvetica Neue Regular), local(HelveticaNeueRegular), local(HelveticaNeueMed); }
      @font-face { font-family: 'Helvetica Neue'; font-style:bold; src: local(Helvetica Neue Bold), local(HelveticaNeueBold), local(HelveticaNeueBd); }
    }
    * { font-family:'Helvetica Neue', Arial, sans-serif; }
    html { font-family:'Helvetica Neue', Arial, sans-serif; }
    body { font-family:'Helvetica Neue', Arial, sans-serif; }
    table { font-family:'Helvetica Neue', Arial, sans-serif; }
    td { font-family:'Helvetica Neue', Arial, sans-serif; }
    th { font-family:'Helvetica Neue', Arial, sans-serif; }
    p { font-family:'Helvetica Neue', Arial, sans-serif; }
    span { font-family:'Helvetica Neue', Arial, sans-serif; }
    div { font-family:'Helvetica Neue', Arial, sans-serif; }
    a { font-family:'Helvetica Neue', Arial, sans-serif; }
    img { font-family:'Helvetica Neue', Arial, sans-serif; }
    .msoNormal { font-family:'Helvetica Neue', Arial, sans-serif; }
    .MsoNormal { font-family:'Helvetica Neue', Arial, sans-serif; }
    .externalclass { font-family:'Helvetica Neue', Arial, sans-serif; }
</style>

IT Purchasing replied 2017-11-01 19:58:53

I'm experiencing the same problem and I haven't been able to resolve it. Can anyone help? I tried adding the code Steven suggested. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <!-- NAME: 1 COLUMN -->
    <!--[if gte mso 15]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>*|MC:SUBJECT|*</title>
    <!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
    <!--<![endif]-->

  <style type="text/css">
        p{
            margin:10px 0;
            padding:0;
        }
        table{
            border-collapse:collapse;
        }
        h1,h2,h3,h4,h5,h6{
            display:block;
            margin:0;
            padding:0;
        }
        img,a img{
            border:0;
            height:auto;
            outline:none;
            text-decoration:none;
        }
        body,#bodyTable,#bodyCell{
            height:100%;
            margin:0;
            padding:0;
            width:100%;
        }
        #outlook a{
            padding:0;
            text-decoration:none;
        }
        img{
            -ms-interpolation-mode:bicubic;
        }
        table{
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        .ReadMsgBody{
            width:100%;
        }
        .ExternalClass{
            width:100%;
        }
        p,a,li,td,blockquote{
            mso-line-height-rule:exactly;
        }
        a[href^=tel],a[href^=sms]{
            color:inherit;
            cursor:default;
            text-decoration:none;
        }
        p,a,li,td,body,table,blockquote{
            -ms-text-size-adjust:100%;
            -webkit-text-size-adjust:100%;
        }
        .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
            line-height:100%;
        }
        a[x-apple-data-detectors]{
            color:inherit !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        #bodyCell{
            padding:10px;
        }
        .templateContainer{
            max-width:600px !important;
        }
        a.mcnButton{
            display:block;
        }
        .mcnImage{
            vertical-align:top;
        }
        .mcnTextContent{
            word-break:break-word;
        }
        .mcnTextContent img{
            height:auto !important;
        }
        .mcnDividerBlock{
            table-layout:fixed !important;
        }
        body,#bodyTable{
            background-color:#F7F8F8;
        }
        #bodyCell{
            border-top:0;
        }
        .templateContainer{
            border:0;
        }
        h1{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:18px;
            font-style:normal;
            font-weight:600;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h2{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:16px;
            font-style:normal;
            font-weight:100;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h3{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:20px;
            font-style:normal;
            font-weight:bold;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h4{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:18px;
            font-style:normal;
            font-weight:bold;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        #templatePreheader{
            background-color:#F7F8F8;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:9px;
            padding-bottom:9px;
        }
        #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:12px;
            line-height:150%;
            text-align:left;
            font-weight:normal;
        }
        #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
            color:#777777;
            font-weight:normal;
            text-decoration:none;
        }
        #templateHeader{
            background-color:#FFFFFF;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:0;
            padding-bottom:0;
        }
        #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:14px;
            line-height:150%;
            text-align:left;
        }
        #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
            color:#34383F;
            font-weight:bold;
            text-decoration:underline;
        }
        #templateBody{
            background-color:#ffffff;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:0;
            padding-bottom:9px;
        }
        #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:14px;
            line-height:150%;
            text-align:center;
        }
        #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
            color:#357BAB;
            font-weight:normal;
            text-decoration:none;
            text-align:center;
        }
        #templateFooter{
            background-color:#F7F8F8;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:9px;
            padding-bottom:9px;
        }
        #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
            background-color:#F7F8F8;
            color:#999999;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:12px;
            line-height:150%;
            text-align:center;
        }
        #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
            color:#999999;
            font-weight:bold;
            text-decoration:none;
        }
    @media only screen and (min-width : -94px ){
        .templateContainer{
            width:600px !important;
        }

}   @media only screen and (max-width: 480px){
        body,table,td,p,a,li,blockquote{
            -webkit-text-size-adjust:none !important;
        }

}   @media only screen and (max-width: 480px){
        body{
            width:100% !important;
            min-width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        #bodyCell{
            padding-top:10px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImage{
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer{
            max-width:100% !important;
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnBoxedTextContentContainer{
            min-width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupContent{
            padding:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
            padding-top:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
            padding-top:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardBottomImageContent{
            padding-bottom:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupBlockInner{
            padding-top:0 !important;
            padding-bottom:0 !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupBlockOuter{
            padding-top:9px !important;
            padding-bottom:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnTextContent,.mcnBoxedTextContentColumn{
            padding-right:18px !important;
            padding-left:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
            padding-right:18px !important;
            padding-bottom:0 !important;
            padding-left:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcpreview-image-uploader{
            display:none !important;
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        h1{
            font-size:20px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h2{
            font-size:20px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h3{
            font-size:18px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h4{
            font-size:16px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templatePreheader{
            display:block !important;
        }

}   @media only screen and (max-width: 480px){
        #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
            font-size:16px !important;
            line-height:150% !important;
            background-color:#FAFAFA;
        }

}   @media only screen and (max-width: 480px){
        #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
            font-size:16px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        table#canspamBar td{
            font-size:14px !important;
        }

}   @media only screen and (max-width: 480px){
        table#canspamBar td a{
            display:block !important;
            margin-top:10px !important;
        }

}       p{
            margin:10px 0;
            padding:0;
        }
        table{
            border-collapse:collapse;
        }
        h1,h2,h3,h4,h5,h6{
            display:block;
            margin:0;
            padding:0;
        }
        img,a img{
            border:0;
            height:auto;
            outline:none;
            text-decoration:none;
        }
        body,#bodyTable,#bodyCell{
            height:100%;
            margin:0;
            padding:0;
            width:100%;
        }
        #outlook a{
            padding:0;
        }
        img{
            -ms-interpolation-mode:bicubic;
        }
        table{
            mso-table-lspace:0;
            mso-table-rspace:0;
        }
        .ReadMsgBody{
            width:100%;
        }
        .ExternalClass{
            width:100%;
        }
        p,a,li,td,blockquote{
            mso-line-height-rule:exactly;
        }
        a[href^=tel],a[href^=sms]{
            color:inherit;
            cursor:default;
            text-decoration:none;
        }
        p,a,li,td,body,table,blockquote{
            -ms-text-size-adjust:100%;
            -webkit-text-size-adjust:100%;
        }
        .ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{
            line-height:100%;
        }
        a[x-apple-data-detectors]{
            color:inherit !important;
            text-decoration:none !important;
            font-size:inherit !important;
            font-family:inherit !important;
            font-weight:inherit !important;
            line-height:inherit !important;
        }
        #bodyCell{
            padding:10px;
        }
        .templateContainer{
            max-width:600px !important;
        }
        a.mcnButton{
            display:block;
        }
        .mcnImage{
            vertical-align:top;
        }
        .mcnTextContent{
            word-break:break-word;
        }
        .mcnTextContent img{
            height:auto !important;
        }
        .mcnDividerBlock{
            table-layout:fixed !important;
        }
        body,#bodyTable{
            background-color:#F7F8F8;
        }
        #bodyCell{
            border-top:0;
        }
        .templateContainer{
            border:0;
        }
        h1{
            color:#666666;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:24px;
            font-style:normal;
            font-weight:400;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h2{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:16px;
            font-style:normal;
            font-weight:100;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h3{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:20px;
            font-style:normal;
            font-weight:bold;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        h4{
            color:#34383F;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:18px;
            font-style:normal;
            font-weight:bold;
            line-height:125%;
            letter-spacing:normal;
            text-align:center;
        }
        #templatePreheader{
            background-color:#F7F8F8;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:9px;
            padding-bottom:9px;
        }
        #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:12px;
            line-height:150%;
            text-align:left;
            font-weight:normal;
        }
        #templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{
            color:#666666;
            font-weight:normal;
            text-decoration:none;
            text-align:left;
        }
        #templateHeader{
            background-color:#FFFFFF;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:0;
            padding-bottom:0;
        }
        #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:14px;
            line-height:150%;
            text-align:left;
        }
        #templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{
            color:#34383F;
            font-weight:bold;
            text-decoration:underline;
            text-align:left;
        }
        #templateBody{
            background-color:#ffffff;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:0;
            padding-bottom:0;
            text-align:left;
        }
        #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
            color:#777777;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:14px;
            line-height:150%;
            text-align:left;
        }
        #templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{
            color:#357BAB;
            font-weight:normal;
            text-decoration:none;
            text-align:center;
        }
        #templateFooter{
            background-color:#F7F8F8;
            background-image:none;
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-top:0;
            border-bottom:0;
            padding-top:9px;
            padding-bottom:9px;
        }
        #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
            color:#999999;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-size:12px;
            line-height:150%;
            text-align:center;
        }
        #templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{
            color:#999999;
            font-weight:bold;
            text-decoration:none;
        }
    @media only screen and (min-width : -94px ){
        .templateContainer{
            width:600px !important;
        }

}   @media only screen and (max-width: 480px){
        body,table,td,p,a,li,blockquote{
            -webkit-text-size-adjust:none !important;
        }

}   @media only screen and (max-width: 480px){
        body{
            width:100% !important;
            min-width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        #bodyCell{
            padding-top:10px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImage{
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer{
            max-width:100% !important;
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnBoxedTextContentContainer{
            min-width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupContent{
            padding:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{
            padding-top:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardTopImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{
            padding-top:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardBottomImageContent{
            padding-bottom:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupBlockInner{
            padding-top:0 !important;
            padding-bottom:0 !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageGroupBlockOuter{
            padding-top:9px !important;
            padding-bottom:9px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnTextContent,.mcnBoxedTextContentColumn{
            padding-right:18px !important;
            padding-left:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{
            padding-right:18px !important;
            padding-bottom:0 !important;
            padding-left:18px !important;
        }

}   @media only screen and (max-width: 480px){
        .mcpreview-image-uploader{
            display:none !important;
            width:100% !important;
        }

}   @media only screen and (max-width: 480px){
        h1{
            font-size:20px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h2{
            font-size:20px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h3{
            font-size:18px !important;
            line-height:125% !important;
        }

}   @media only screen and (max-width: 480px){
        h4{
            font-size:16px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        .mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templatePreheader{
            display:block !important;
        }

}   @media only screen and (max-width: 480px){
        #templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{
            font-size:16px !important;
            line-height:150% !important;
            background-color:#FAFAFA;
        }

}   @media only screen and (max-width: 480px){
        #templateBody .mcnTextContent,#templateBody .mcnTextContent p{
            font-size:16px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        #templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{
            font-size:14px !important;
            line-height:150% !important;
        }

}   @media only screen and (max-width: 480px){
        table#canspamBar td{
            font-size:14px !important;
        }

}   @media only screen and (max-width: 480px){
        table#canspamBar td a{
            display:block !important;
            margin-top:10px !important;
        }

}       table.c23{
            background-color:#F7F8F8;
        }
        td.c22{
            padding-top:20px;
            padding-bottom:20px;
            background-color:#F7F8F8;
        }
        td.c21{
            color:#606060;
            background-color:#F7F8F8;
            font-family:Helvetica,Arial,sans-serif;
            font-size:11px;
            line-height:150%;
            padding-right:20px;
            padding-bottom:5px;
            padding-left:20px;
            text-align:center;
        }
        a.c20{
            color:#404040 !important;
        }
        div.c19{
            text-align:center;
        }
        td.c18{
            padding:9px;
        }
        td.c17{
            padding-left:9px;
            padding-right:9px;
        }
        td.c16{
            padding-top:6px;
            padding-right:9px;
            padding-left:9px;
        }
        table.c15{
            max-width:100%;
            min-width:100%;
        }
        td.c14{
            padding-top:0;
            padding-right:18px;
            padding-bottom:9px;
            padding-left:18px;
        }
        td.c13{
            -webkit-border-radius:10px;
            background-color:#265576;
            border-radius:8px;
            padding-bottom:15px;
            padding-left:20px;
            padding-right:20px;
            padding-top:15px;
            text-align:center;
        }
        span.c12{
            font-size:17px !important;
            font-family:'Lato',Helvetica,Arial,sans-serif;
            font-weight:300;
            color:#ffffff;
            text-decoration:none;
            display:inline-block;
        }
        span.c11{
            color:#777777;
        }
        td.c10{
            padding:0;
        }
        td.c9{
            padding-right:0;
            padding-left:0;
            padding-top:0;
            padding-bottom:0;
        }
        table.c8{
            width:564px;
        }
        img.c7{
            max-width:600px;
            padding-bottom:0;
            display:inline !important;
            vertical-align:bottom;
        }
        table.c6{
            min-width:100%;
        }
        td.c5{
            padding-top:9px;
        }
        table.c4{
            max-width:210px;
        }
        td.c3{
            padding-top:0;
            padding-left:18px;
            padding-bottom:9px;
            padding-right:18px;
            font-size:12px;
            font-weight:600;
        }
        table.c2{
            max-width:390px;
        }
        td.c1{
            padding-top:0;
            padding-left:18px;
            padding-bottom:9px;
            padding-right:18px;
            font-size:12px;
            font-weight:600;
        }
</style></head>
  <body style="height: 100%;margin: 0;padding: 0;width: 100%;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F7F8F8;">
    <div class="c19" style="text-align:center;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100%;margin:0;padding:0;width:100%;background-color:#F7F8F8;">
        <tr>
          <td align="center" valign="top" id="bodyCell" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100%;margin:0;padding:10px;width:100%;border-top:0;">
            <!-- BEGIN TEMPLATE // -->
            <!--[if gte mso 9]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;">
              <tr>
                <td align="center" valign="top" width="600" style="width:600px;">
                  <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;border:0;max-width:600px !important;">
              <tr>
                <td valign="top" id="templatePreheader" style="background:#F7F8F8 none no-repeat;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#F7F8F8;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:9px;padding-bottom:9px;">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock c6" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-width:100%;">
                    <tbody class="mcnTextBlockOuter">
                      <tr>
                        <td valign="top" class="mcnTextBlockInner c5" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-top:9px;">
                          <!--[if mso]>
                          <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
                            <tr>
                              <![endif]-->
                          <!--[if mso]>
                          <td valign="top" width="390" style="width:390px;">
                            <![endif]-->
                          <!--[if mso]>
                        </td>
                        <![endif]-->
                          <!--[if mso]>
                          <td valign="top" width="210" style="width:210px;">
                            <![endif]-->
                          <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextContentContainer c4" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;max-width:210px;">
                            <tbody>
                              <tr>
                                <td valign="top" class="mcnTextContent c3" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-top:0;padding-left:18px;padding-bottom:9px;padding-right:18px;font-size:12px;font-weight:normal;color:#777777;font-family:Lato, Helvetica, Arial, sans-serif;line-height:150%;text-align:left;">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <!--[if mso]>
                        </td>
                        <![endif]-->
                          <!--[if mso]>
                        </tr>
                      </table>
                      <![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td valign="top" id="templateHeader" style="background:#FFFFFF none no-repeat;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#FFFFFF;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0;padding-bottom:0;">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock c6" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-width:100%;">
                    <tbody class="mcnImageBlockOuter">
                      <tr>
                        <td valign="top" class="mcnImageBlockInner c10" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding:0;">
                          <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer c6" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-width:100%;">
                            <tbody>
                              <tr>
                                <td class="mcnImageContent c9" valign="top" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-right:0;padding-left:0;padding-top:0;padding-bottom:0;">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
              <tr>
                <td valign="top" id="templateBody" style="background:#ffffff none no-repeat;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#ffffff;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0;padding-bottom:0;text-align:left;">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock c6" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;min-width:100%;">
                    <tbody class="mcnTextBlockOuter">
                      <tr>
                        <td valign="top" class="mcnTextBlockInner c5" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-top:9px;">
                          <!--[if mso]>
                          <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
                            <tr>
                              <![endif]-->
                          <!--[if mso]>
                          <td valign="top" width="600" style="width:600px;">
                            <![endif]-->
                          <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextContentContainer c15" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;max-width:100%;min-width:100%;">
                            <tbody>
                              <tr>
                                <td valign="top" class="mcnTextContent c14" style="mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;padding-top:0;padding-right:18px;padding-bottom:9px;padding-left:18px;color:#777777;font-family:Lato, Helvetica, Arial, sans-serif;font-size:14px;line-height:150%;text-align:left;">
                                  <img align="left" src="https://gallery.mailchimp.com/5c997338a4bad2219342a3f6f/images/3ee68e17-6f26-43bc-8d90-7c1e4956cca8.png" width="72" style="max-width: 72px;padding-top: 15px;padding-left: 10px;padding-bottom: 0;display: inline !important;vertical-align: bottom;border: 0;height: auto !important;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" class="mcnImage" alt="3ee68e17-6f26-43bc-8d90-7c1e4956cca8.png">
                                  <br>
                                  <br>
                                  <br>
                                  <h1 style="display:block;margin:0;padding:0;color:#666666;font-family:Lato, Helvetica, Arial, sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:125%;letter-spacing:normal;text-align:center;">Lorem Ipsum Dolor Sitar En</h1>
                                  <p style="text-align:center;margin:10px 0;padding:0;mso-line-height-rule:exactly;-ms-text-size-adjust:10%;-webkit-text-size-adjust:100%;color:#777777;font-family:Lato, Helvetica, Arial, sans-serif;font-size:14px;line-height:150%;"><img src="https://gallery.mailchimp.com/5c997338a4bad2219342a3f6f/images/95b33802-9069-41c3-aa7e-d5a3347b2030.png" style="border: 0;height: auto !important;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="95b33802-9069-41c3-aa7e-d5a3347b2030.png">
                                  </p>
                                  <p style="text-align:center;padding-left:30px;padding-right:30px;font-family:Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:100%;margin:10px 0;padding:0;mso-line-height-rule:exactly;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#777777;font-size:14px;"><span style="font-size:14px; line-height:150%"><span style="color:#666666">
Ferri adversarium an eos, id pro indoctum repudiare, ad eos aliquid consectetuer. Eloquentiam comprehensam no mel, nec mutat reque moderatius ne, eos cu suas veniam. Partem quaestio facilisis no usu, duo ex tamquam sententiae, per ceteros molestiae adolescens te. Doming mollis verear sed an. Ut nostro civibus mea, pri at ludus nostrum praesent.</span></span>
                                </p>
                                <p style="text-align:center;padding-left:30px;padding-right:30px;font-family:Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:100%;margin:10px 0;padding:0;mso-line-height-rule:exactly;-ms-text-s

Izaias Di Araújo replied 2016-03-14 20:38:47

Thank you!

Nicholas Rowan replied 2016-02-19 16:42:09

Hello Steve :)

Marianna Peracchi replied 2016-03-21 18:44:35

Thank you so much! You made my day!

Melissa Infantino replied 2017-05-25 18:41:53

THIS HELPED SO MUCH. I was just going to rip all my hair out. Thank you!

Tim Hicks replied 2016-01-21 22:37:46

THANK YOU so much. I tried many other solutions, and none would work for me. This worked, and it's so simple!

Jason Rodriguez replied 2015-01-08 19:14:19

This is a known issue in Outlook. Despite your fallback fonts being declared, Outlook will fall back to Times New Roman. Check out this blog post for some information on how to combat that and have Outlook display your fallbacks in the absence of web fonts.

Reply to Jason Rodriguez

Desiree David replied 2016-09-01 16:21:54

Thank you, Jason! Reading this article now and it's a great reference.

Jason Rodriguez replied 2016-09-01 16:49:48

Awesome, glad to hear it!

Michele Lougheed replied 2016-11-28 01:17:47

I have used many of the workarounds discussed here and have been able to solve the issue of emails rendering in Helvetica instead of Times New Roman in Outlook for PC users. However, when the email is then forwarded or replied to, all text in <p> tags defaults back to Times New Roman! Text wrapped in span and h tags stays in Helvetica, but not <p>. Has anyone else observed this behaviour and do you have any ideas?

Reply to Michele Lougheed

poornima sekar replied 2016-03-15 01:46:27

Hi,

I fixed my problem using the below coding.

    <!--[if gte mso 10]>

    <style type="text/css" media="all">

         /* Outlook 2013 Height Fix */


         body, table, td { font-family: Arial, Helvetica, sans-serif !important;}


    </style>

<![endif]-->

Reply to poornima sekar

Nicole Merlin replied 2016-03-15 02:30:23

Yep, I second this solution! Nice and easy, minimal markup. It also means that if you are just using one typeface you can just specify its font family once on your main wrapper element and it will be inherited by every child (as per typical css behaviour) in all other clients. More importantly there is no need to worry about doing anything fancy with your webfont, you can just include it once as part of a normal font stack.

The only thing I would do differently to Poornima's example is that I use <!--[if mso]> (no need to be any more specific) and {font-family: sans-serif;} (again, usually there is no need to be any more specific as it will automatically pick Arial in most cases).

Neeta Ramsisaria replied 2015-01-15 11:03:31

Hi,

I tried alot, Let me clear one thing first, Email templates will always render Arial font by default. But if in case the font is rendered in Times New Roman.
Then add this:

<!--[if !mso]><!-->
<style>
.....
</style>
<!--<![endif]-->

Your default font will get rendered that is Arial. But Times New Roman will not come. Just check this out : https://litmus.com/pub/21c58cb
I tested in three clients Outlook 7, 10, 13.

Reply to Neeta Ramsisaria

Bryan Runtu replied 2015-01-15 15:38:01

WoW! That was simple and it works! Thanks man!!

Rob Fischer replied 2015-06-11 23:30:51

Thanks for this, can you confirm where in the html I put this code?

I assume I need to specify the style? So to force Arial It should be:

<!--[if !mso]><!-->
<style ="font-family:Arial, Helvetica, sans-serif>"
</style>
<!--<![endif]--

Have I got that right?

Rob Fischer replied 2015-06-11 23:39:26

Guessing that's not right, because I just tried it and it didn't seem to make any difference.

Jaina Mistry replied 2015-06-12 10:01:49

I create a fallback class for anything Outlook related to fallback to Arial, and it's worked for me perfectly. Use the class wherever you are using your web font.

Rick N replied 2015-11-21 07:47:50

By removing any reference to sans-serif and replacing it with 'tahoma', Outlook ditched falling back to Times.

font-family: Arial, 'tahoma';

Reply to Rick N

Cosmin Popovici replied 2017-11-02 14:52:36

Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.

I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...

1. Base typography reset

In your embedded CSS, reset the typography first. Using a Bootstrap 4-inspired system font stack here, but use whatever system fonts you like. Also keep in mind that some clients won't support tag selectors - that's why I included a class, which you can use on your cells, for example.

.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}

I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.

2. Webfonts import

Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
        .column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
      }

What's cool about this is that you can import multiple fonts and assign them to classes that you add to your cells/paragraphs/headings. So you can have a certain font for headings while using a different one for the body copy:

Here's an example of what I usually do:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
  .serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
  .sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}

Of course, if you want the webfonts to fallback to that same system fonts stack, you must include it in the media query as well, as it uses !important to override the reset above. I just used sans-serif to keep it short.

Hope this helps :)

Reply to Cosmin Popovici

Cosmin Popovici replied 2017-11-02 14:55:05

Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.

I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...

1. Base typography reset

.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}

I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.

2. Webfonts import

Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
        .column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
      }

Here's an example of what I usually do:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
  .serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
  .sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}

Hope this helps :)

Reply to Cosmin Popovici

Cosmin Popovici replied 2017-11-02 14:57:21

Old discussion, but hey, I just got it in my Litmus Community email today, so thought I might chime in.

I see most people recommending Outlook-specific commented styles. I find that an unnecessary extra piece of code - you can do it much cleaner, without always resorting to Outlook comments...

1. Base typography reset

.column, th, td, div, p {-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 24px;}

I've tested this and it works across the board, including all Outlook clients and Windows 10 Mail.

2. Webfonts import

Instead of inlining the webfont family (which triggers Times New Roman in Outlook), apply the webfont in a media query. All clients that support webfonts will support this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@media only screen {
  .column, td, div, p {font-family: 'Open Sans', sans-serif !important;}
}

Here's an example of what I usually do:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700');
@media only screen {
  .serif {font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;}
  .sans-serif {font-family: 'Open Sans', Arial, sans-serif !important;}
}

Hope this helps :)

Reply to Cosmin Popovici

Taylor Langdon replied 2015-12-04 15:54:13

Hey there,

I recently got Open Sans to work well on my emails and make Outlook default to Arial. I'll paste some of the code I used in order to help you.

In style, put the following (and include the if mso above it):

<!--[if mso]>
<style> body,table tr,table td,a, span {  font-family:Arial, Helvetica, sans-serif !important;  }</style>
<!--<![endif]-->
<style type="text/css">
     @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
     body { font-family: 'Open Sans', arial, sans-serif !important; }
</style>

Here is an example of what you want to do with your text part (example of a row):

<tr>
     <td style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:15px;color:#ffffff; " valign="top"><span style="font-family:'Open Sans', arial, sans-serif !important; color:#ffffff !important;margin: 0 !important;font-size:13px !important;line-height:15px !important;font-weight:200 !important;">TEXT GOES HERE.</span></td>
</tr>

Myself and my team tested this extensively and it worked very well. Best of luck!

Reply to Taylor Langdon

Alan Harris replied 2017-11-02 22:46:22

Hi Bryan, I think it's because you're importing Open Sans, which is not a web-safe font. You can use conditional formatting in the <head> section with conditional formatting for Outlook using <!--[if mso]> to force Outlook to use your web-safe fallback fonts. Here is a guide with more info.

Reply to Alan Harris

Raghavendra Yadalam replied 2015-12-07 06:58:39

Hey ! Yeah landed on the right page. We have same kind of issue and not sure why the text appears to be Times New Roman instead of the one we actually defined in the source code. Appreciate your help.

Reply to Raghavendra Yadalam

poornima sekar replied 2016-03-15 01:03:15

Hi,
Now I am unable to set the font -size in Arial. If I use arial font size:18px,my browser(google chrome) is quite ok. But outlook 2013 seems to display the same font-size as font-size:11px ,font-family:arial.How to fix this bug..
I tried setting font-size :18px in every <td> also but no use..Please have a look at my coding below and try in both google chrome and copy paste the same in outlook 2013 and check.You will find the alignment change.

<table border="0" cellpadding="0" cellspacing="0" width="600">
            <tr>
                <td>
                    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" width="600">
                        <tr>
                            <td style="mso-width:20" width="20"  height="10">
                            &nbsp;</td>
                            <td style="mso-width:555" width="555">
                                <table border="0" cellspacing="0" cellpadding="0" width="545" style="mso-table-width:545">  
                                    <tr>
                                        <td width="20"  height="20">
                                            &nbsp;
                                        </td>
                                    </tr>                                                   
                                    <tr>
                                        <td width="555" align="center">
                                            <table border="0" cellspacing="0" cellpadding="0"> 
                                                <tr>

                                                    <td style="font-family:Arial, sans-serif; font-size: 16px;font-weight: normal; color: #000000">
                                                        <font style="font-family:Arial, sans-serif; font-size: 16px; font-weight: normal; color: #000000">Discover how you can fast-track DevOps transformation in your organization. For inquiries, email <a href="mailto:kp@imfs.com.in" target="_blank" style="text-decoration:underline; color:#000000">kp@imfs.com.in</a> or contact your SKE Account Manager.</font>
                                                    </td>
                                                </tr>
                                            </table>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="20" height="20">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table border="0" style="border: 2px solid #01A982" cellpadding="0" cellspacing="0">

                                                <tr>
                                                    <td width="20" height="10">
                                                        &nbsp;
                                                    </td>
                                                    <td style="padding: 10px 0px 10px 0px;font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000000">
                                                        <font style="font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #000000">Register now</font>
                                                    </td>
                                                    <td width="20" height="10">
                                                        &nbsp;
                                                    </td>
                                                </tr>

                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="20" height="10">
                                                        &nbsp;
                                                    </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="mso-width:20" width="20" height="10">
                            &nbsp;</td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>

Reply to poornima sekar

Galo Hernandez replied 2016-12-27 21:39:43

You should use size:1; instead using font-size

Adiba Arif replied 2019-06-17 21:11:07

Hi, I tried every solution mentioned in this thread but litmus is still displaying 'Times New Roman' font for me (on outlook). Below is the code. Please can anyone let me know what am I missing. Thanks in advance.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
  <head> 
    <!-- Marketo Variable Definitions --> 
    <meta class="mktoNumber" id="footerSpacer" mktoname="Footer Top Spacer" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoColor" id="footerBackgroundColor" mktoname="Footer 1 Background Color" default="#00a3bb" mktomodulescope="true" />
    <meta class="mktoString" id="socialLink5" mktoname="Youtube Icon Link" default="http://mylink" mktomodulescope="true" /> 
    <meta class="mktoColor" id="footerBackgroundColor2" mktoname="Footer 2 Background Color" default="#ffffff" mktomodulescope="true" />
    <meta class="mktoNumber" id="twoArticlesSpacer1" mktoname="Left Column Space Below Title" default="5" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoColor" id="ctaButtonBackgroundColor" mktoname="Button Background Color" default="#00a3bb" mktomodulescope="true" /> 
    <meta class="mktoColor" id="ctaBorderColor" mktoname="Button Border Color" default="#00a3bb" mktomodulescope="true" />
    <meta class="mktoNumber" id="fixedSpacer" mktoname="Fixed Space" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoString" id="ctaLinkText" mktoname="Button Label" default="CALL TO ACTION" mktomodulescope="true" /> 
    <meta class="mktoColor" id="headerBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true" /> 
    <meta class="mktoString" id="socialLink" mktoname="Community Icon Link" default="http://mylink" mktomodulescope="true" /> 
    <meta class="mktoNumber" id="twoArticlesSpacer" mktoname="Space Below Title" default="5" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoColor" id="freeTextBackgroundColor" mktoname="Text Background Color" default="#ffffff" mktomodulescope="true" /> 
    <meta class="mktoNumber" id="ctaBorderSize" mktoname="Button Border Size" default="1" min="0" max="20" units="px" step="1" mktomodulescope="true" /> 
    <meta class="mktoString" id="socialLink3" mktoname="Twitter Icon Link" default="http://mylink" mktomodulescope="true" />
    <meta class="mktoString" id="socialLink4" mktoname="Linkedin Icon Link" default="http://mylink" mktomodulescope="true" />
    <meta class="mktoColor" id="mainBannerBackgroundColor" mktoname="Banner Background Color" default="#ffffff" mktomodulescope="true" />
    <meta class="mktoNumber" id="footerSpacer5" mktoname="Footer Spacer Below Right Column" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" /> 
    <meta class="mktoNumber" id="twoArticlesSpacer2" mktoname="Right Column Space Below Title" default="5" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoNumber" id="spacerSpacer" mktoname="Blank Space Height" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
    <meta class="mktoString" id="socialLink2" mktoname="Facebook Icon Link" default="http://mylink" mktomodulescope="true" />
    <meta class="mktoNumber" id="footerSpacer2" mktoname="Footer Spacer Below Left Column" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" /> 
    <meta class="mktoString" id="ctaLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" /> 
    <meta class="mktoColor" id="separatorColor" mktoname="Separator Color" default="#00a3bb" mktomodulescope="true" />
    <meta class="mktoNumber" id="separatorSize" mktoname="Separator Width" default="3" min="0" max="20" units="px" step="1" mktomodulescope="true" /> 
<meta class="mktoNumber" id="separatorSpacer" mktoname="Top Bottom Spacer" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" /> 
<meta class="mktoColor" id="separatorBackgroundColor" mktoname="Module Background" default="#ffffff" mktomodulescope="true" /> 
    <!-- Other Meta Tags --> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
    <meta name="robots" content="noindex,nofollow" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arial" type="text/css" />

<!--[if mso]>
<style type=”text/css”>
.text, .title {
font-family: Arial, sans-serif !important;;
}
</style>
<![endif]-->

    <!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]--> 

    <!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]--> 

<!--[if mso]>
<style type=”text/css”>
.fallback-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
    <style>

      /*startcommon*/
        @media only screen and (max-width: 600px) {

          * {
font-family: Arial, sans-serif !important;
line-height: 1.3;
font-weight: normal;
}

        table#boxing{
          width: 100% !important;
        }


        p{
  padding: 0 !important;
  margin: 0 !important;
}

img.mobile-img{
  width: 100% !important;
  height: auto !important;
}

      }
      /*endcommon*/
    </style> 
    <!--[if gte mso 9]>
        <style type="text/css">
          #hero .table3-3{
          width: 100% !important;
          }
        </style>
    <![endif]--> 
    <style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
  padding: 0;
}

          * {
font-family: Arial, sans-serif !important;
line-height: 1.3;
font-weight: normal;
}

/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
  width: 100%;
}
.ExternalClass {
  width: 100%;
}

p{
  padding: 0 !important;
  margin: 0 !important;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
  color: #00a3bb;
  text-decoration: none;
}
.appleFooter a {
  color: #00a3bb;
  text-decoration: none;
}
@-ms-viewport { 
    width: device-width; 
}


</style> 
    <style media="all">


@media only screen and (max-width: 479px) {
          * {
font-family: Arial, sans-serif !important;
line-height: 1.3;
font-weight: normal;
}
/*startmobile*/

body {
  width: auto !important;
}

p{
  padding: 0 !important;
  margin: 0 !important;
}

table.table600{
  width: 94% !important;
}

table.table600Header{
  width: 100% !important;
}

table.table-headerImg{
  width: 258px !important;
}

table.table-inner{
  width: 100% !important;
  float: none !important;
}

table.table1-2{
  width: 100% !important;
  clear: both;
}

/*table.table1-3{
  width: 100% !important;
  clear: both;
}*/

/*table.table1-4{
  width: 100% !important;
  text-align: center !important;
}
*/
/*table.table2-3{
  width: 100% !important;
  text-align: center !important;
}*/

table.table3-3{
  width: 100% !important;
  text-align: center !important;
  clear: both;
}

/*table.footer-logo{
  width: 60% !important;
  text-align: center !important;
}*/

td.outer{
  min-width: 0 !important;
}

/*td.td3-1{
  width: 60% !important;
  text-align: center !important;
}*/

.stack-smartphone {
  padding-bottom: 20px !important;
  overflow: visible !important;
  float: none !important;
  display: block !important;
  mso-hide: none !important;
}

/*td.center-smartphone{
  text-align: center !important;
}*/

img.mobile-img{
  width: 100% !important;
}

td.center-tablet{
  text-align: center !important;
}

td#center-tablet{
  clear: both;
  text-align: center !important;
}


/*td.hide-smartphone{
  display: none !important;
}*/

/*table.footer-column{
  width: 100% !important;
  text-align: center !important;
}*/

.m_free-image img {
}

.m_hr .table-inner {
  width: 100% !important;
}

/*endmobile*/
}
</style> 


  </head> 
  <body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;"> 
    <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    </div> 
    <!-- Outer table START --> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;"> 
      <tbody> 
        <tr> 
          <td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 400px; border-collapse: collapse; background-color: #ffffff;"> 
            <table width="600" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto;border: 1px solid #c3c7ca;"> 
              <tbody> 
                <tr> 
                  <td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
                    <table id="HeaderSpace" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="mktoModule m_HeaderSpace" mktoname="Header Space"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Arial', sans-serif;border-collapse: collapse;background-color:${separatorBackgroundColor};" bgcolor="${separatorBackgroundColor}" valign="top"> 
                            <table class="table600Header" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
                              <tbody> 
                                <tr> 
                                  <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Arial', sans-serif;border-collapse: collapse;line-height:${separatorSpacer};font-size:${separatorSpacer};" height="${separatorSpacer}">&nbsp;</td> 
                                </tr>
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Title"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody>
                                  <tr style="vertical-align: middle; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"> 
                                    <td class="primary-font title" style="-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;-ms-text-size-adjust: 100%;vertical-align: middle;margin:0px;font-family:'Arial', sans-serif;font-size: 20px;color: #333;letter-spacing: 1px;border-collapse: collapse;line-height:1.3;padding: 0px;"> 
                                      <div class="mktoText" mktoname="Main Title" id="mainTitle">
                                        TITLE
                                      </div> </td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text1" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Black Space"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text2" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Sub-Title"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Arial', sans-serif;font-weight: bold;font-size: 14px;line-height: 1.3;color: #333;border-collapse: collapse;margin:0px;padding: 0px;"> 
                                      <div class="mktoText" mktoname="Main Text" id="text1">
                                        LOREM IPSUM DOLOR SIT AMET
                                      </div></td> 
                                  </tr>   
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text3" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Black Space"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text4" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Plain Text"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Arial', sans-serif;font-size: 14px;line-height:1.3;color: #333;margin:0px;padding: 0px;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Main Text" id="text2">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum officiis dolorum, nulla, mollitia ducimus iure modi perferendis tenetur ea illum veniam aut sapiente deserunt repellendus. Excepturi illo numquam sint harum.
                                      </div></td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text5" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Text with Link"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Arial', sans-serif;font-size: 14px;line-height: 1.3;color: #333;border-collapse: collapse;margin:0px;padding: 0px;"> 
                                      <div class="mktoText" mktoname="Main Text" id="text3">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum officiis dolorum, nulla, mollitia ducimus iure modi perferendis tenetur ea illum veniam aut sapiente <a href="#" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-decoration: none;color: #00a3bb;font-family:'Arial', sans-serif;" class="primary-font">deserunt repellendus</a>. Excepturi illo numquam sint harum.
                                      </div>
                                    </td> 
                                  </tr>
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_free-text" id="free-text6" idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Black Space"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <center> 
                              <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                                <tbody> 
                                  <tr> 
                                    <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}">&nbsp;</td> 
                                  </tr> 
                                </tbody> 
                              </table> 
                            </center> </td> 
                        </tr> 
                      </tbody> 
                    </table>
                    <table class="mktoModule m_two-articles" id="two-articles3" acstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" mktoname="Two Columns"> 
                      <tbody> 
                        <tr> 
                          <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};" bgcolor="${freeTextBackgroundColor}" valign="top"> 
                            <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="470"> 
                              <tbody> 
                                <tr> 
                                  <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;"> 
                                    <center> 
                                      <table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="210"> 
                                        <tbody> 
                                          <tr> 
                                            <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;"> 
                                              <table class="contents" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0"> 
                                                <tbody>  
                                                  <tr> 
                                                    <td class="primary-font title" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family:'Arial', sans-serif;font-weight: bold;font-size: 18px;border-collapse: collapse;margin:0px;padding: 0px;"> 
                                                      <div class="mktoText" mktoname="Left Article Title" id="articleTitle3">
                                                        LOREM IPSUM
                                                      </div> </td> 
                                                  </tr> 
                                                  <tr> 
                                                    <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${twoArticlesSpacer1};font-size:${twoArticlesSpacer1};" height="${twoArticlesSpacer1}">&nbsp;</td> 
                                                  </tr> 
                                                  <tr> 
                                                    <td class="secondary-font text" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;color:#333;text-align: left;font-family:'Arial', sans-serif;font-size: 14px;line-height: 1.3;border-collapse: collapse;margin:0px;padding: 0px;"> 
                                                      <div class="mktoText" mktoname="Left Text" id="text8">
                                                        Gumbo beet greens corn soko endive gumbo gourd. shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
                                                      </div> </td> 
                                                  </tr> 
                                                </tbody> 
                                              </table> </td> 
                                          </tr> 
                                          <tr class="stack-smartphone" style="max-height:0px;overflow:hidden;padding-left: 0; overflow: hidden; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; mso-hide: all; display: none;"> 
                                            <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">&nbsp;</td> 
                                          </tr> 
                                        </tbody> 
                                      </table> 
                                      <table class="table1-2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collap

Reply to Adiba Arif

Zach Freed replied 2019-06-17 22:31:58

Hey Adiba -

I don't think many people check this that often anymore, but did you try this solution?

https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman#comment-9847

Good luck!

Zach

Niven Ranchhod replied 2019-06-18 08:36:44

Adiba, I've just tested in Litmus and I'm not seeing Times New Roman at all in any of the Outlook previews. Can you confirm which preview(s) you're seeing this exactly?

Adiba Arif replied 2019-06-18 15:56:00

@Niven Ranchhod it's working now for me but the line height and the font-weight is little messed up in outlook. I think its because I am using "normal" instead of using a number (400, 500)

Charles Hall replied 2015-12-09 21:18:15

I found this solution from Kate McDonough to work perfectly.
I will now have to try all the other solutions listed here.

Reply to Charles Hall

Neeta Ramsisaria replied 2015-01-12 05:00:24

Yes, this is OUTLOOK issue, but try using !important in inline style:
Like :

<tr>
                        <td style="color:#FFFFFF; font-family:Open Sans, Arial, Helvetica, sans-serif !important; ">San Antonio, TX: <a href="tel:2108810706">210.881.0706</a> <br />
                          </td>
                      </tr>

And Put all the style in-line, not in style. It will be easy for you to debug the code.
Note: And moreover, mailers need to be made with inline-style only.

Reply to Neeta Ramsisaria

Bryan Runtu replied 2015-01-12 20:45:37

Tried it but didn't work :(

Courtney Fantinato replied 2015-01-13 04:04:17

Bryan, read the blog post that Jason posted. It has the answer you're looking for. :)

Courtney Fantinato replied 2015-01-12 20:46:33

That won't work Neeta. Please refer to Jason's comment. It's a known issue that Outlook 07/10/13 don't support web fonts, and that a specific piece of code for Outlook needs to be added to display fallback fonts.

Also, using !important causes Outlook to actually ignore the style.

Rhiannon Grant replied 2018-01-02 01:00:27

Steve Fix was great! Thanks Steve

Reply to Rhiannon Grant

Bryan Runtu replied 2015-01-14 16:30:42

Hey guys,

Thanks for all of your feedback. I tried numerous of steps including the blog that Jason post, but it's still not working for me. Can someone guide me step by step if possible.

Reply to Bryan Runtu

Mark Robbins replied 2015-01-14 16:43:18

Using an unrecognised font in Outlook causes an error that ignores the whole font-family and reverts to the default.
So try this;

Set all your inline fonts as websafe fonts font-family:Arial, Helvetica, sans-serif; don't try and put a webfont here.
in a webkit media query set the webfont an all elements using the universal selector *
@media screen and (-webkit-device-pixel-ratio){ .class { font-family:Open Sans, Arial, Helvetica, sans-serif !important; } }

If you only want it set on certain elements use those selectors instead of the *

That should work for you I think..

-1

Zach Freed replied 2016-05-23 16:11:53

I think everyone's already said their peace on this one, but here's another example that is my go-to.

<!--[if gte mso 10]>
  <style>
    /* Style Definitions for MSO 2010 */
    table.MsoNormalTable, p, span, div, table, tr, td, th, a { mso-style-priority:99;  font-family:"Arial","sans-serif"; }
  </style>
<![endif]-->

Reply to Zach Freed

poornima sekar replied 2016-05-24 01:18:49

Hi Zach Freed,
Thanks for your post.
But it didn't help me to overcome my issue.

-3

Vlad Sopov replied 2015-01-08 19:10:23

Hi Bryan, i've checked you code, i don't see any reason why email clients would change font family to Times. If email client doesn't support Open Sans, it will render as Arial, Helvetica, sans-serif.

I've made at test in Outlook 2007 (doesn't support web fonts) and i see all text in Arial.

Reply to Vlad Sopov

-15

Someone Somewhere replied 2015-01-13 10:56:09

Should be

'Open Sans'

you're welcome

Reply to Someone Somewhere

Outlook Overrides Font to Times New Roman

1. Base typography reset

1. Base typography reset

2. Webfonts import

1. Base typography reset

2. Webfonts import

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password