12

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.

JLF
  • 2,280
  • 4
  • 28
  • 45
  • Only in apple mail - https://www.campaignmonitor.com/resources/will-it-work/webfonts/ – Luís P. A. Feb 03 '15 at 16:14
  • @LuisP.A. After looking through that page it seems that there really isn't any sort of method, even with `@import`, that is very cross-browser and cross-client for web fonts in emails? – JLF Feb 03 '15 at 16:18

3 Answers3

10

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]-->
zazzyzeph
  • 1,727
  • 1
  • 12
  • 19
2

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: *
holmis83
  • 15,922
  • 5
  • 82
  • 83
0

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

prashant kumar
  • 601
  • 8
  • 7