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.
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]-->
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: *
