Gmail and CSS "font" shorthand property

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?

BThies BThies, 6 years ago

Hi Apache,

The tough part about putting a guide to CSS support together is the number of variables at play.

This includes:
- 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.

Brian Thies
Professional Email Developer
Thies Publishing
Blake, 6 years ago

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!

thisisjamessmith, 6 years ago

I can confirm I get the same results as the original poster. Problem averted by using long-hand style for all font properties.


Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free