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. 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.
Only Eighteen Fonts?
Since the late 90s, Mac and PC have had 18 commonly shared fonts that have been collectively called email-safe fonts. Generally, every email platform has them installed so they are available when an email is rendered on the client side. Although 18 fonts may seem terribly limiting, there are ways to bring in custom fonts and set fallbacks to ensure your message is branded properly and looking beautiful for all of your readers.
|Arial Black||Arial Black, Gadget|
|Comic Sans MS||Comic San MS5|
|Courier New||Courier New|
|Lucida Sans Unicode||Lucida Grande|
|Palatino Linotype, Book Antiqua3||Palatino|
|Times New Roman||Times New Roman, Times|
|Trebuchet MS1||Trebuchet MS|
|Σψμβολ2 (Symbol)||Σψμβολ2 (Symbol)|
|Wingdings2 (Wingdings)||Zapf Dingbats2 (Zapf Dingbats)|
|MS Sans Serif4||Geneva|
|MS Serif4||New York6|
|Source: www.ampsoft.net – http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
See bottom of post for legend.
1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.
2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).
3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.
4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).
5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).
6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).
How to Use Fonts
Fonts can be applied to an email in either the head style or the in-line 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. In-line CSS is placed directly into the HTML element containing the text that should display in that style. Below, we will detail the process of adding a style to the head and offer a few in-line css methods.
<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 in-line styles to accommodate Gmail users. Head styles can be applied using the example below:
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
In this example, the "font-family" determines the applied fonts and their order of preference.
In a table cell
You can apply a font-family style to all of the text in a table cell by placing in-line 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 a specific section of text using <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. The example below depicts how to use a span to apply a Helvetica style to the table cell and an Impact style to the word "awesome."
Font stacks are important
As mentioned previously, you can declare any font you would like in an email - and 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. In the example below, the first priority font is Architect's Daughter. If that fails, the first fallback (2nd choice) is Verdana followed by the second fallback, Helvetica.
<span style="font-family:'Architects Daughter',cursive,'Verdana','Helvetica';">Hello world!</span>
Applying Custom Fonts
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. With a quick look into @import support, we can see that 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 has limited support for @import and in some cases, depending on the version, may not support it at all.
In the example below, we use @import to allow the use of "Architect's Daughter" and "Open Sans." Both of these are Google Fonts available through the Google API.