内网演示时页面标题从 Inter 变成宋体,字号一样但字重全乱,控制台里 fonts.googleapis.com 请求超时,外网环境打开就正常。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,全局字体只引了 Google Fonts 的远程地址,没有本地 woff2 兜底,断网时 @font-face 加载失败,浏览器按字体栈回退到系统宋体。字体栈里也没写备用无衬线族。

「构建器字体回退」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。别只看报错的最后一行,往上看几行,真正的起因通常在上面。

@font-face {
  font-family: Inter;
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
}

同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。把这次用到的命令存进笔记,比记住结论有用,换个环境还能照着走。

具体做法是,把用到的字重下载成 woff2 放到主题目录,用 @font-face 本地引入;font-display 设成 swap,避免阻塞首屏;字体栈里补 system-ui 和 sans-serif,别只留一个远程字体名。

最后用这个标准收尾,断网打开页面标题仍是无衬线字体,字重和联网时一致,控制台没有失败请求。

作者 9823189