Some fonts are common and come pre-installed on a variety of devices and others are not. If you've selected a less common font, your email may render with the default font for the device, not the one you've chosen. Let's learn a little more about how font stacking can help prevent this from happening in your mailings.
Web Safe Fonts
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.
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're 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.
Stacking the right fonts
One of the main things to understand is whether your font choice(s) is a Serif font (letters have small embellishments or lines at the end of strokes, like Times New Roman) or Sans-Serif font (letters without embellishments, like Arial).
CSS Font Stack is a great resource for Font Stacks. This site gives you the platform adoption percentage for common fonts, as well as the font stacking for each font to copy and paste.