In an earlier post, we detailed the preferred method of how to use webfonts in an email. Now while this will work brilliantly for those email clients who do honor webfonts, you will notice later versions of Outlook (most notably 2003-2013 with the exception of 2011) defaulting your font to Times New Roman regardless of what fallback font(s) are specified in your cell or CSS. Yes, your email looks perfect in virtually any Apple client, and webmail clients look great too, defaulting to the secondary font(s) you’ve set up. So what’s with Outlook completely ignoring the default?
There is an extra step you need to add to override Outlook’s bug of defaulting to Times New Roman. Make sure you have all these steps in place, and your email will render as it should across all the browsers and devices.
Make sure you’re using a webfont from Google fonts
- Go to https://www.google.com/fonts
- Find the font you want
- Get the link by clicking the second icon, “quick-use”
- Find the font @import url – not the “standard” the URL defaults to, the @import is the second tab option:
Ensure you’re using the @import URL in the STYLE tags of your email.
<style type=“text/css”> @import url (http://fonts.googleapis.com/css?family=Oswald) ; </style>
1. If you don’t have style tags within the email you will write them just as the above example– just make sure you have them wrapped in at least the container (meta tags aren’t necessary but as a best practice should be included):
<head> <meta http-equiv=”Content-Type” content=”text/html; charact=UTF-8” /> <meta name=“viewport” content=“width=device-width; initial scale=1.0; maximum scale=1.0;”> <style type=“text/css”> @import url (http://fonts.googleapis.com/css?family=Oswald) ; </style> </head>
2. If you have STYLE tags already and any CSS styling specified here, you will simply just add the @import url tag to the very top:
<style type=“text/css”>
@import url (http://fonts.googleapis.com/css?family=Oswald) ;
/* GENERAL STYLE RESETS */
Body, #bodyTable { height:100% !important; width:100% !important
Img, a img { border:0; outline:none; text-decoration:none; }
.imageFix { display:block; }
3. Going back to the Google Fonts page, find the CSS styling to be added inline for the remainder of your email (if you don’t already know how):
4. You will need to add the web font in single quotes to the rest of your HTML where fonts are specified. You will have the web font listed first followed by your default font(s):
<tr> <td style=“font-size: 10px; color: #272727; font-weight: bold; text-align: left; fontfamily: ‘Oswald’ , Helvetica , Arial, sans-serif; line-height: 24px; vertical-align: top;”>
NOTE: You will need to have default fonts set up, or Outlook will show Times New Roman.
5. Add the web font family to the remainder of your HTML
You MUST include both inline CSS and the @import rule.
Finally, add a font face around all text.
Make sure to style it just as you have throughout the rest of the email regarding font order:
<tr> <td style=“font-size: 10px; color: #272727; font-weight: bold; text-align: left; fontfamily: ‘Oswald’ , Helvetica , Arial, sans-serif; line-height: 24px; vertical-align: top;”> <font face=“’Oswald’ , Helvetica, Arial, sans-serif;”> <a href=“##” style=“text-decoration: none; color: #272727”> Section 1 Header at 10px </a> </font> </td> </tr>
NOTE: If you have multiple paragraphs within a cell, simply wrap the font face styling around all of the paragraphs – you will only need to have that written once in that cell.
This three-tier approach will force Outlook to render the default fonts set up, while allowing those clients who accept web fonts to render them accordingly.
If you’re looking to delight your audience with the email content they crave, book a demo and find out how you can get the features you need to make your email programs a success.