Sendgrid 中的自定义 .woff 格式字体 - 如何使用？

Question

我想知道如何在 Sendgrid 中使用自定义字体。 Google 字体正常工作，但自定义 .woff 格式字体似乎不起作用。我尝试了以下 3 种解决方案。当我使用解决方案 nr 时。 1 在预览选项卡中它被应用，但在电子邮件中它不是

如有任何建议，我们将不胜感激。

1.

<head><link href="https://somelink" rel="stylesheet" type="text/css"><style> 
* { font-family: 'BrownLight', sans-serif; } 
</style></head>

2.

<head>
<style>
@media screen {
    font-family: 'BrownLight';
    src: url('somelink.woff') format('woff');
}
.text {
    font-family: 'BrownLight';
}
</style>
</head>

3.

<head>
 <style>
    @media screen {
        @import url('https://somelink');
    }
    * { font-family: 'BrownLight', sans-serif; } 

 </style>
</head>

Answer 1

此处为 Twilio SendGrid 开发人员布道师。

我假设您有一个 URL 托管 WOFF 字体文件的地方。然后，您可以遵循 Google 字体的作用，例如 this example.

<head>
  <style>
    @font-face {
      font-family: 'BrownLight';
      font-style: normal;
      font-weight: 200;
      font-display: swap;
      src: url(YOUR_FONT_URL) format('woff');
    }

    .text {
      font-family: 'BrownLight', sans-serif;
    }
  </style>
</head>

不过，请注意许多客户端不支持网络字体。你可以在 adding custom fonts in the SendGrid documentation here.

上看到更多

Sendgrid 中的自定义 .woff 格式字体 - 如何使用？

Custom .woff format fonts in Sendgrid - how to use?

html

css

sendgrid