在SendGrid中使用自定义字体是否可行？

Question

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

我使用的代码示例：

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

- Kaasstengel

---

我会尝试使用Google字体和<link>标签。在电子邮件中，它们对我来说似乎是最好的选择。 - Niqql

你也尝试使用SendGrid了吗？ - Kaasstengel

不，我认为这并不取决于你发送的内容，而更取决于你测试的客户端。只需尝试几种不同的集成形式和一些不同的电子邮件客户端，你就会发现什么最适合你。 - Niqql

Answer 1

我们在StackOverflow使用SendGrid发送某些电子邮件，我可以保证如果嵌入正确，Web字体是有效的。我使用以下代码：

我们在StackOverflow使用SendGrid发送某些电子邮件，我可以保证如果嵌入正确，Web字体是有效的。我使用以下代码：

<!-- 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 字体。

- Ted Goas

---

请注意，此功能仅在预览模式下生效，而不在设计编辑器中生效。 - McLovin

它可以在任何客户端邮件上运行，但不适用于Gmail :( 有人遇到同样的问题吗？ - julio

无论你如何操作，Gmail 都不支持 Web 字体。参考链接：https://www.caniemail.com/search/?s=font-face - Ted Goas

好的，谢谢 @TedGoas - julio

喜欢 Gmail 不支持导入他们自己的字体 :p - sao

Answer 2

我曾经遇到过同样的问题，而我发现使用自定义的.ttf文件使其正常工作的唯一方法是通过定义并使用一个类。在头部选项中添加您的样式：

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

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

- Federico Rodriguez La Rosa