AMP自定义字体通过CDN链接访问时无法加载的问题咨询

问题根源分析 #

当通过AMP Cache（即cdn.ampproject.org）访问页面时，AMP会自动将页面内的资源URL转换为缓存代理格式（比如你看到的/r/s/example.com/...前缀），但如果字体资源没有配置正确的跨域规则，或者原始URL处理存在异常，就会导致字体加载失败。你直接用?amp=1访问时能正常加载，是因为此时资源从原服务器直接获取，没有经过AMP Cache的跨域校验。

具体解决方案 #

1. 确保字体URL格式正确 #

你当前的@font-face代码已经使用了完整的绝对URL（包含https://），这一步是正确的：

@font-face{ 
  font-family:font-icon; 
  src: url('https://example.com/skin/frontend/base/default/css/plumrocket/pramp/icon.ttf') format('truetype'); 
}

AMP Cache会自动将这个URL转换为合法的代理路径：https://cdn.ampproject.org/r/s/example.com/skin/frontend/base/default/css/plumrocket/pramp/icon.ttf，这个格式本身没有问题。

2. 配置字体资源的CORS响应头 #

这是最核心的解决步骤：AMP Cache加载跨域资源时，要求资源所在服务器返回允许cdn.ampproject.org访问的CORS头。你需要根据服务器类型添加对应配置：

• Apache服务器：在.htaccess文件中添加以下规则

  <FilesMatch "\.(ttf|otf|woff|woff2|eot)$">
    Header set Access-Control-Allow-Origin "https://cdn.ampproject.org"
    Header set Access-Control-Allow-Methods "GET"
  </FilesMatch>
  

• Nginx服务器：在站点配置文件中添加以下规则

  location ~* \.(ttf|otf|woff|woff2|eot)$ {
    add_header Access-Control-Allow-Origin "https://cdn.ampproject.org";
    add_header Access-Control-Allow-Methods "GET";
  }
  

如果希望更宽松的跨域规则（不推荐，除非必要），可以将Access-Control-Allow-Origin设置为*。

3. 验证配置有效性 #

配置完成后，直接在浏览器中访问AMP Cache的字体代理URL（比如https://cdn.ampproject.org/r/s/example.com/skin/frontend/base/default/css/plumrocket/pramp/icon.ttf），如果能正常下载字体文件，说明CORS配置生效。

4. 检查AMP页面有效性 #

最后，用AMP官方校验工具检查页面是否存在其他不符合规范的代码，避免其他错误影响资源加载。

内容的提问来源于stack exchange，提问作者Darren June S. Sumaoy