Question

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

我使用的代码示例：

{{1}}

Answer 1

我们使用SendGrid在StackOverflow上发送我们的一些电子邮件，如果它们被正确嵌入，我可以保证网络字体有效。我使用这段代码：

<!-- 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字体，自定义Web字体将在使用SendGrid支持它们的邮件客户端中工作。

Answer 2

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

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

然后在您的元素中使用该类：

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

正如之前在评论中所说，请注意它仅在预览模式下有效，而在设计编辑器中无效。

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

2 个答案: