Does @font-face work in email templates?

Question

Is there a way that I can embed custom web fonts using CSS's @font-face in email templates. This question is specifically related to email templates in MailChimp, but I would also like to know if there is a cross-browser solution that works on all or most email subscription services?

I have considered embedding it in the style header this way:

@font-face {
   src: url("http://www.remoteserver.com/fonts/font.otf");
   font-family: Font;
}

But I am afraid this would drastically effect page load. Is there a better way?

Update: For the sake of finding a universal solution these are NOT Google fonts, or fonts that exist in any sort of online source library.

Answer 1

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]-->