在 WordPress 块主题中管理字体

字体是任何网站设计的一个决定性特征。 这也包括 WordPress 主题，其中主题开发者通常会将 谷歌字体 等服务集成到“经典”基于 PHP 的主题的 WordPress 自定义器设置中。 但这在 WordPress 块主题中并非如此。 虽然将谷歌字体集成到经典主题中已有充分的文档记录，但目前在 WordPress 主题手册 中没有可用于块主题的内容。

这就是我们将在本文中探讨的内容。 块主题确实可以使用谷歌字体，但注册它们的过程与您之前在经典主题中使用的方式完全不同。

我们已经知道什么

正如我所说，就入门而言，我们能参考的内容很少。 Twenty Twenty-Two 主题是第一个基于块的默认 WordPress 主题，它演示了我们如何将下载的字体文件用作主题中的资产。 但它相当笨拙，因为它涉及几个步骤：（1）在 functions.php 文件中注册文件 以及（2）定义捆绑字体在 theme.json 文件中。

然而，自从 Twenty Twenty-Two 发布以来，该过程变得更加简单。 现在可以定义捆绑字体而无需注册它们，如 Twenty Twenty-Three 主题 所示。 但是，该过程仍然要求我们手动下载字体文件并将它们捆绑到主题中。 这是一种阻碍，有点违背了简单、直接、托管字体的目的，这些字体在快速的 CDN 上提供服务。

有什么新内容

如果您还不知道，Gutenberg 项目 是一款实验性插件，其中正在为 WordPress 块和网站编辑器开发的功能可供早期使用和测试。 在最近的 Theme Shaper 文章 中，Gutenberg 项目首席架构师 Matias Benedetto 讨论了如何使用 创建块主题 插件将谷歌字体（或任何其他下载的字体）添加到块主题中。

这个简短的 Learn WordPress 视频 提供了对创建块主题插件及其工作原理的良好概述。 但最重要的是，它确实如其所言：它创建了块主题。 但它通过在 WordPress UI 中提供控件来做到这一点，这些控件允许您创建整个主题、子主题或主题样式变体，而无需编写任何代码，也无需接触模板文件。

我已经尝试过了！ 由于创建块主题是由 WordPress.org 团队创作和维护的，我会说这是我们将谷歌字体集成到主题中的最佳方向。 也就是说，值得注意的是，该插件正在积极开发中。 这意味着事情可能会很快发生变化。

在我开始介绍它的工作原理之前，让我们先简要回顾一下在经典 WordPress 主题中添加谷歌字体的“传统”过程。

以前是如何完成的

这篇文章来自 2014 年的 ThemeShaper 提供了我们以前在经典 PHP 主题中如何做到这一点的绝佳示例，Ibad Ur Rehman 的这篇较新的 Cloudways 文章 也一样。

为了刷新我们的记忆，以下是来自默认 Twenty Seventeen 主题 的示例，展示了如何在 functions.php 文件中排队谷歌字体。

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  /**
   * Translators: If there are characters in your language that are not
   * supported by Libre Franklin, translate this to 'off'. Do not translate
   * into your own language.
   */
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

然后谷歌字体像这样预先连接到主题

function twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

传统方法有什么问题

很棒，对吧？ 然而，有一个问题。 2022 年 1 月，一家 德国地区法院对一个网站所有者处以罚款，原因是违反了欧洲的 GDPR 要求。 问题是什么？ 在网站上排队谷歌字体会暴露访问者的 IP 地址，从而危及用户隐私。 CSS-Tricks 之前已经介绍过这个问题。

该 创建块主题 插件满足 GDPR 隐私要求，因为它利用谷歌字体 API 仅用作本地供应商的代理。 字体是在同一个网站上提供给用户的，而不是在谷歌的服务器上，从而保护隐私。 WP Tavern 讨论了德国法院的裁决，并包含了有关自托管谷歌字体的指南的链接。

如何在块主题中使用谷歌字体

这让我们今天讨论了在 WordPress 块主题中使用谷歌字体的“现代”方式。 首先，让我们设置一个本地测试站点。 我使用 Flywheel 的 Local 应用程序进行本地开发。 您可以使用它或您喜欢的任何方法，然后使用 WordPress 主题团队的 Theme Test Data 插件 来处理虚拟内容。 当然，您还需要 创建块主题 插件。

您是否已经安装并激活了这些插件？ 如果是，请从 WordPress 管理菜单中导航到**外观**→**管理主题字体**。

“管理主题字体”屏幕显示主题的 theme.json 文件中已定义的任何字体的列表。 屏幕顶部还有两个选项

• **添加谷歌字体。** 此选项直接从谷歌字体 API 将谷歌字体添加到主题中。
• **添加本地字体。** 此选项将下载的字体文件添加到主题中。

我使用的是 WordPress 的一个完全空白的主题，名为 Emptytheme。 您可以使用自己的主题，但我想要指出，我已经将 Emptytheme 重命名为“EMPTY-BLANK”并对其进行了修改，因此根本没有预定义的字体和样式。

我想分享一下主题的文件结构和 theme.json 文件的屏幕截图，以显示实际上没有进行任何样式或配置。

