如何在 WordPress 中本地托管 Google 字体

托管总是有一些优势 谷歌字体 在本地而不是使用 Google 的 CDN。 然而,截至 2020 年 10 月,谷歌 CDN 的剩余优势消失了。 Chrome 移至 HTTP 缓存分区. 因此,现在每个网站都会重新下载 Google 字体,而不管它是否已经缓存在用户的浏览器中。 Safari 和 Firefox 已经这样做了。

很多 现在可以更快地在本地托管您的 Google 字体. 这意味着从您的服务器或 CDN 存储和交付您的网络字体,而不是依赖 Google 的 CDN。

在本地托管您的 Google 字体有多种优势:

  1. 它摆脱了第三方 DNS 查找和对 Google 的请求。 您拥有的 DNS 调用越少越好。
  2. 您可以利用您的服务器或 CDN,包括 HTTP/3、缓存过期标头等技术。您可以从服务器或 CDN 提供的资源越多越好。
  3. 您可以更好地控制字体的传递方式。 更容易预加载您的 Google 字体并添加 CSS 属性,例如 font-display: swap 如所须。
  4. 解决 Google 警告,例如“减少第三方代码的影响”。
  5. 的使用 谷歌字体违反 GDPR,除非您在本地托管它们。

使用 Perfmatters 在本地托管您的 Google 字体

请按照以下步骤使用 Perfmatters 在本地托管您的 Google 字体。 它又快又容易!

步骤1

单击进入 Perfmatters 插件设置。

如何在 WordPress 中本地托管 Google 字体
Perfmatters 插件设置

第2步

单击“字体”选项卡。

如何在 WordPress 中本地托管 Google 字体
性能问题字体

第 3 步

切换到“本地 Google 字体”。

如何在 WordPress 中本地托管 Google 字体
在 Perfmatters 中启用本地 Google 字体

此功能将自动找到您网站上的任何 Google 字体引用并从 fonts.google.com 本地到以下目录: /wp-content/cache/perfmatters/yourdomain.com/fonts/

它还将创建一个相应的样式表(xxxx.google-fonts.css) 在您的站点标题中链接的同一目录中。 这样就不会再向 Google 发出 DNS 请求,因为您的字体现在在本地样式表中被引用。

笔记: 启用该功能后,当您首次访问站点上的页面时,会下载字体。

此步骤是可选的,但我们建议切换显示交换以加快字体加载速度。 这对于防止出现有关 Core Web Vitals 的警告非常重要。 阅读更多关于 显示交换.

步骤 5(可选)

如果您使用的是带有自定义 URL 的传统 CDN (https://cdn.domain.com) 您需要在 CDN URL 字段中输入它。

如果您使用的是完整代理,例如 Cloudflare 如果没有自定义 CDN URL 或使用 Perfmatters 中的 CDN 重写功能,您可以将此字段留空。

第 6 步

向下滚动并单击“保存更改”。

其他提示

  • 在本地托管您的 Google 字体后,您还可以预加载它们。 查看我们的文档 如何预加载资源.
  • 如果你有一个 预连接 或者 DNS 预取 对于谷歌字体设置,我们的插件会自动删除这些。 在本地托管字体的主要优点是您不必经常联系 Google。

如何清除本地字体

有时您可能需要清除本地字体并重新开始。 也许您更改了主题,或者正在选择不同的字体。

按照以下步骤清除 Perfmatters 中的本地字体。 这也将清除相应的样式表。

步骤1

单击进入 Perfmatters 插件设置。

如何在 WordPress 中本地托管 Google 字体
Perfmatters 插件设置

第2步

单击“字体”选项卡。

如何在 WordPress 中本地托管 Google 字体
性能问题字体

第 3 步

点击“清除本地字体”。

如何在 WordPress 中本地托管 Google 字体
清除 Perfmatters 中的本地字体

对本地 Google 字体进行故障排除

如果您在使用本地 Google 字体选项时遇到问题,这里有一些故障排除提示。

  • 如果您的主题或插件通过添加字体 @import url 这些目前不会被提取。 我们将看看将来是否可以添加对此的支持。
  • 如果你得到一个 blocked:mixed-content 警告,请确保您的 WordPress 地址 (URL) 和站点地址 (URL) 都已更新为 HTTPS。 有时这可能在迁移到 HTTPS 并添加重定向后发生,但该站点的原始 URL 从未更新。
  • 如果您有 iThemes Security 或真正简单的 SSL 之类的安全插件,这些可能会掩盖您的 WordPress 地址 (URL) 和站点地址 (URL)。 要仔细检查,请暂时关闭安全插件并确保 URL 是 HTTPS。
  • 如果您有在另一个插件中运行的 Web 字体加载器(例如 LiteSpeed),您需要先关闭该功能,以便我们的本地 Google 字体功能可以获取您的字体。
声明:本站资源绿色无后门无广告,可放心下载。如无特殊说明或标注,均为本站原创发布,转载请注明出处!