Web fonts have become increasingly popular in email lately, but there are some things you should consider before using them in your campaigns.
Web fonts are not universally accepted in email. Web pages have better browser support, and email client support is finicky, especially in regards to Outlook. If you are going to use web fonts, you should always make sure to have a default font selected in your inline CSS – if you don’t do this, you’re allowing the email client to apply their preferred font to your email.
First, decide if it makes sense to use web fonts in your campaign. Most web-based email providers strip out the style tags, rendering your web font useless. Additionally, several versions of Outlook don’t recognize web fonts.
So how do I use web fonts?
Web fonts are specified within the STYLE tags at the beginning of the HTML. You can find a host of fonts available at www.google.com/fonts. Once you’ve selected the font you wish to use, you will need to create something similar to a “font call” by using “@import” in your style tags.
For example, the web font “Roboto” would be written using the @import rule like so:
<style> @import url(http://fonts.googleapis.com/css?family=Roboto); /* The rest of your CSS here */ </style>
You will need to add the font to the remainder of your CSS styling as well, so if you wanted to stylize headers to use this font you should place this within your STYLE tags as well:
h1 { font-family: Roboto, Arial, sans-serif; color: #000000; font-size: 36px;
line-height: 40px;}
You’ll notice that there is a font after “Roboto” – Arial. This lets the email client know to default to Arial when the web font is unavailable. This is just the content between the style tags, which again, tends to be stripped in webmail clients (Gmail, Yahoo!, AOL Mail, etc), so the important thing to note will be to repeat this content inline within the cells of the email that use text.
Use “Roboto” first; then follow it with a universally accepted font for email. This way, the default font is the font of your choosing. We recommend using a font that is accepted on both PC and MAC. Once you’ve selected your font(s), always be sure to perform rendering tests of your email before deployment.
We hope these web font hacks help you out in your future email campaigns. These attention-grabbing fonts are always great unless they aren’t rendering correctly and you can’t see anything at all! With a little fine-tuning of your inline CSS, you’ll be in good shape.
(Get more expert email advice in your inbox. Sign up for the PostUp Playbook!)