There are thousands of fonts available for public use. However, some font families are considered "web-safe fonts," (e.g., Arial, Verdana, Helvetica [sans-serif fonts], Georgia, Garamond, [serif fonts], and Courier New [monospace font]) while others are not — and many web-safe fonts are pre-installed on a wide range of computer systems and devices.
One of the drawbacks to using a font that is not web-safe is that it is more likely to be substituted by browsers and email clients if that font is not present on the receiving operating system.
TIP: Learn more about web-safe fonts.
Fallback fonts & font families
Using fallback fonts and font families is a good way to ensure that your messages render how you intend, irrespective of the receiving device.
Fallback fonts
Fallback fonts are those that will be used — in the specified order — if your preferred font is not available on the user's device. If none of the specified fonts are found, the default font is used.
NOTE: Specifying fallback fonts is known as font stacking.
Below is an example of how to specify a preferred and fallback fonts.
td style="font-family: Helvetica, Helvetica Neue, Arial"
Font families
There are several available font families, such as Sans-serif, Serif, and Monospace. The "family" concept lies in the fact that each font in the family has something in common with all of the others.
The family type is commonly specified at the end of a list of fallback fonts, as shown.
td style="font-family: Helvetica, Helvetica Neue, Arial, Sans-serif"
TIP: As you create a message, try a few different fonts to see how they suit your message. Sans-serif fonts are considered easier to read on screens.
Font rendering
You might notice that when you test an email message, your choice of font has been replaced by a different one. Even if your preferred font is a web-safe font, it will be replaced if the font is not available on the user's device.
Let's look at the difference between using and not using fallback fonts.
Using fallback fonts
Fallback fonts are a good way to ensure that your email message displays as you intend.
For example, you specify Helvetica as your preferred font, and use font stacking to specify fallback fonts and a font family:
td style="font-family: Helvetica, Helvetica Neue, Arial, Sans-serif"
With proper font stacking (comma-separated, as shown), the email message will render with a sans-serif font even if Helvetica is not available on the device. Specifying the font family ensures a sans-serif font is used even if those in the "stack" aren't available.
Not using fallback fonts
Now, let’s say you specify Helvetica as your preferred font, but with no "stacking" or font family:
td style="font-family: Helvetica"
On a device that does not have Helvetica installed and no fallback fonts or font family have been specified, the message will render using the device's default font (for example, the serif font, Times New Roman).
Font availability
One important thing to remember that not all fonts are installed on all devices/operating systems. This is a good reason to i) consider the availability of your preferred font and ii) use font stacking.
For example, Helvetica, while a fairly common font, is a native font on only ~7% of Windows devices. So without proper font stacking, an email message:
- will use Helvetica and render as expected on Mac products, but
- might not display as expected on a Windows device (such as in MS Outlook on a PC); instead, the default font (usually the serif font, Times New Roman) will be used because there aren't any alternatives specified.
Alternately, reference this list of web-safe fonts and use either:
- a more widely available font or
- font stacking with fallback fonts and a font family.