如何在 WordPress 中自托管 Google 字体

从 Google 服务器加载 Google Fonts 会创建第三方连接,传输访客的 IP 地址。对于服务欧盟访客的网站,这会引发 GDPR 合规问题。自托管可以完全消除这种连接,同时让您控制缓存和交付方式。

本指南涵盖了在 WordPress 中本地托管字体的三种方法:适用于区块主题的原生字体库、适用于经典主题的手动实现,以及插件替代方案的简要说明。

为什么要自托管 Google Fonts?

当访客加载您的网站时,他们的浏览器会从 fonts.googleapis.com 和 fonts.gstatic.com 获取字体。每个请求都会将他们的 IP 地址发送到 Google 的服务器。

自托管将字体文件移至您的服务器。优势包括:

• 隐私合规:无需记录或证明第三方数据传输
• 性能控制:设置您自己的缓存头并使用预加载
• 可靠性:不依赖外部服务

Google CDN 与配置良好的本地设置之间的性能差异通常很小。大多数网站的主要驱动因素是 GDPR 合规,而非速度。

区块主题:使用原生字体库

WordPress 6.5+ 包含一个字体库,可以下载并在本地提供字体。这是区块主题最简单的方法。

步骤:

1. 导航至 外观 → 编辑器
2. 打开 样式(右上角)→ 排版
3. 点击 管理字体 → 安装字体
4. 搜索您的字体,选择所需的字重,然后点击 安装

WordPress 会将 WOFF2 文件下载到 wp-content/fonts/ 并在主题配置中注册它们。安装后不会发生外部连接。

限制:这仅适用于区块主题。经典主题需要手动实现。

经典主题:手动实现

对于经典主题,您需要下载字体并自己编写 CSS。

下载和转换字体文件

1. 访问 Google Fonts,选择您的字体并下载
2. 如果下载包含 TTF 文件,使用 google-webfonts-helper 或 Transfonter 将其转换为 WOFF2
3. 将文件上传到您的主题:wp-content/themes/your-theme/fonts/

使用 CSS 注册字体

将以下内容添加到主题的 style.css 或自定义样式表中:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

关键属性:

• font-display: swap:立即显示回退文本,然后在字体加载时切换。防止文本不可见。
• font-weight: 100 900:对于可变字体,在一个文件中声明完整的字重范围。

对于静态字体,为您使用的每个字重创建单独的 @font-face 规则。

应用字体

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

始终包含系统字体回退。

禁用远程加载

通过打开 DevTools(F12),转到 Network 选项卡,按 Font 筛选并重新加载,检查是否没有远程字体加载。查找对 fonts.gstatic.com 的请求。

如果您的主题远程加载 Google Fonts,请检查其设置中是否有禁用选项。否则,您可能需要在 functions.php 中取消排队样式表,或使用 Disable and Remove Google Fonts 等插件。

插件替代方案

几个插件可以自动化本地字体托管:

• OMGF (Optimize My Google Fonts):自动检测和下载字体
• Local Google Fonts:类似功能,支持子集
• WP Rocket:在其媒体设置中包含一键选项

当主题或页面构建器以难以手动覆盖的方式加载字体时,插件效果很好。它们不是必需的——上述方法无需插件即可工作。

最佳实践

优先使用 WOFF2:它比 WOFF 提供约 30% 更好的压缩率,浏览器支持率超过 97%。除非需要支持 IE11,否则跳过旧格式。

尽可能使用可变字体:一个文件涵盖所有字重,减少 HTTP 请求。

谨慎使用预加载:仅预加载首屏使用的字体:

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

有条件地包含 crossorigin:仅在服务器发送适当的 CORS 头时添加。

避免使用 @import:它会阻塞渲染。改用 <link> 标签或 @font-face。

结论

对于区块主题,WordPress 字体库处理一切——通过编辑器安装字体即可完成。对于经典主题,下载 WOFF2 文件,编写 @font-face 规则,并验证没有远程连接。

自托管让您完全控制字体交付并消除第三方数据传输。实施只需几分钟,结果是一个更清洁、更注重隐私的网站。

常见问题

如果我的网站不针对欧盟访客,是否需要自托管 Google Fonts?

严格来说,无论您的网站位于何处,GDPR 都适用于欧盟访客。如果有任何欧盟流量访问您的网站,自托管是最安全的方法。除了合规性之外,本地托管还消除了第三方依赖,并让您直接控制缓存和交付。

我可以在经典主题中使用 WordPress 字体库吗?

不可以。WordPress 6.5 中引入的内置字体库仅适用于区块主题。对于经典主题,您需要手动下载 WOFF2 文件,在 CSS 中编写自己的 font-face 规则,并确保主题或插件不会产生远程字体请求。

如何验证 Google Fonts 不再从外部服务器加载?

使用 F12 打开浏览器 DevTools,转到 Network 选项卡,按 Font 筛选,然后重新加载页面。如果看到对 fonts.googleapis.com 或 fonts.gstatic.com 的任何请求,说明远程字体仍在加载。检查主题设置或在 functions.php 中取消排队远程样式表。

我应该在 WOFF2 旁边包含 WOFF 文件以获得更广泛的浏览器支持吗?

WOFF2 覆盖超过 97% 的浏览器,因此很少需要 WOFF。主要例外是如果您必须支持 Internet Explorer 11。对于大多数现代 WordPress 网站,仅提供 WOFF2 可以保持字体负载更小,font-face 声明更简单。