HTML E-mail template issues [FONT and Border bottom]

Question

I am having issues with email templates:

1. Border bottom not showing
2. Font fallbacks on Windows not working

So: I run the HTML through an inline generator that puts everything inline

1. Border issue:

    <tr class="bottom-border"> .bottom-border { border-bottom: 1px solid #eff3f6; } 

2. Font issue:

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700); body { font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important; } 

The font issue wont work on Windows, it still seems to output Times New Roman, even though im not telling it to. On the MAC its fine it outputs Open Sans

Answer 1

Aha, I see what the issue is with the font.

You need to add the font styles to the table not the body.

<table style="font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;">

Then is you have nested tables this will also need to be applied to those too.

I also need to see the output of the inline generator to see why the border isn't being applied.

Answer 2

Outlook HATES webfonts. It won't display them, and if it seems one at the beginning of the font stack, it will empty the entire stack and go instead with the default font. To counter this, I have a few steps below for you:

1. You are screwing up your style attribute with using the double quotes (") around helvetica and on. It is closing the style attribute at at the second double quote (right before helvetica) which removes your font stack. It then also has potential for validation issues. You do not need the quotes on the fonts, so I would either remove or just use single quote (').
2. You should always inline your font on the tag that contains it (TD, DIV, P, etc). This is where you should put your stack WITHOUT the web font.
3. You then need to add a span tag inside the container and around your text which will have your webfont declared there.

As far as border bottom:

1. Don't use a class. You need to inline it. Ex: <td style="border-bottom: 1px solid #eff3f6;">
2. Don't apply styles to TR tags, use it on TDs for much more comprehensive support of CSS.