让我们点击“添加谷歌字体”按钮。 它将我们带到一个新页面，其中包含从当前 谷歌 Fonts API 中选择任何可用字体的选项。

对于此演示，我从选项菜单中选择了**Inter**，并在预览屏幕中选择了 300、Regular 和 900 权重

保存我的选择后，我选择的 Inter 字体样式会自动下载并存储在主题的 assets/fonts 文件夹中

此外，请注意这些选择如何在该屏幕截图中自动写入 theme.json 文件中。 创建块主题插件甚至会添加字体文件的路径。

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "840px",
      "wideSize": "1100px"
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter",
          "slug": "inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": [
                "file:./assets/fonts/inter_300.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "900",
              "src": [
                "file:./assets/fonts/inter_900.ttf"
              ]
            },
            {
              "fontFamily": "Inter",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": [
                "file:./assets/fonts/inter_regular.ttf"
              ]
            }
          ]
        }
      ]
    }
  }
}

如果我们转到创建块主题的主屏幕，然后再次点击**管理主题字体**按钮，我们将看到 Inter 的 300、400（Regular）和 900 权重变体显示在预览面板中。

顶部的 演示文本预览框 甚至允许您在句子、标题和段落中使用字体大小选择滑块预览所选字体。 您可以在 这个 GitHub 视频 中查看此新功能的实际操作。

所选字体也将在网站编辑器**全局样式**（**外观**→**编辑器**）中可用，特别是在设计面板中。

从这里，导航到**模板** → **索引**，然后点击蓝色的**编辑**按钮来编辑index.html模板。我们想要打开**全局样式**设置，它以一个对比图标的形式显示在屏幕的右上角。当我们点击**文本**设置并在**排版**部分打开**字体**菜单时，我们看到了Inter!

同样的事情，但使用本地字体

我们也可以看看如何将本地字体添加到主题中，因为Create Block Theme插件提供了这个选项。好处是你可以使用你想要的任何字体文件，来自你喜欢的任何字体服务。

没有插件，我们必须获取我们的字体文件，将它们放到主题文件夹中的某个位置，然后使用传统的PHP方法在functions.php文件中将它们排队。但是，我们可以使用Create Block Theme界面，通过在**添加本地字体**屏幕上上传字体文件，让WordPress替我们完成这些工作。选择一个文件上传后，字体面定义框将自动填充。

即使我们可以使用任何.ttf、.woff或.woff2文件，我仅仅下载了来自Google Fonts的Open Sans字体文件用于此练习。我抓取了两种权重变体，常规和800。

当我们上传字体文件（一次一个）时，与Google Fonts选项相同的自动文件管理和theme.json更新再次发生。看看字体在我的主题文件夹中存放的位置，以及它们是如何添加到theme.json中的。

删除字体

插件还允许我们从WordPress管理界面删除块主题中的字体文件。让我们删除上一节中安装的Open Sans变体之一，看看它是如何工作的。

点击**删除**链接会触发一个警告，要求你确认删除操作。我们将点击**确定**继续。

让我们打开我们的主题文件夹并检查theme.json文件。果然，我们在插件屏幕上删除的Open Sans 800文件删除了主题文件夹中的字体文件，并且对它的引用在theme.json中已经不存在了。

正在进行的工作

有人正在讨论将这个“字体管理器”功能添加到WordPress核心，而不是需要单独的插件。

该功能的初始版本在仓库中可用，它使用与我们在本文中使用完全相同的方法。它也应该符合GDPR。该功能计划在今年晚些时候发布的WordPress 6.3版本中推出。

总结

Create Block Theme插件在处理WordPress块主题中的字体时，极大地增强了用户体验。插件允许我们添加或删除任何字体，同时尊重GDPR的要求。

我们看到了如何选择Google字体或上传本地字体文件会自动将字体放在主题文件夹中并在theme.json文件中注册它。我们还看到了字体如何在网站编辑器中的全局样式设置中成为一个可用选项。如果我们需要删除字体？插件也会完全处理它——无需触碰主题文件或代码。

感谢阅读！如果你有任何评论或建议，请在评论中分享。我很想知道你对WordPress中字体管理的这个可能方向的看法。

其他资源

我依靠大量研究来撰写这篇文章，并想分享我使用过的文章和资源，以提供额外的背景信息。

WordPress字体管理

• 如何将排版字体添加到WordPress块主题（Theme Shaper）
• 如何将Google字体添加到WordPress主题（Theme Shaper）
• 如何在WordPress中使用Google字体？（Cloudways）
• 使用Create Block Theme管理你的块主题字体（Learn WordPress）
• 使用Create Block Theme（WordPress.tv）

GitHub问题

• 全局样式/排版：管理字体集 (#45271)
• 字体管理器 (#46332)

欧洲GDPR要求

• 德国法院因使用Google托管字体而对网站所有者处以罚款，理由是违反了GDPR（WPTavern）
• 使用Google字体时如何遵守GDPR（Make WordPress Themes）
• 德国法院因使用Google字体而判处网站运营商赔偿用户100欧元（ePrivacy Blog）
• Bunny字体（CSS-Tricks）