网页字体造成两类性能问题：字体交换导致的布局偏移（CLS）和大字体文件或外部连接造成的加载时间 开销。本指南涵盖两者，提供将字体 CLS 降至零并将字体加载时间减少 60% 的具体设置。
WOFF2：你需要的唯一格式
WOFF2 使用 Brotli 压缩，自 2016 年起所有主流浏览器均支持。不再需要提供 WOFF、TTF 或 EOT。 只提供 WOFF2。典型拉丁字体子集化后可达 18 KB。
子集化：最大收益
如果网站只支持特定语言，只需要该语言的字符集。子集化为拉丁字符可将典型字体从 80–150 KB 减至 15–25 KB。Next.js 的 next/font 在构建时自动子集化并自托管 Google Fonts。
自托管 vs Google Fonts
Google Fonts 需要多次 DNS 查询和连接。自托管消除了这些步骤。快速连接差 ~100 ms，慢速连接差 500+ ms。
font-display：控制交换
| 值 | 行为 | CLS 风险 |
|---|---|---|
| swap | 立即使用回退字体，准备好后交换 | 高（交换时布局偏移） |
| optional | 极短阻塞，未准备好则不交换 | 无（从不交换） |
正文文本用 font-display: optional 完全消除 CLS。标题可用 font-display: swap。
预加载字体
为最关键的字体文件添加预加载链接。crossorigin 属性即使对同源字体也是必需的—— 缺少它会导致双重下载。
可变字体
可变字体在单个文件中包含所有粗细和样式。需要同一字体家族 2 种以上粗细时使用。从 320 KB （4 个文件）减少到约 70 KB（1 个文件）。