How do I change the email fonts?

Most modern email clients accept HTML in the email, but they will render emails differently than a web browser would render a web page. There are more restrictions and limitations on some elements, like fonts.

Web-safe fonts

The current desktop operating systems include a set of fonts when installed. The common fonts, available in most of the OS, are called Web-safe fonts (sometimes called default fonts). Currently, these fonts are [1]:

Best support:

Arial
Arial Black
Tahoma
Trebuchet MS
Verdana
Courier
Courier New
Georgia
Times
Times New Roman

Good support:

Century Gothic
Geneva
Lucida
Lucida Sans
Lucida Grande
MS Serif
New York
Palatino
Palatino Linotype

Other fonts may be used in e-mails, but they should fallback to a web-safe font. When specifying a font list in CSS, the e-mail client will use the first available font in the list. For instance, in the following list:

Futura, Helvetica, Arial, Verdana

Futura will be rendered in the e-mail if the OS has that font installed. If not, it will use Helvetica, and so on. It is recommended to include at least one web-safe font in the list.

Custom fonts

Custom fonts are fonts that are available on the Internet and referenced via the CSS @font-face statement. These fonts don't need to be installed on the computer, they are downloaded and used at the moment the email client opens the email.

This allows us to use any font available in the Internet, but the e-mail client must support @font-face, and currently most of them don't [2]. Gmail and Google Inbox, for example, don't support custom fonts.

Adding fonts to the e-mail

When designing an email template, keep in mind that it will not look exactly the same across all email clients. This is specially true for fonts. The HTML fragment below, for example, will be rendered using Lato only if it is available. If not, it will fallback to Arial, which is a web-safe font. Finally, if Arial is not available too, sans-serif term is used to let the OS to pick the default sans-serif font.

Thank you!

[1] https://templates.mailchimp.com/design/typography/
[2] https://www.campaignmonitor.com/css/text-fonts/font-face/