CODEWITHSUNDEEP
cssemailfont-facehtml-emailmailchimp
JLF
JLF

Reputation: 2370

Does @font-face work in email templates?

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.

Upvotes: 12

Views: 15879

Answers (3)

prashant kumar
prashant kumar

Reputation: 931

I recently try to add custom fonts to email templates but those are not rendering in gmail and outlook so what happening is that these email clients are restricting download of custom fonts. In this case you have to write some fallback fonts which are supported by all browser. can take help of this link css fallback fonts

Upvotes: 0

holmis83
holmis83

Reputation: 16644

One gotcha is Cross-origin resource sharing (CORS). For at least Thunderbird you must make sure that the remote server (that hosts the font) sends a HTTP header like:

Access-Control-Allow-Origin: *

Upvotes: 2

zazzyzeph
zazzyzeph

Reputation: 1795

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

Upvotes: 11

Related Questions