如何在 WordPress 中本地托管字体（经典和块主题！）

已发表: 2023-03-29

虽然使用自定义网络字体是使您的网站更加独特并突出您的品牌的好方法，但它也可能带来某些问题——从隐私到性能。解决方案：改为在您的 WordPress 网站上本地托管您的字体。

为了帮助您做到这一点，在这篇文章中，我们将告诉您关于该主题您需要了解的所有信息。下面，我们讨论为什么首先在 WordPress 本地托管字体是个好主意，然后为您提供代码和无代码解决方案的概要，以使其在经典主题和 WordPress 块主题中实现。

本地托管 Web 字体与远程托管 Web 字体

因此，我们可能要讨论的第一件事就是在本地托管字体甚至意味着什么。

如今，很多人使用所谓的网络字体来改变他们网站上的排版。这些是通常从第三方服务加载的字体文件，其中最流行的是 Google Fonts。

它有一个巨大的免费字体库，您只需添加一个特殊链接即可在您的网站上使用这些字体。然后，当有人请求查看您的站点时，他们会远程加载，以便您可以将它们显示给访问者。谷歌字体也被集成到许多主题中，因此用户可以非常轻松地切换字体。

与此相反，当您在本地托管字体时，您的字体文件不会从像 Google 这样的远程服务器加载，而是驻留在您自己的服务器上，访问者从那里接收它们。最后，两者只是以不同的方式实现了同样的目标。

为什么要在 WordPress 中本地托管字体？

将字体文件放在您自己的服务器上而不是使用第三方解决方案有很多充分的理由：

隐私问题——特别是如果您受欧洲隐私法的约束，使用特别是来自谷歌的网络字体可能会有问题。公司收集访问者 IP 地址和其他信息，如果您想使用这些信息，您需要在您的隐私政策中提及。否则，您有被罚款的风险。为了避免此类问题，许多人只是选择在本地托管字体。
喜欢的可用性——使用第三方托管字体的问题是你让自己依赖于提供它们的服务。如果他们倒闭了，服务器出现故障，或者他们的 URL 由于某种原因发生了变化，突然间您的网站就没有您选择的字体了。虽然对于谷歌来说这不太可能，但你永远不会知道，更疯狂的事情已经发生了。
更广泛的选择——虽然已建立的库提供了广泛的不同字体，但还有更多可用的字体不是网络字体形式。因此，了解如何在本地托管字体可为您提供更多购买和使用高级字体的可能性。
性能——托管您自己的字体时，您可以完全控制它们的加载方式。您可以配置它们的缓存并修复您自己服务器上的任何问题。此外，托管您自己的字体会导致更少的 HTTP 请求，因为您不需要从另一个连接中提取数据。以上所有都对网站性能有好处。

缺点和注意事项

同时，还有一些因素反对在本地服务器上托管字体：

再次强调性能——Google Fonts 尤其以提供高性能的方式设置。他们有一个 CDN 可以从最近的服务器提供字体文件。此外，许多最流行的字体已经存在于大多数浏览器的缓存中。因此，它们的加载速度比您的高级自定义字体快。这与您不应该托管自己的视频的原因相同。由于上述所有原因，如果您要使用本地字体，最好使用您自己的 CDN。
更高的复杂性——在本地设置你的字体文件比在你的主题中安装谷歌字体更困难。然而，正如您将在下面看到的，除非您完全采用手动方式，否则并没有那么难。事实上，有一些一键式插件解决方案。

关于文件格式的快速说明

您应该知道的一件事是字体有不同的格式，其中最常见的是：

