“If you were a web font, what web font would you be?”
I was once asked a very similar question in a job interview, but that time it involved biscuits.
“If you were a biscuit, what biscuit would you be?” It’s personal preference, and there is a wide choice of biscuits out there…and it’s the same with fonts, with designers and developers enjoying an immensely varied selection of standard ‘Web Safe Fonts’ or the more daring ‘Web Fonts’.
(And for those still wondering about my choice – it’s the Bourbon biscuit, always the Bourbon.)
Safety in letters
So what are the differences between Web Safe Fonts and Web Fonts?
Web Safe Fonts
These are the standard available system fonts found on everyone’s operating system. So it is ‘safe’ to assume it will render correctly across email clients and platforms.
The most common Web Safe Fonts include:
-
Arial/Arial Black
-
Helvetica
-
Times/Times New Roman
-
Courier/Courier New
-
Palatino
-
Georgia
-
Garamond
-
Bookman
-
Comic Sans
-
Trebuchet
-
Impact
-
Verdana
Out of these Helvetica and Arial are the standard fonts of choice, whereas others are frowned upon… like Comic Sans.
Comic Sans was released with Windows 95, it had a bright start in life, and this was possibly it’s downfall. “Hmm that Times New Roman header is just too serious, what can I use that’s more fun and quirky… Comic Sans, it even sounds fun.” The font was overused and wasn’t a good font to start with. The character weight too heavy and poor kerning (the space between characters) made it a designers arch enemy.
Web Fonts
These are licensed fonts, hosted and accessible either by purchase and download, or linked/imported via a host site like Google Fonts. Although these web fonts provide you with a much wider choice of fonts, they don’t yet all render 100% across all devices, so you should use them wisely.
At present, a small range of email clients accept web fonts, including:
-
Android (default mail, not Gmail app)
-
AOL Mail
-
Apple Mail
-
iOS Mail
-
Outlook 2000
-
Outlook.com app
-
Thunderbird
However this small number does cover the majority of the top 10 email clients being used today.
Google Fonts started up 7 years ago and provides fonts for free, but if none of the 800+ Font Families float your boat, you can always purchase fonts from numerous web font services, including:
Obviously hosting your own fonts is safer than relying upon a third party server. On the off chance that Google gets bored of providing free fonts and decides to stop the whole project, at least your “Gotham” won’t become “Georgia”.
Ideally web fonts should be an email designer/developer’s preference, the varied choice and potential impact of a unique font could help boost opens and drive click through rates, and without sounding like a supermarket advert, every little helps.
Web Safe or Not Web Safe? That Is The Font Question…
The ability for your fonts to render properly in someone’s inbox can actually have a big impact on your click through rates, and not always in a positive way, so your choice between web safe fonts and web fonts is sometimes more than just a style choice.
For instance, you might think that ‘Lato’ font looks great in your new email newsletter, and when you see the ridiculously high click through rates of 70-80% you think you’re campaign has been a roaring successful. But when you look more closely, you discover that the majority of those clicks were people clicking a ‘download font’ link prompted by their device or browser because it doesn’t have or support the ‘Lato’ font. This ‘download font’ link has now completely skewed all your click through rates and reporting stats.
So, think carefully before you choose a web font instead of a web safe one.
Now that you’ve made your font choice, let’s get them coded into your email.
Adding Web Safe Fonts To Your Emails
Looking at web safe fonts first, these would sit in the html as inline styles, like so:
(for this instance, we’ve chosen ‘Georgia’ as our web safe font)
<td align=”left” style=”font-family: Georgia, Arial, Times, serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>
Notice that the font-family has others listed after your initial or main font ‘Georgia’, this means that if for some reason Georgia doesn’t render in your email, ‘Arial’ will be next, then ‘Times’ and so on and so on – these are what is known as fallback fonts.
Outlook 2007/10/13 have Times New Roman as their default fallback font. Even if you set your own fallback fonts within your code, Outlook will ignore them. However, if you want to avoid Times New Roman, this can be fixed with some code in the header:
<!–[if mso]>
<style type=”text/css”>
body, table, td {font-family: Georgia, Arial, sans-serif, Helvetica !important;}
</style>
<![endif]–>
Adding Web Fonts
We can add web fonts in a number of ways, but all are added to the head stylesheet of the email. As an example let’s use the popular Google ‘Roboto’ font.(https://fonts.google.com/specimen/Roboto)
After you have selected the “Roboto” font you will be given a Link or @import option.
<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>
Or
@import url(‘https://fonts.googleapis.com/css?family=Roboto’);
Then to call the font you use font-family as normal:
<td align=”left” style=”font-family: ‘Roboto’, sans-serif; font-size:20px; line-height:30px; color:#000000;”>Extra, extra, read all about it</td>
The difference between Link or @import is the loading. @import waits until the html code is loaded, causing a delay to display, and a possible jump between the fallback font and the web font. Link is the opposite, it will load inline first as the code is read from top to bottom. Depending on the font used it could cause a delay for the whole email to display.
Link also offers the option of preferred or alternative style sheets.
The last font option is @font-face, this is possibly the most precise web font method.
It allows you to pick the file format from .woff, .woff2, .ttf, .eot & .svg. The former .woff format being a email developer’s choice, due to more email support.
@font-face can be dropped into the head style sheet just like @import and Link, and looks like this:
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(https://fonts.gstatic.com/s/roboto/v16/DDBbt_SKtg0EqyMEnMOuTX-_kf6ByYO6CLYdB4HQE-Y.woff) format(‘woff’); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;}
If you are obtaining the font from a provider like Google Fonts you will need to copy the url in the provided link and paste it into Internet Explorer or Safari to view the @font-face.
<link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>
There’s always an Alternative
Don’t forget your images Alt text, the web fonts have limited platform rendering, but there is no harm in adding some style. We are not talking anything fancy like a Velour jumpsuit and house slippers here, after all this is just the text that loads when your email image doesn’t.
That Alt text can be styled with font-family, font-size, font-colour, text-decoration etc. try and match the image style, and get your email looking good even before the images are loaded.
<img src=“images/grandpa-style.jpg” width=”200″ height=”40″ alt=“Grandpa Style” style=“font-size:16px; font-weight: bold; font-family: ‘Roboto’, Arial, Helvetica, sans-serif; color:#000000;”/>
Put the kettle on
So break open the packet of Bourbon biscuits, put the kettle on for a brew and go crazy with the multitude of font families at your fingertips.
