This article will provide information on the importance of fonts in emails.
| Administrators | ✓ | |
| Company Managers | ✓ | |
| Marketing Managers | ✓ | |
| Sales Managers | ||
| Salespersons | ||
| Jr. Salespersons |
 | Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article. |
Technically, you can include any font into an email. However, if the recipient does not have that font installed, they are not going to see the email as you expect they would.
Web fonts are not pre-installed on the user’s system. Web fonts come from an included source on a page. Web fonts are downloaded by the browser while rendering the web page, and are then applied to the text. If there is an issue with downloading or applying the web font, then text will not display properly.
Since the later part of the 1990s, Macintosh and Windows have had 18 commonly shared fonts. These fonts are normally pre-installed on a a user's machine. As such, these have been collectively called safe fonts. Generally, every email platform has these fonts pre-installed so they are available when an email is rendered on the client's side. The 18 email-safe fonts are as follows:
| PC | Mac | |||
| Arial | Arial, Helvetica | |||
| Arial Black | Arial Black, Gadget | |||
| Comic Sans MS | Comic Sans MS | |||
| Courier New | Courier New | |||
| Georgia | Georgia | |||
| Impact | Impact, Charcoal | |||
| Lucida Console | Monaco | |||
| Lucida Sans Unicode | Lucida Grande | |||
| Palatino Linotype, Book Antiqua | Palatino | |||
| Tahoma | Geneva | |||
| Times New Roman | Times New Roman, Times | |||
| Trebuchet MS | Trebuchet MS | |||
| Verdana | Verdana, Geneva | |||
| Σψμβολ (Symbol) | Σψμβολ (Symbol) | |||
| Webdings (Webdings) | Webdings (Webdings) | |||
| Wingdings (Wingdings) | Dingbats (Zapf Dingbats) | |||
| MS Sans Serif | Geneva | |||
| MS Serif | New York |
Mobile devices also utilize safe and web fonts. The following fonts are available for use with mobile devices:
| Mobile | ||
| Arial | ||
| Courier | ||
| Garamond | ||
| Georgia | ||
| Helvetica | ||
| Times New Roman | ||
| Verdana |
Although 18 fonts may seem limiting, there are ways to bring in custom fonts and set fallbacks to ensure your message is branded properly. Fonts can be applied to an email in either the head style or the inline CSS. Style placed in the head can be applied to specific classes and IDs. When those IDs and classes are referenced in the email body, that style is rendered. Inline CSS is placed directly into the HTML element containing the text that should be displayed in that style.
Applying style to the head is a simple way to broadcast a font across your entire email or a specific class. It works in all email platforms except Gmail (the ability to use the <style> tag in the <head> is not supported), so it is recommended to include inline styles to accommodate Gmail users.
<style type="text/css">
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 0px;
background:#ffffff;
}
</style>
You can apply a font-family style to all of the text in a table cell by placing inline CSS in the TD tag of your HTML. Using this method will affect the entire content of that table cell, regardless of the amount.
Within your content, it is important to be able to control the style of a specific word or section of text. Using <span>, you are able to apply a style attribute to a single word or group of words.
You can declare any font you would like in an email. If the recipient has the font installed, the email will display as expected. However, if the recipient does not have the font available, a default font will be used in its place. Fortunately, you can prioritize a list of fallback fonts to display whenever the original font is not available.
<span style="font-family:'Architects Daughter',cursive,'Verdana','Helvetica';">Hello world!</span>
If there are any fonts that you absolutely must use, you can use the @import method in your CSS. However, there are some limitations to using @import, as it is not supported in all email clients. Most web-based email clients like Gmail, Outlook.com, and Aol.com do not allow it. However, it is supported by iOS devices, Apple Mail, and Thunderbird. Outlook itself has limited support for @import and in some cases, depending on the version, may not support it at all.
@import url(https://fonts.googleapis.com/css?family=Open+Sans|Architects+Daughter);
Copyright © 2025 · All Rights Reserved · Constant Contact · Privacy Center