TrueType 字体 (.ttf) — 这是 Apple 和 Microsoft 在 1980 年代开发的字体标准。它是操作系统最常用的格式，也可用于网络。虽然不是推荐的文件格式，但它是旧版 Safari、iOS 和 Android 的良好备选。
OpenType 字体 (.otf) — 基于 TrueType 并由 Microsoft 开发并注册商标的.otf格式用于可缩放的计算机字体。
嵌入式 OpenType 字体 (.eot) — 这是用于在 Web 上呈现的 OpenType 的旧格式。旧版本的 Internet Explorer 需要它。
Web 开放字体格式 (.woff) — WOFF 是专门为在网页中使用而开发的。它是具有压缩和额外元数据的 OpenType/TrueType 格式。 W3C 推荐使用这种格式，所有主流浏览器都支持这种格式。
Web Open Font Format 2.0 (.woff2) — .woff的改进版本，压缩效果更好，下载速度更快。由谷歌开发并与非常现代的浏览器兼容。
SVG 字体 (.svg) — 也可以将 SVG 形状用于字体，但目前仅 Safari 支持此方法。

那么，您应该选择哪种格式？当然，性能明智的 WOFF/WOFF2 最有意义。但是，为了与旧浏览器兼容，包含其他格式也是有用的。此外，某些提供商（例如 Google Fonts）仅提供.ttf或类似格式供下载。幸运的是，有一些方法可以解决这个问题，我们稍后会向您展示。

但是，在从供应商处为您的网站采购自定义字体时，请记住上述几点。

在 WordPress 中本地托管字体（手动，经典主题）

在这一点上，我们终于要讨论如何在您的 WordPress 网站上实际托管本地字体。我们有很多不同的场景要涵盖，我们从经典主题和手动方法开始。

这是最技术性的方法，因此在我们介绍更简单的解决方案之前，您将首先学习最难的方法。手工完成整个过程将帮助您了解其背后的机制，并在此过程中提高您的 WordPress 技能。

1. 获取字体文件

您需要在本地托管字体的第一件事是字体文件。 Google Fonts 允许您下载它们，但如上所述，尚未提供最新的文件格式。虽然理论上您可以自己将他们的文件转换成您想要的格式，但使用 Google Webfonts Helper 会更容易。

他们不仅为您完成了转换工作，该站点还为您提供了嵌入字体所需的代码。

您需要在这里做的第一件事是选择您喜欢的字体。为此，您可以使用左侧的列表或上方的搜索字段。找到所需的字体后（在本例中我们使用 Advent Pro），是时候在右侧选择您的字符集和样式了。

首先，检查您是否需要西里尔字母、希腊字母或拉丁字母扩展字符。在此下方，选中您需要的所有字体样式的框。请务必只选择那些您将在您的网站上实际使用的内容，这样您就不会让访问者加载他们甚至看不到的内容。

在Copy CSS下，您可以选择要下载的文件格式。

最佳支持设置包括.eot 、 .ttf 、 .svg 、 .woff和.woff2文件，而现代浏览器仅包括后两者。将其保留为默认设置通常是个好主意。

一旦您对自己的选择感到满意，请一直向下滚动并单击蓝色大按钮下载您的文件。

2. 将字体文件上传到您的 WordPress 网站

一旦你的硬盘上有了字体文件，第一步就是解压它们。之后，您需要将它们上传到您的服务器。

为此，通过 FTP 客户端连接到它并导航到您的主题目录（在wp-content > themes内）。在这里，将文件放在它们自己的目录中是有意义的，例如fonts 。因此，首先创建目录，然后将您的字体文件拖放到您的 FTP 客户端以上传它们。

这些文件很小，所以这不会花很长时间，您可以继续下一步。

3. 在您的 WordPress 主题中加载本地字体

接下来，如果你想在你的网站上使用本地字体，你需要先加载它们。为此，Google Webfonts Helper 已经提供了必要的标记。你可能之前已经看过了。

复制 css 标记以在 google webfonts helper 中本地托管字体

在底部，您可以自定义文件夹名称，以防您放置文件的文件夹不是fonts 。您应该已经做出选择，是使用代码以获得最高兼容性还是仅用于较早的现代浏览器。因此，现在是时候简单地单击带有标记的字段以标记所有内容，然后使用Ctrl/Cmd+C复制它。

之后，转到服务器上主题的文件夹并打开样式表 ( style.css )。在这里，将您之前复制的标记粘贴到其开头。

快速说明：为了使用相对路径@font-face ，这意味着如果您希望 WordPress 访问主题文件夹中fonts目录内的本地字体文件，您需要删除上面 URL 前面的../ 。所以，在我的例子中，每一行看起来像这样：

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

