Choosing the right font for your marketing campaign is a very important decision. The font has a direct impact on the look and feel of your email, helps set the tone, and ultimately affects how your leads interpret your message. This article will provide information on the importance of fonts in emails.
The following user roles can create emails:
- Marketing Managers
Safe Fonts and Web Fonts
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:
|Arial Black||Arial Black, Gadget|
|Comic Sans MS||Comic Sans MS|
|Courier New||Courier New|
|Lucida Sans Unicode||Lucida Grande|
|Palatino Linotype, Book Antiqua||Palatino|
|Times New Roman||Times New Roman, Times|
|Trebuchet MS||Trebuchet MS|
|Σψμβολ (Symbol)||Σψμβολ (Symbol)|
|Webdings (Webdings)||Webdings (Webdings)|
|Wingdings (Wingdings)||Zapf Dingbats (Zapf Dingbats)|
|MS Sans Serif||Geneva|
|MS Serif||New York|
|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 display in that style.|
<style> in <head>
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.
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
In Table Cells
|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.|
In Text with <span>
|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 browsers 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.