Is it possible to use custom fonts in sendgrid?

Arnold picture Arnold · Nov 15, 2016 · Viewed 7.9k times · Source

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

Ted Goas picture Ted Goas · Nov 16, 2016

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.