Gmail中HTML邮件模板Poppins字体被替换为Times New Roman解决求助

核心原因 #

该问题由Gmail对HTML邮件的样式限制导致：

1. Gmail默认会拦截/忽略<head>标签内通过<link>引入的外部字体资源，你当前使用的Google Fonts在线链接在Gmail环境中完全不会加载。
2. Gmail对<head>内的全局CSS支持度极低，大部分全局样式会被直接过滤，必须依赖内联样式生效，且你当前代码中大部分包含文本的<td>、<a>标签都没有添加内联的font-family属性。

可行解决方案 #

• 替换外部字体引入方式：将<link>引入Google Fonts的方式替换为@font-face内嵌到<style>标签中，同时将字体文件转为base64编码内嵌，避免Gmail拦截外部资源请求，示例写法如下：

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url(data:font/woff2;base64,此处替换为Poppins 400字重的woff2格式base64编码) format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url(data:font/woff2;base64,此处替换为Poppins 500字重的woff2格式base64编码) format('woff2');
}

• 补全所有文本元素的内联字体属性：所有包含文本的标签，包括<td>、<a>都必须添加内联的font-family样式，同时必须补充 fallback 字体，避免自定义字体加载失败时直接降级为Times New Roman，示例写法：

<td style="padding: 14px 0 0 53px;font-weight: 400;font-size: 12px !important;line-height: 18px;height: 18px;width: 313px;font-family: 'Poppins', Arial, sans-serif;">
  Aby zresetować hasło, proszę kliknąć w poniższy link:
</td>
<a href="#" style="text-decoration: none;font-weight: 500;font-size: 12px;color: #ffffff;line-height: 30px;background-color: #232835;margin-left: 51px;margin-top: 7px;padding: 6px 36px 6px 36px;border-radius: 3px;letter-spacing: -2%;font-family: 'Poppins', Arial, sans-serif;">RESETUJ HASŁO</a>

• 优化全局样式降级逻辑：把<style>标签内的全局font-family配置也补充fallback字体：

table {
  font-family: 'Poppins', Arial, sans-serif;
}

如果对字体一致性要求极高，也可以将重要的标题类文本导出为图片插入邮件，可保证所有邮件客户端显示效果完全一致。

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