CODEWITHSUNDEEP
htmlemailgmail
AlliterativeAlice
AlliterativeAlice

Reputation: 12577

Gmail Overriding font-family styles in tables

For example if I have:

<div style="font-family:'Trebuchet MS';">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>Text 1</td>
            <td>Text 2</td>
        </tr>
    </table>
</div>

Gmail's styles will override the font-family set in the div, even if I use !important. If I try to set the font right in the td elements like this:

<div style="font-family:'Trebuchet MS';">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td style="font-family:'Trebuchet MS';">Text 1</td>
            <td style="font-family:'Trebuchet MS';">Text 2</td>
        </tr>
    </table>
</div>

Gmail strips the contents of the style attribute completely! The same thing happens if I try to add it to the table element, or a span within the td element.

Upvotes: 2

Views: 1642

Answers (1)

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

Though it's not very standards-compliant, using the font tag allows you to get around this. For example:

<div style="font-family:'Trebuchet MS';">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td><font face="Trebuchet MS">Text 1</font></td>
            <td><font face="Trebuchet MS">Text 2</font></td>
        </tr>
    </table>
</div>

Will work.

Upvotes: 1

Related Questions