自定义字体在邮件与浏览器中无法生效，求助解决方案

1. 确认字体文件可正常访问 #

• 直接在浏览器地址栏输入字体URL（如https://publicurl/fonts/longines/myfontcalledBison.woff），检查能否下载文件。若无法打开，说明服务器存在路径错误、权限限制或CDN缓存问题，需先修复服务器配置。
• 若字体域名与网页域名不同，需确认服务器已配置CORS响应头（Access-Control-Allow-Origin），否则浏览器会拦截跨域字体加载。

2. 修正@font-face格式参数与冗余代码 #

• TTF格式的format值应为'truetype'，而非'ttf'；同时移除重复的local('TEST')（若本地无该字体，会导致浏览器跳过服务器字体）。修正后的TTF代码：

  @font-face { 
     font-family: 'TEST'; 
     font-style: normal;
     font-weight: 300;
     src: local('TEST'), url('https://publicurl/fonts/longines/myfontcalledBison.ttf') format('truetype');
  }
  

• WOFF格式的format值'woff'正确，但同样建议清理冗余的local声明。

3. 验证字体文件完整性与匹配性 #

• 用FontForge等工具打开字体文件，确认：
  • 字体包含font-weight:300（Light）的字重样式，若字体本身无该字重，浏览器会自动 fallback 到默认字体。
  • 字体文件未损坏，内部家族名称无特殊字符或拼写错误。

4. 修复调用代码的有效性 #

• 空<span>标签无法展示字体效果，需添加测试文本，并明确指定字重（避免继承父元素的其他字重）：

  <span style="font-family: 'TEST'; font-weight:300;">测试自定义字体显示</span>
  

• 用浏览器开发者工具（F12）查看元素的计算样式，确认TEST字体未被其他CSS规则覆盖。

5. 浏览器缓存与网络调试 #

• 打开开发者工具的「网络」面板，筛选「字体」类型，刷新页面查看请求状态：
  • 若返回404/403：检查文件路径与服务器权限。
  • 若返回200但字体未生效：查看响应内容是否为正确的字体文件。
• 强制清除浏览器缓存（Ctrl+Shift+R），避免旧缓存干扰测试。

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