0

I created a new html email signature for myself and I'm quite pleased with the result. It makes use of a font stack that tries the web font Open Sans first and falls back to Trebuchet MS if the client cannot display the web font. I'm using Outlook 2016 to send my emails with this new signature, and Outlook 2016 as well as most other modern email clients seem to display the signature properly.

The problem I have is that versions of Outlook 2013 and lower cannot seem to handle the web font but at the same time ignore the font stack and reset to Times New Roman instead of my fallback font.

This is a well known issue with plenty of information available on the net, including several code examples how to avoid or circumvent it. One of the better overviews I found on the topic is a blog entry by EmailOnAcid.com.

While the proposed strategies might work when sending email to recipients using Outlook with the help of some other third-party smtp client, they don't seem to apply to me who wants to send emails from Outlook. Because no matter which code or conditions I implement into my signature template, it is interpreted by Outlook at the moment the signature is loaded into the email to be sent, and Outlook changes the html in accordance with its own interpretation before sending it.

Does anyone know of a way to add a font stack including a web font to an html signature, to be sent from MS Outlook 2016, where Outlook 2013 and maybe 2010 will honor the correct fallback font and not just revert to Times New Roman?

Edit

Here is an example of code I'm currently not using in my signature file due to the problems listed below:

                <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
                <td style="font-family:'Trebuchet MS', Arial, sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
                    <span style="font-family: 'Open Sans', 'Trebuchet MS', Arial, sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
                </td>

If sent using a third party smtp client, this code, when received in Outlook, will ignore the font stack in the span element and only use the one in the td element. Other clients will properly render the web font. Unfortunately, however, when sending from within Outlook, Outlook already makes the conversion before sending it. Which means that other clients never get to choose and only see the fallback font.

vic
  • 292
  • 3
  • 14
  • This question was downvoted within 20 seconds of being asked.. Hard to believe the downvoter even read the question. – vic Oct 03 '17 at 21:30
  • 1
    The down vote would have been is because we expect people to post code to [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) for questions that are posted. Now we are aware outlook strips media query when we sent emails though outlook and since web fonts require `@font` support or link in the head, outlook will most likely strip or change it. – Syfer Oct 03 '17 at 22:29
  • @Syfer thanks for the comment. I'm happy to post my html tomorrow, but I doubt it will shed more light on the issue as there is nothing wrong with my code in principle. The question is how to do something which is either not documented or just sparingly so. My hope is to find someone already having researched this before so that I can avoid reinventing the wheel. – vic Oct 04 '17 at 00:46

2 Answers2

3

Just for my piece of mind i went ahead and did a few tests to see whats happening with the code being sent. When we use Outlook to send a HTML (as an email), Outlook changes the HTML each time.

For example when the below code is sent thru Outlook 2013:

<table align="center" aria-hidden="true" border="0" cellpadding="0" 
cellspacing="0" role="presentation" style="max-width: 600px;" widdth="100%">
<tbody>
    <tr>
        <td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
           <span style="font-family:Open Sans,Arial,sans-serif;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
        </td>
    </tr>
</tbody>
</table>

it ends up showing as:

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="max-width:450.0pt">
<tbody>
<tr>
<td style="padding:0cm 0cm 0cm 0cm">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Open Sans&quot;;color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Arial&quot;,sans-serif;color:black">
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>

Outlook practically rewrites most of the code to outlook what MS thinks would be right. Now the question you had was why Outlook 2016 shows the text as not Times New Roman is because Outlook 2013 adds CSS as follows:

  @font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
  @font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
  @font-face
    {font-family:"Open Sans";}
  p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}

This ensures that Calibri font is displayed on devices that have that specific font installed. Outlooks without Calibri will not be able to find the font and display default font Times New Roman.

From the above tests it would seem that Outlook 2016 is only meant to send emails with Calibri as the font. I have tried to change the default fonts and themes but its still doing the same.

EDIT:

There one important thing you missed from the link you mentioned above which is !important after the web font stack. Below code is what you should be sending: 

<table align="center" aria-hidden="true" border="0" cellpadding="0" 
cellspacing="0" role="presentation" style="max-width: 600px;" 
width="100%">
<tbody>
    <tr>
        <td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
           <span style="font-family:Open Sans,Arial,sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
        </td>
    </tr>
