Web Safe Fonts

Not all fonts are created equal! Some fonts are common and come pre-installed on a variety of devices and others aren't. If you've selected a less common font your email may render with the default font for the device and all that time you spent designing the perfect email with the perfect font will be undone.

What Is A Web Safe Font?

A web safe font is one that is installed on a wide variety of systems. Email HTML isn't easily able to download fonts to your subscriber's device, so it's best to use the fonts that are already installed. Some web safe fonts are more common than others, and some are more likely to be found on an Apple device than a Windows device.

Font Stacking To The Rescue!

You might notice that when you test an email your choice of font has been replaced by a different one when you look at it in your inbox. Even If you are using a web safe font, a good first step in troubleshooting this issue is to check your font stacking!

Font stacking happens in the HTML code and offers alternatives to the font you selected in case that font is not present on the device that opens the email.

For example, let’s say you chose Helvetica as your font, the code will look like this:

<td style=”font-family: Helvetica”

On a Windows computer without Helvetica installed, the email will render using the default font of Times New Roman.

The problem arises because Helvetica is native on only 7% of windows machines, and 100% of Apple machines. So without the proper font stacking, the email will use the correct font on your iPhone, but Outlook on your PC will use the default font, usually Times New Roman, because there aren’t any alternatives specified. This will look very different because Helvetica is a Sans-Serif font, and Times New Roman is a Serif font.

Proper font stacking for a Helvetica font would look like this:

<td style=”font-family: Helvetica, Helvetica Neue, Arial, Sans-Serif”>

On the same Windows computer with proper font stacking, the email will render with a Sans-serif font similar to the missing Helvetica:

So when Outlook on a Windows machine renders the email, it will try Helvetica, then Helvetica Neue, and when it comes up empty handed, it will try Arial which is on 99.84% of windows machines and is pretty close to Helvetica.

How Do I Know The Right Fonts to Stack?

Always be aware of your fonts! Make sure you know if your font choice is a Serif font (letters have small embellishments or lines at the end of of strokes. i.e. Times New Roman) or Sans-Serif font (letters without embellishments. i.e. Arial).

CSS Font Stack is a great resource for Font Stacks. This site gives you the platform adoption percentage for common fonts and also the font stacking for each font to copy and paste!

Questions?

Contact your Advisor for more assistance with fonts and email design!