AMP页面使用@font-face引入自定义字体失效，提示下载超时

看起来你的AMP页面里自定义图标字体加载超时了，控制台提示“Font download timed out for icons”，结合你的代码，我给你几个排查和解决的方向：

1. 调整超时时间并验证字体路径 #

你的amp-font组件设置了timeout="2000"，也就是2秒超时——如果你的字体文件偏大或者服务器响应较慢，2秒可能不够用。可以先把超时时间调高试试，比如改成timeout="5000"：

<amp-font layout="nodisplay" font-family="icons" timeout="5000" 
  on-error-remove-class="icons-loading" 
  on-error-add-class="icons-missing" 
  on-load-remove-class="icons-loading" 
  on-load-add-class="icons-loaded">
</amp-font>

同时，打开浏览器开发者工具的Network面板，筛选“Fonts”类型，确认字体文件的请求状态：

• 如果是404错误，说明路径/fonts/icos2/icomoon.ttf?126oo9不正确，要检查服务器上的字体文件位置是否匹配；
• 如果请求等待时间接近2秒，那大概率是超时时间设置太短，调高后就能正常加载。

2. 优化字体文件大小 #

TTF格式的字体文件通常体积较大，加载慢容易触发超时。推荐你做两个优化：

（1）优先使用WOFF2格式 #

WOFF2是压缩率最高的字体格式，AMP完全支持，你可以用转换工具把TTF转成WOFF2，然后在@font-face里优先加载WOFF2：

@font-face {
  font-family: 'icons';
  src: url('/fonts/icos2/icomoon.woff2?126oo9') format('woff2'),
       url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
  font-weight: normal;
  font-style: normal;
}

（2）精简图标字体 #

你目前只用了.icon-clock对应的一个图标，没必要加载整个字体文件。打开IcoMoon工具，导入你原来的字体项目，只保留需要的图标，重新导出字体文件——这样文件体积会大幅减小，加载速度更快。

3. 完善AMP Font的样式配合 #

你的amp-font组件设置了加载状态类，建议配合这些类优化字体渲染的体验：

• 给.icons-missing类添加备用样式，比如当字体加载失败时，用图片替代图标：

.icons-missing .icon-clock:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url('/path/to/clock-icon.png') no-repeat center;
  background-size: contain;
}

• 确保图标字体的样式只在加载完成后生效，避免出现不可见文本：

[class^="icon-"], [class*=" icon-"] {
  /* 默认隐藏，直到字体加载完成 */
  visibility: hidden;
}
.icons-loaded [class^="icon-"], .icons-loaded [class*=" icon-"] {
  visibility: visible;
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

4. 检查服务器配置 #

• CORS设置：如果字体文件和页面不在同一个域名下，服务器需要返回Access-Control-Allow-Origin头，允许跨域加载字体；
• 缓存设置：给字体文件配置长期缓存头，比如Cache-Control: max-age=31536000，这样用户第二次访问时会从本地缓存加载字体，不会触发超时。

先从调整超时时间和验证路径开始排查，这两个是最常见的原因，然后再逐步优化字体文件和样式，应该就能解决问题了。

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