Does @Font-Face Work in Email Templates

Does @font-face work in email templates?

You can! But with all things cool in html-email it will not work in every client/browser.

@font-face will work in iOS and (most of) Android's default clients, Apple Mail, and Outlook 2011 for Mac. Everything else either strips your whole <style> tag or just ignores it.

Some precautions: font-face freaks out Outlook '07-'13, so wrap your font-face CSS in it's own style tag, in an MSO conditional. Make sure you use all types of font files in your @font-face- otf, ttf, eot, svg so it works across browsers. Then make sure you have good fallbacks when you try and use it. At the least you should have font-family:'Custom Font',sans-serif; (or serif).

<!--[if !mso]><!-->
<style type="text/css">
    @font-face {
    font-family: 'Custom-Font';
    font-weight: 400;
    font-style: normal;
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf')  format('truetype');
    }
</style>
<!--<![endif]-->

how to use customs fonts in emails or email templates

Simply put.. you can't. Or rather, you shouldn't due to lack of support.

The only way to use custom fonts is by creating images for the text. That may or may not be feasible depending upon the amount of text.

How to use custom font in email template

@font-face is not supported in some email clients, but not all. Depending on what fonts you're designing with, you could specify a font-stack the starts with a custom font and falls back to similar system fonts. Something like:

font-family: 'open sans', 'helvetica neue', sans-serif;

The email won't match pixel perfect in every email client, but does it have to? More info on email typography, web fonts, and fallbacks.

You can make an image of each text blog as Jeff suggests, but it's not a great solution that needs to scale.

---

Related Topics