Is it possible to use custom fonts in sendgrid? - email

Question

Is it possible to import fonts in sendgrid? I've been trying to use #font-face but it doesn't seem to work, but maybe I'm doing something wrong.
Example of the code I used:
#font-face {
font-family: Avenir;
src: url('http://cdn.linktofont.com/font.ttf');
}

Answer 1

We use SendGrid to send some of our emails at StackOverflow, and I can vouch that web fonts work if they are embedded correctly. I use this code:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<style>
* {font-family: Roboto, sans-serif;}
</style>
I'm not sure how to best embed a premium font like Avenir, and don't know how well the .ttf format is supported in email clients. But referencing a Google font in a manner like this, custom web fonts will work in mail clients that support them using SendGrid.

Answer 2

I had the same issue, and the only way that I have found to make it work using my custom .ttf file was by defining a and using a class. In the Header options add your styles:
#media screen {
#font-face {
font-family: 'MyFont';
src: url('https://some-server/fonts/MyFont.ttf');
format('truetype');
}
}
.title {
font-family: 'MyFont';
}
Then just use that class in your element:
<h1 class="title"> Some fancy title </h1>
And as was said in a comment before, note that it only takes effect in preview mode and not in the design editor.