Custom Fonts in Emails

Published by Chris Coyier

A reader writes in:

Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or Windows computers. We do not want to use images in our email.

First off, it's pretty cool your CEO cares about type and aesthetics at all. It's usually a good thing to have the person steering the ship care about beauty and details down to that level. Let's consider the options.

The first thing that comes to mind in custom fonts these days is @font-face. The browser support for it is pretty darn good. Unfortunately, browser support isn't what we need here, it's email client support. According to some research by Campaign Monitor, @font-face is only working Apple's Mail.app and the Mail app on iOS. You could try to make the progressive enhancement case to your CEO, but at that low level of support might be a tough sell.

Another thing you mentioned was trying to recreate the font through CSS somehow. Maybe something like this. I've even played around with this concept a little bit specifically with the idea of image-free emails in mind. This is the realm of big-pixel-art though. Recreating a font pixel by pixel with no anti-aliasing, as you are surely aware, is a fool's errand.

In reality I think there are two solutions.

The first is to reconsider this sentence: "We do not want to use images in our email." Why not? It seems like you are OK with sending HTML emails since you're specifically looking for clever solutions and text emails are capable of very little cleverness short of ASCII art. People use images in emails all the time. Admittedly, the fact users often have to specifically choose to view them is a bit of a turn off, but using proper ALT text on the images makes the email still work even if they never do that.

The second is to give up on this custom font in email thing. Not to sound defeatist here, but your branding will not be ruined by the lack of a specific typeface in an email. Anywhere where you all agree it is critical (e.g. a slogan?), use an image, otherwise, use a nice readable font that works OK in pairing with your brand typeface and move on with more important tasks.

Personally, I think I'd go with @font-face despite the current low support. Actively developing what you want to work helps build the desire momentum needed to get product vendors (in this case email clients) to improve their products and give us better CSS support.

Update, December 2012

Recent research again from Campaign Monitor. As of this update, support includes: iOS Mail, Mail.app on OS X, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird.