是否可以在 sendgrid 中使用自定义字体？

Question

sendgrid可以导入字体吗？我一直在尝试使用@font-face，但它似乎不起作用，但也许我做错了什么。

我使用的代码示例：

@font-face {
   font-family: Avenir;
   src: url('http://cdn.linktofont.com/font.ttf');
}

Answer 1

我们使用 SendGrid 在 Whosebug 发送我们的一些电子邮件，我可以保证如果正确嵌入网络字体，它们就可以正常工作。我使用这个代码：

<!-- 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>

我不确定如何最好地嵌入像 Avenir 这样的高级字体，也不知道电子邮件客户端对 .ttf 格式的支持程度如何。但是以这样的方式引用 Google 字体，自定义网络字体将在使用 SendGrid 支持它们的邮件客户端中工作。

Answer 2

我遇到了同样的问题，我发现使用我的自定义 .ttf 文件使其工作的唯一方法是定义并使用 class。在页眉选项中添加您的样式：

@media screen {
    @font-face {
        font-family: 'MyFont'; 
        src: url('https://some-server/fonts/MyFont.ttf'); 
        format('truetype');
    }
}
.title {
    font-family: 'MyFont';
}

然后只需在您的元素中使用 class：

<h1 class="title"> Some fancy title </h1>

而且正如之前的评论所说，注意它只在预览模式下生效，而不是在设计编辑器中。

是否可以在 sendgrid 中使用自定义字体？

Is it possible to use custom fonts in sendgrid?

email

fonts

html-email

sendgrid