Search code examples
csshtml-emailemail-client

CSS Font smoothing HTML emails

CSS font smoothing doesn't seem to be working in my CSS emails.

<p style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;">Text</p>

Are these properties supported in any email clients? I've only tested in Gmail.

Solution

  • They both work, but what you're seeing is a quirk of GMail- it doesn't like css3. There isn't anything to my knowledge you can do about it. https://www.campaignmonitor.com/blog/post/3107/css3-support-in-email-clients/

    ^dated 2010, and doesn't mention font-smoothing, but it is still css3 and it still holds true for gmail.

    Try opening the same email in Apple Mail, or on an iphone/android, and the fonts should be smoothed.

    P.S optimizeLegibility is a bad idea, it can crash android < 2.3 and cause problems elsewhere. See below:

    Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?