Back in 2000 when Outlook Express and Microsoft Outlook captured about 80% of the email browser market share; email marketeers only had 7 fonts to use in HTML emails [i.e. Arial, Times New Roman, Courier, Sans Serif, Verdana, etc.] and this was because Windows XP came only with these 7 default fonts. If you used a more exotic font like Century Gothic in your HTML email that was not available on the user’s computer then the email would not display properly. Instead, a substitute font would be presented in lieu.
Macs, Linux boxes and smartphones have become more popular devices for viewing emails. Thus, although Windows 8, Windows 10 and the latest Windows do come with a wider choice of fonts the default ones on Macs are generally different to those on Windows machines. Even all devices now come with more fonts. Still, there are very few common fonts that we can use across the board.
You might mention that with CSS2 it is possible to link to font files within the HTML which would allow you to use whatever font you chose as long as you had the .woff, .svg, .eot and .ttf files were available so what is the problem? Unfortunately, for security reasons email browsers do not allow you to link to external fonts so although this works on webpages it would not work on HTML emails.
So, what is the workaround?
There isn’t an elegant workaround yet. However, the good news is there are now an increasing number of default fonts that are available on Macs, Windows and smartphones such as:-
- Georgia
- Gill Sans
- Myriad
- Palatino
- Geneva
- Book Antiqua
- Trebuchet
- and others
The other bit of good news is that in CSS we can program the HTML email. Therefore, if one particular font is not available then we use a very similar substitute. For example a font like Century Gothic (which is only available on Windows). For Mac, it is equivalent is Apple Gothic we can program the CSS as:-
font-family: Century Gothic, Apple Gothic, CenturyGothic, AppleGothic,sans-serif;
In the above, what happens is that the email browser will try to present Century Gothic first. If its unavailable then Apple Gothic next and so forth until finally if all of them are unavailable . Thus, the bog standard Sans-Serif will be used. With this system, sometimes marketeers will use a more exotic primary font (even though coverage would only be about 60%) then a conservative secondary font that looks very similar and then a bog standard font like Arial. With this strategy the email marketeer can achieve a campaign whereby 60% of the recipients would see the communication in the desired presentation. Whilst 30% would see in a similar presentation. Lastly, the remaining 10% in a slightly mundane way.
