What are the UX implications of using Web fonts in email templates? It seems that not all email clients support web fonts, but I'm not sure of the consequences of this.

  • Many email clients that don't support web fonts, might also be supporting plain text variants of email body. It would be tedious if your images get converted into attachments.
    – Sol
    Mar 20 '15 at 6:39
  • I read this to be about the UX impact of an implementation choice, rather than an implementation, so I consider it on topic.
    – JohnGB
    Mar 20 '15 at 13:36
  • Not sure what the down-votes are for here... whilst the answer is "don't do it", it's still a good/useful question for others. Up-voting.
    – mpdc
    Mar 20 '15 at 14:04

Avoid using the custom font whenever possible.

Web font aka custom font is not pre-installed to your digital device. Is it an English/Unicode/Chinese web font? It takes time for user's digital device to download the font.

What if the email client does not support the embedded method of using web font?
What if the digital device is in offline/airplane mode?
What if the user's mobile device comes with a limited data plan?

Use Web safe font instead

Always add context for images

(Non decorative) Background image can be supplied with alternative text to enhance accessibility.

What if the email is classified as SPAM or highest secured mode is enabled so that image is hidden by default?


Litmus has some good recommendations on this that I've been following:

  1. Use a good base font (web safe)
  2. Enhance for the clients that support it
  3. Beware of Outlook

As long as you are prepared for the worst case scenario (with a web safe font), I think it's OK to offer a better experience for those who can support it.

The more similar the typefaces are (safe and not safe) the better it would be, of course.

As always with email, test on as many devices/clients as possible.

  • Welcome to the site, @tdnvl. Can you clarify how you determine if a font is "web safe"? May 20 '15 at 20:21
  • Thank you, @GrahamHerrli! There are many sources online that post lists of Windows/OS X/etc. web safe fonts. cssfontstack.com is a good start but there are many more.
    – tdnvl
    May 26 '15 at 3:41
  • To clarify, I mean how are you defining "web safe"? The OP asks about displaying web fonts in desktop email clients. Saying to use a font that's safe for the web doesn't appear to answer the question of how to make sure that the font works for desktop email clients. May 26 '15 at 15:55
  • 1
    @GrahamHerrli, simply by sticking to a font that is present by default on Windows and OS X. A desktop email client will rely on the fonts that are installed on the machine. If you know that the font is present on the machine (Arial is a good bet, for example), you can predict how the email will display. Am I being clear? Apologies for the confusion...
    – tdnvl
    May 26 '15 at 20:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.