Menu

A currated repository of web design tools and resources that I use...

Webfonts in Emails

August 4, 2016 - HTML Emails

Many people still avoid webfonts in theirĀ emails altogether because the support still isn’t great. But if most of your subscribers use mobile phones and Apple Mail, then you might want to consider the benefits that webfonts can offer you. The problem I ran into is that for the outlook users, my emails fall back to Times New Roman. After some headaches, I finally found a solution that worked in all versions of outlook.

First I loaded my web fonts:

@font-face {
 font-family: 'fontname';
 src: url('https://www.mydomain.com/newsletter/assets/fonts/fontname.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

Then I call the font with my fallback stack:

body {
 font-family: 'fontname','PT Sans','lucida sans',Helvetica,Arial,sans-serif;
 font-weight: normal;
}

Then I used conditional comments to load styles for outlook only:

<!--[if mso]><style>
	body {  
	 font-family:Arial, Helvetica, sans-serif !important;  
	 font-weight: normal !important;
	}
	</style><![endif]-->

Using important was necessary sometimes. I wasn’t sure what triggered it to work without it at times. It is also important that the outlook code is AFTER all your other CSS so it overrides it.

Hope this helps you!

Categories: HTML Emails  Tags: ,

Daniel Posted by

Leave a Reply

Your email address will not be published. Required fields are marked *