这是假设您的style.css文件直接位于您的主题文件夹中。

进行任何必要的更改后，保存并重新上传文件，您就可以在 WordPress 网站上使用本地字体了。

4. 消除网站上已经加载的字体

此步骤仅适用于您的主题已经引入第三方字体的情况。由于上述原因以及为了不加载相同的字体两次并查看您的本地字体是否生效，您想消除它。

如何关闭第三方字体首先取决于它们的加载方式。一些主题有专门的选项，您可以在其中切换到系统字体或类似字体。

如果出于某种原因，它们被硬编码到您的header.php文件中，您需要从那里删除它（为此使用子主题）。如果它们通过functions.php加载，您可以从那里删除调用。也可以在儿童主题中执行此操作。

最后，您可以试用禁用和删除 Google 字体。 Autoptimize 还有一个用于删除 Google 字体的选项，您可以在“额外”选项卡下找到它。

4.使用本地字体

最后一步是实际将您的本地字体分配给您网站上的元素。例如，在二十二十一主题中，您可以使用以下标记：

 .entry-title { font-family: Advent Pro; }

这会导致您的博文标题以新的 Advent Pro 字体出现：

在经典主题中托管本地字体：插件版

如果以上内容对您来说太复杂，并且您的网站上已经有 Google 字体（例如通过主题），您还可以使用 WordPress 插件解决方案在本地托管您的字体。最好的选择之一是 WordPress 目录中免费提供的 OMGF 或优化 Google 字体插件。通过Plugins > Add New以通常的方式安装它。

完成后，您会在Settings下找到一个新菜单项，称为Optimize Google Fonts 。单击它以进入此菜单：

用法非常简单。在大多数情况下，您所要做的就是单击底部的保存和优化。该插件随后会自动查找您网站上的所有 Google 字体样式表，并将其替换为本地版本。您可以在屏幕底部看到所有这些。

在这里，您还可以选择将插件配置为不加载某些字体或字体样式或预加载它们，这对于出现在首屏的排版很重要。还有一些设置，但它们主要用于某些功能无法正常工作的情况。

OMGF 还支付了一个附加组件，用于在您的站点上安装更多 Google 字体。它的价格非常公道，值得一试。其他插件选项包括 Perfmatters 和上述禁用和删除 Google 字体插件的专业版。

在 WordPress 块主题中手动托管字体

WordPress 块主题还允许您使用本地字体。事实上，在撰写本文时，这就是他们所做的一切，您目前无法在块主题中托管第三方字体（尽管正在制作用于此的 API）。

因此，前几个步骤，获取字体文件并将它们上传到您的服务器，与经典主题相同。从那里开始，差异就开始了。

在 theme.json 中加载字体

在块主题中， theme.json是样式的中央文件，您可以在其中设置字体。为此，请在settings和typography下查找fontFamilies 。

在块主题中，使用以下值添加新字体：

fontFamily — 将在 CSS 中使用的新字体的名称。这意味着它可以包含后备字体。
name — 将出现在 WordPress 后端的字体名称。
slug — WordPress 在 CSS 自定义属性中使用的唯一标识符。
fontFace — 这对应于 CSS @font-face规则，并且是真正使字体排队的东西。

为了工作， fontFace包含其他几条信息：

fontFamily — 字体的名称（再次）。
fontWeight — 由空格分隔的可用字体粗细列表。
fontStyle （可选）— 您可以在此处设置font-style属性，例如normal或italic 。
fontStretch （可选）——例如，对于具有压缩版本的字体系列。
src — 本地字体文件的路径。

您可以在fontFace中包含多个字体文件，例如加载不同的样式。用大括号和逗号分隔它们。对于与上面相同的字体示例，这是这样的：

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

在 Gutenberg 插件处于活动状态的情况下，您还可以在functions.php中使用wp_register_webfonts()代替，这是一个用于此目的的新 PHP 函数，但尚未包含在 Core 中。它采用与上述相同的参数，但采用 PHP 格式。