字体加载策略与 SEO 体验：自托管、font-display 与 CLS

引言：标题一闪变成另一种字体

页面先显示系统字体、半秒后换成品牌字体，文字还跳了一下——这是字体加载的 FOIT/FOUT 与 CLS。字体处理不当既影响体验也拖累核心网页指标。

原理分析：font-display 的四种取值

• auto/block：先隐身再换，易 FOIT 黑块、CLS 大。
• swap：先用 fallback 立即显示，字体到了再换，FOUT，CLS 小。
• fallback：极短隐身期，权衡。
• optional：网络差就用 fallback 不换，最快。
  自托管可消除对 Google Fonts 的额外 DNS/TLS 往返，提速明显且合规（数据不出境）。

保姆级实操

自托管并 swap：

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
  size-adjust: 100%;
}

用 preload 关键字体：

<link rel="preload" as="font" href="/fonts/brand.woff2" type="font/woff2" crossorigin>

WordPress 侧：用 OMGF / Perfmatters 把 Google Fonts 转本地自托管并加 display=swap。

常见踩坑

1. 用 block 又忘 preload，首屏黑块几百毫秒。
2. Google Fonts 默认无 swap 旧版，CSS 改不了需插件。
3. 案例：某站用 Google Fonts，国内访问先等 gstatic 的 DNS+TLS 近 500ms，标题 FOUT 且 CLS 0.12。自托管 + preload + swap 后 CLS 降到 0.02、LCP 降 400ms。
4. preload 了却没 crossorigin，重复下载。
5. 自托管字体没设缓存，每次回源。

总结

判断标准：字体不造成可见黑块、CLS≤0.1。行动清单：能自托管就自托管 → font-display:swap → 关键字体 preload → 用插件替代 Google Fonts 外链。详见CLS 布局偏移修复。