我停止使用 Google Fonts CDN
从 Google CDN 加载字体会减慢您的网站速度。
我以前习惯在 header 中使用单个链接，这感觉很方便。直到我查看了我的 Lighthouse 评分。
报告显示了一个问题：浏览器必须向 Google 服务器建立额外的连接，进行 DNS 查询和 TLS 握手。这导致了延迟。在缓慢的移动网络连接下，文本会长时间处于不可见状态。
我转向了自托管（self-hosting）。这只花了一个下午的时间。现在我所有的项目都会这样做。
以下是您需要的配置：
- 使用 WOFF2 格式。它比 WOFF 小 30%。您不再需要 .ttf 或 .eot 等旧格式。
- 转换您的字体。使用 fonttools 库将 .ttf 文件压缩为 .woff2。
- 使用 font-display: swap 属性。这会立即显示备用文本，防止在字体加载时出现文本不可见的情况。
- 预加载关键字体。为首屏（above the fold）使用的字体在 head 中添加一个 preload 链接。
- 务必使用 crossorigin 属性。如果您忘记了这一点，浏览器会下载两次字体。
- 对字体进行子集化（Subset）。如果您的网站使用英文，请移除未使用的字形（glyphs）。这可以将文件大小减少 70%。
- 缓存您的文件。使用较长的 cache-control 响应头将字体保留在浏览器中。
工作流程很简单： 转换为 WOFF2。使用带有 swap 的 @font-face。使用 crossorigin 预加载主字体。缓存文件。
这种配置可以提高加载速度，并从您的关键路径中移除第三方依赖。
您在生产环境仍在使用 Google CDN 吗？请在评论区告诉我原因。