</tbody>
</table>

Once you add important tag Outlook will ignore the full font stack you have and while re-writing the code adds in the font family as Arial which means it should now display fonts properly.

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="600" style="width:6.25in">
<tbody>
<tr>
<td style="padding:0in 0in 0in 0in">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Arial&quot;,sans-serif;color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>

Hope this is what you were after.

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • Thanks for your input. I'm not sure I understand your conclusion, though. Are you saying that the font-family in the class MsoNormal is used as a standard fallback for unknown fonts, and that Calibri will be used on system that have it but Times on systems that don't? Even if that was the case, why is it falling to Times when sans-serif is specified as the next fallback font in the MsoNormal class itself? – vic Oct 04 '17 at 12:57
  • I have the answer in my edit above. The reason its not reading the right font is there is a span tag around your text. Outlook still tries to read the font but is not able to read it. Also you missed `!important` in your web font stack. If you add important, outlook ignores the font stack and re-writes the HTML using its own font stack. – Syfer Oct 04 '17 at 22:38
  • Hi Syfer, I did not really forget about !important, I removed it on purpose in my own file and forgot to add it back for the purpose of this question. As you explain correctly, if I add !important, Outlook will ignore the web font stack and use the simpler font stack in the td element, properly displaying the "safe" sans-serif font I choose there, for example Arial or Trebuchet MS. The problem is, if I use Outlook to *send* the email, it does the conversion you describe above *before* sending, so the recipient never gets to see the web font stack. – vic Oct 05 '17 at 19:44
  • It's outlook, it doesn't like web fonts! – Syfer Oct 05 '17 at 21:00
  • No arguments there :) still, there must be a solution to the problem. As I already wrote to Gwally below, maybe I will have to resort to VBA or an Add-in that intercepts the mail before it leaves Outlook. I'll start working on something like that. – vic Oct 05 '17 at 21:03
2

I feel your pain. I face this problem everyday. My company brand guideline uses a webfont that works fine on our website, but does not render with Outlook or Gmail. I created a workaround for this issue that should work for you.

In the case of Outlook, it does not fully support web fonts. Some work, some don't, it's hit and miss. I think it's the gap in a name like 'Open Sans' that causes the issue. When Outlook runs into an issue, it reverts to Times New Roman. The irony that Times New Roman is the default font with gaps in it's name is not lost on me.

Arial is the fallback font we've chosen for a replacement, so I create a style sheet specifically for Outlook:

<!--[if (gte mso 9)|(IE)]>
<style>
  * {font-family: Arial, sans-serif !important;}
</style>

Gmail does not work with google fonts at all. So Open Sans will never render. The solution is to choose a system font as a fallback font after you specify Open Sans. Everything should work fine in most other email clients.

One last thing to remember, whatever email client you use to send out an email will be restricted with the limitations of that client. Outlook limits your ability to send emails, just like it limits it's abilty to render them for your inbox.

I'm not positive to everything Outlook will strip out, but that could be some of the issues with what you're facing. Even though I am based on Outlook, I use other services to send emails whenever possible to overcome this.

Good luck.

gwally
  • 3,349
  • 2
  • 14
  • 28
  • HI Gwally, really appreciate your answer but I think you might have misunderstood my question.The problem is that I'm using Outlook to *send* my messages and a condition such as the one you are using, is being rendered by the *sending* Outlook. The result of your condition would be that Outlook replaces the web font with Arial *before* sending, in fact stripping the web font from the mail to be sent. And I am busting my brain on a way to circumvent that. – vic Oct 04 '17 at 18:26
  • I circumvent that issue by not using Outlook. Outlook as an email client is restricted by the same limitations it has rendering emails. There isn't a way to overcome this, you need to use another way to send emails. – gwally Oct 04 '17 at 20:52
  • I couldn't agree with you more, I'm an avid Thunderbird user myself. Unfortunately, not using Outlook is not an option in this specific case. I wonder if there is a way to add the signature *unchanged* by tinkering with the email after it was moved to the Outbox, using VBA... – vic Oct 05 '17 at 19:45
  • My organization is built on Outlook, so I understand. I use Putsmail for testing, we use an ESP to send mail to customers to get around limitations. If you discover a VBA thing, please post it somehow. Good luck. – gwally Oct 05 '17 at 20:54