Designing emails with unique typography can lead to some interesting challenges. Some email clients, like older versions of Outlook, do not support web-based fonts. This can cause a bit of a headache when testing for for consistency across email clients.
So how do you make compelling looking emails with font styles that match your brand? Here are a few solutions.
The easiest solution is to find a font family that is widely supported by email clients and web browsers. To use these fonts, extra style definitions are not like the web fonts require. These include fonts such as:
You also have the option to link to fonts that are hosted on the web, such as any of the Google Web Fonts. When using a font from Google Fonts, they’ll provide the style necessary for using this font.
This is an example of the style for the font family called Open Sans, which should be pasted into the <head> of the message.
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Then you’ll need to specify where the font is assigned using a CSS rule like this:
<span style="font-family: 'Open Sans', sans-serif;">Web Font Example</span>
For the email clients that do not support web fonts, we highly suggest selecting an appropriate fallback font. This basically means that if the email client does not support the web font, it will show the text in another font that is supported. In this example, the text will show as Open Sans if supported, but if not, it will show as Arial or a generic sans-serif font:
<span style="font-family: 'Open Sans', Arial, sans-serif;">Text here</span>
Outlook will ignore the web font and also the fallback font for text styled with a web font. Instead, Outlook will render the text using Times New Roman, no matter what font you had specified as a fallback font.
One work around for this issue is to hide the linked stylesheet from emails rendered in Outlook. You can use an Outlook conditional comment to do this, like the following:
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
Once you have all the font styles inserted, make sure to send yourself a test email. Once that looks good, go ahead and run an inbox preview in Critical Impact, to see how the message looks in other email clients before making a live send.
If you have a use-case where the font absolutely has to look the exact same in all email clients, you also have the option to save the text as an image. Use Photoshop to save an image or take a screenshot of some text on your website, so that you have an image of the text in the appropriate font family. Then insert this image into a message. Once the images are downloaded, the header will appear in the appropriate font family in all email clients.
Adding web fonts to email campaigns can add a layer of design flexibility and spice up your email layout. However, it will take a bit more time and will require testing to get the message looking just right.
Notifications