Today I learned that Gmail incorrectly parses the CSS "font" shorthand property. Specifically, in some or all circumstances it loses the "font-size" portion of the string. This may be specifically when a "line-height" is also included in the shorthand notation.
For example, with the following shorthand notation Gmail will fail to retain the font-size portion, and possibly the line-height portion as well:
<p style="font:normal 12px/14px sans-serif">
The CSS has to be spelled out in longhand for Gmail to retain all properties:
<p style="font-weight:normal; font-size:12px; line-height:14px; font-family:sans-serif">
The CampaignMonitor "Guide to CSS Support in Email" (very useful table) indicates that the "font" shorthand CSS property is supported by Gmail, but perhaps that claim should come with a disclaimer. Is anybody else able to confirm this behavior?
The tough part about putting a guide to CSS support together is the number of variables at play.
- What structure is used to hold the elements together
- What properties are used within a particular tag
- What browser is being used to view the e-mail
- Background updates or changes made to a client's support
- and as you've found - whether it's spelled out in shorthand or longhand
I have found several mistakes on the guide, but I'd say it's still a work in progress.
Apache: Thanks for bringing that up. We'll take a look at this shortly and once we've verified it we'll update the guide.
Brian: If you're aware of any other mistakes on the guide please let us know and we'll check them out. Thanks!
I can confirm I get the same results as the original poster. Problem averted by using long-hand style for all font properties.