title: Outlook Stripping font-family
body: <p>recently outlook has been stripping the font styling or overwriting it. In email on acid its fine but mobile device email clients, apple desktop and gmail it will not show the event header as century gothic. I use foundation for emails, but from what I can see from test the span is replacing the font and the h2 inline style is gone. The times new roman font was doing this as well but then rather then linking to the stylesheet i have I put it in the file, and that seem to resolve the times font, but not the Century Gothic. I am not sure something changed in outlook because it use to work fine.</p>
  <p>Any advice or things to try would be greatly appreciated.</p>
  <p>I have tried:</p>
  <ul>
  <li>css trying to style the span</li>
  <li>linking to hosted font via standard linking and @import</li>
  <li>wraping in a span with inline styling with the font-family</li>
  <li>swap h2 to be spam</li>
  <li>conditional statement</li>
  </ul>
  <p>Generated code from foundation for emails for Event header:</p>
  <pre><code>&lt;th style=&quot;-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:'EB Garamond',serif;font-size:20px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-wrap:break-word&quot;&gt;&lt;h2 class=&quot;size25music text-center&quot; style=&quot;Margin:0;Margin-bottom:10px;color:#000;font-family:'Century Gothic',CenturyGothic,AppleGothic,sans-serif;font-size:25px;font-weight:400;line-height:25px;margin:0;margin-bottom:10px;margin-top:18px;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;word-wrap:normal&quot;&gt;Event Header&lt;/h2&gt;&lt;p class=&quot;p2 musicP&quot; style=&quot;Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:'Times New Roman',Times New Roman,Times,serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;margin-left:24px;margin-right:30px!important;mso-fareast-font-family:'Times New Roman';padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left&quot;&gt;filler text for event information. filler text for event information. filler text for event information. filler text for event information. filler text for event information.&lt;/p&gt;&lt;/th&gt;
  </code></pre>
  <p>this is the code I am seeing in my email test:</p>
  <pre><code>&lt;td valign=&quot;top&quot; style=&quot;padding:0in 0in 0in 0in&quot;&gt;
  &lt;h2 align=&quot;center&quot; style=&quot;margin-top:13.5pt;text-align:center;mso-line-height-alt:18.75pt&quot;&gt;
  &lt;span style=&quot;font-size:19.0pt&quot;&gt;Event Header&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/h2&gt;
  &lt;p class=&quot;p2&quot; style=&quot;mso-margin-top-alt:0in;margin-right:0in;margin-bottom:7.5pt;margin-left:.25in;margin-right:30px!important&quot;&gt;
  &lt;span style=&quot;color:#0A0A0A&quot;&gt;filler text for event information. filler text for event information. filler text for event information. filler text for event information. filler text for event information.&lt;o:p&gt;&lt;/o:p&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/td&gt;
  </code></pre>
  <p>This is the complete code I am seeing in my test after sending the code.
  <a href="https://codepen.io/tyclm8690/pen/NWvyxLPhttps://codepen.io/tyclm8690/pen/NWvyxLP" rel="nofollow noreferrer">https://codepen.io/tyclm8690/pen/NWvyxLPhttps://codepen.io/tyclm8690/pen/NWvyxLP</a></p>