使用preconnect建立连接并结合@font-face自托管字体，通过font-display:swap和preload优化加载，可显著提升Google Fonts加载速度，改善页面渲染与SEO。
网页中使用 Google Fonts 时，字体加载慢是常见问题，尤其在中文或网络受限环境下。这会拖慢页面渲染，影响用户体验和 SEO 排名。通过合理使用 preconnect 和优化 @font-face 加载方式，可以显著提升字体加载速度。
使用 preconnect 提前建立连接
Google Fonts 资源通常托管在外部域名（如 fonts.googleapis.com 和 fonts.gstatic.com）上。浏览器默认不会提前连接这些第三方域名，导致请求延迟。
通过 <link rel="preconnect"> 告诉浏览器尽早建立连接，减少 DNS 查询、TCP 握手和 TLS 协商时间。
在 <head> 中添加：<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
注意：fonts.gstatic.com 需要加 crossorigin 属性，避免匿名请求带来的性能损耗。
立即学习“前端免费学习笔记（深入）”；
使用 @font-face 自托管字体文件
更进一步的优化是将 Google Fonts 下载后自托管，完全避开外部请求。这种方式加载最快，且不受网络波动影响。
步骤如下：
- 从 Google Fonts 下载所需字体（如通过 google-webfonts-helper 工具）
- 将字体文件（.woff2、.woff 等）放入项目静态资源目录
- 使用 @font-face 定义字体
示例 CSS：
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/open-sans-v17-latin-regular.woff2') format('woff2');
font-display: swap;
}
关键点：font-display: swap 可确保文本立即显示备用字体，等自定义字体加载完成后再替换，避免内容闪烁或长时间空白。
结合预加载（preload）优先加载关键字体
对于首屏关键字体，可使用 preload 强制浏览器提前加载。
在 <head> 中加入：<link rel="preload" href="/fonts/open-sans-v17-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
这样字体文件会在 CSS 解析前就开始下载，进一步缩短渲染等待时间。
总结建议
提升 Google 字体加载速度的核心策略：
- 用 preconnect 减少第三方连接延迟
- 优先使用 WOFF2 格式，压缩率高，兼容性好
- 设置 font-display: swap 保证文本可读性
- 关键字体配合 preload 提升优先级
- 条件允许时自托管字体，彻底掌控加载性能
基本上就这些方法，不复杂但容易忽略。合理组合使用，能有效解决字体加载慢的问题，让页面更快更流畅。
