如何在HTML邮件模板中加载谷歌/自定义字体？现有方法失效求解答

一、适合邮件模板的字体类型 #

邮件客户端对字体的支持差异极大，优先选择以下类型：

• 系统安全字体：所有邮件客户端都支持，是最稳妥的选择：
  • 无衬线：Arial、Helvetica、Verdana、Tahoma、Trebuchet MS
  • 衬线：Georgia、Times New Roman、Palatino
  • 等宽：Courier New、Lucida Console
• 嵌入字体（@font-face）：部分主流客户端（Apple Mail、Gmail、Outlook 365网页版）支持，需提供woff2/woff/truetype等兼容格式
• 谷歌字体：仅在部分客户端生效，不能作为唯一依赖，必须搭配系统字体 fallback

二、解决谷歌字体加载失效的方案 #

你用的<link>和@import方法在很多邮件客户端会被拦截，试试以下优化：

1. 强制添加系统字体 fallback
   无论自定义字体是否加载成功，都要在font-family里指定备选系统字体，避免显示默认的无衬线字体：

   body, p, h1, h2 {
     font-family: 'Kalnia', Georgia, Times New Roman, serif;
   }
   

2. 改用@font-face直接嵌入字体代码
   跳过<link>和@import，直接用谷歌字体提供的@font-face代码（可从谷歌字体页面获取），放在邮件模板的<style>标签内，兼容性更好：

   @font-face {
     font-family: 'Kalnia';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/kalnia/v1/k3kUo8YF3sQxW4P8RQ.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
   

3. 移除不必要的preconnect标签
   多数邮件客户端会过滤<link rel="preconnect">标签，直接删掉这两行代码，减少冗余，避免潜在的加载拦截。

4. 针对客户端的兼容细节

   • 桌面版Outlook：完全不支持自定义字体，只能依赖系统字体，确保fallback设置正确
   • Gmail：仅支持HTTPS的字体资源（谷歌字体满足），且需将CSS放在<head>的<style>内，不能用外部文件
   • Apple Mail：支持所有加载方式，但仍建议优先用@font-face

额外注意事项 #

• 邮件模板的CSS必须内联或放在<head>的<style>标签中，禁止使用外部CSS文件（多数客户端会拦截）
• 务必在主流邮件客户端（Gmail、Outlook、Apple Mail）测试显示效果

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