Is it possible to use custom fonts in sendgrid?

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');
}

I'd try a googlefont with a They seem to work for me the best for email — Niqql, Nov 15 '16 at 16:32
No, I think it's not depending on what you send with, and more on what client you are testing. Just test a few different forms of integrating and some different email clients and you'll see what works best for you — Niqql, Nov 15 '16 at 16:43

score 33 · Accepted Answer · answered Nov 16 '16 at 10:22

33

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.

answered Nov 16 '16 at 10:22

Ted Goas

7,051
1
35
42

6

Just a note that it only takes effect in preview mode and not in the design editor – McLovin Oct 03 '19 at 22:23
It works on any client mail, but not gmail :( Does anyone have the same issue ? – julio Mar 18 '22 at 15:35
4

@julestruong [Gmail doesn't support web fonts](https://www.caniemail.com/search/?s=font-face), no matter how you do it. – Ted Goas Mar 18 '22 at 17:16
good to know thx @TedGoas – julio Mar 21 '22 at 10:28
2

love how gmail doesn't support their own fonts being imported : p – sao Mar 29 '22 at 14:20

score 0 · Answer 2 · answered Apr 12 '21 at 18:38

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.

Is it possible to use custom fonts in sendgrid?

2 Answers2