如何在Sendgrid中使用自定义.woff格式字体？预览生效但邮件发送后不生效

问题原因 #

你遇到的预览生效、实际发送后失效是邮件客户端的默认规则导致的：绝大多数主流邮件客户端（Gmail、Outlook、国内邮箱服务商等）对CSS的支持度远低于浏览器，会默认屏蔽@import导入、外部字体link标签、@font-face规则，也不支持@media包裹的字体定义。Google字体能正常生效是因为少数客户端将Google字体加入了兼容白名单，你的自定义字体不在白名单范围内，所以无法加载。

可行解决方案 #

• 方案1：完善字体回退逻辑，全量使用内联样式
  不要依赖head中的样式块，所有字体样式直接写到元素的style属性中，同时补全字体回退栈，确保自定义字体加载失败时自动调用系统预装字体兜底，参考写法：

<p style="font-family: 'BrownLight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif">邮件内容</p>

• 方案2：调整自定义字体声明规则（仅兼容部分客户端）
  去掉@media包裹，直接在style块内声明字体规则，同时确保你的woff字体存放在配置了正确CORS跨域头的CDN上，参考写法：

<head>
<style type="text/css">
@font-face {
    font-family: 'BrownLight';
    font-style: normal;
    font-weight: 400;
    src: url('你的woff字体直链') format('woff');
    font-display: swap;
}
</style>
</head>

该写法仅能在苹果邮件、Thunderbird等少部分支持自定义字体的客户端生效，覆盖占比约30%，其余客户端仍会自动使用兜底字体。

• 方案3：高优先级内容用图片替代
  如果是标题、品牌标识等必须使用指定字体的核心内容，直接导出为带透明背景的图片嵌入邮件，这是兼容性最高、所有客户端都能正常展示的方案。

内容的提问来源于stack exchange，提问作者Irina Jekabsone