如何将自定义字体添加到 WordPress

已发表: 2019-07-09

如果您希望您的网站真正脱颖而出，那么使用自定义字体将帮助您实现这一目标。 有数千种漂亮的自定义字体可供选择，通过为您的项目选择合适的字体，您将能够创建一个不仅独特而且反映您的风格和品牌的网站。 那么如何向 WordPress 添加自定义字体呢？

在本文中，我们将介绍您需要了解的有关将自定义字体应用于您的网站的所有信息。 这包括：

  • 在哪里可以找到自定义字体
  • 如何使用插件 Easy Google Fonts 将 Google 字体添加到您的网站
  • 手动将 Google 字体添加到您的网站（无需插件）
  • 将 Adob​​e 字体添加到 WordPress
  • 如何将任何自定义字体添加到您的 Web 空间

准备好开始了吗？

在哪里可以找到自定义字体？

谷歌字体

如今，许多高级 WordPress 主题都附带了大量的自定义字体。 但是，这些通常会增加主题膨胀，并且对您网站的加载时间的影响比您想象的要大。 您还会发现您实际上最多只使用了几种自定义字体，因此您的主题提供的大多数字体将永远不需要。

因此，我们建议选择轻量级的 WordPress 主题，然后您可以在必要时添加自定义字体。 您可以在许多地方找到适合您网站的自定义字体。 让我们来看看…

  • 谷歌字体——最受欢迎的选择是谷歌字体，它提供了一个免费目录，其中包含 900 多种开源设计字体，可用于 135 多种语言。 这些字体可以快速浏览，然后无缝集成到任何网页设计项目中。
  • Adobe Fonts（以前称为 Typekit）——虽然 Typekit 提供免费和高级版本的服务，现在更名为 Adob​​e Fonts，但您需要注册付费的 Adob​​e Creative Cloud 包才能访问此资源。 有数千种字体可供选择，所有字体均已授权用于个人和商业用途，您还可以从项目主题字体包中进行选择，非常适合那些缺乏设计眼光的人。
  • Font Squirrel – 在 Font Squirrel 库中，您会发现免费和高级字体的混合，后者可以一次性购买。 同样，您可以从数以千计的高质量字体中进行选择，其中大多数是免费的并获得商业许可。
  • Fonts.com – Fonts.com 提供超过 150,000 种桌面和网络字体产品，包含令人印象深刻的优质自定义字体集合。 您还可以在 Font.com 博客上找到各种有趣的文章，分享排版技巧和技巧。
  • FontPair – FontPair 提供与其他资源略有不同的体验，将 Google Fonts 中的字体结合在一起，帮助您找到适合您网站的字体组合。

所以，现在您知道在哪里可以找到自定义字体了。 接下来让我们看看如何将 Google 字体添加到您的 WordPress 网站。

如何使用插件将 Google 字体添加到 WordPress Easy Google Fonts

简单的谷歌字体

由于 Google Fonts 是最流行的自定义字体资源，我们将首先了解如何将此库中的字体添加到您的网站。 有很多方法可以做到这一点，但最快和最简单的选择是使用 WordPress 插件 Easy Google Fonts。

Easy Google Fonts 是一个免费的 WordPress 插件，可让您将自定义字体插入到您的 WordPress 网站中，而无需编写任何代码。 该插件与 WordPress 定制器集成，允许您在网站前端实时插入和使用 Google 字体，而无需刷新页面。

所以现在让我们了解如何安装和使用这个插件。

第 1 步：安装 Easy Google 字体

要开始使用 Easy Google Fonts，请打开您的 WordPress 仪表板并从菜单中选择插件 > 添加新字体。

然后在搜索功能中输入Easy Google Fonts ，一旦插件被检索到，点击安装 > 激活。

激活插件

现在，您将在 WordPress 菜单的“设置”下找到 Easy Google 字体。

第 2 步：在 WordPress 定制器中编辑字体

安装 Easy Google Fonts 后，从 WordPress 菜单中选择外观 > 自定义。 您的网站现在将在前端打开，您会发现定制器中已添加了排版部分。

定制版式

单击版式。 然后，您可以选择您希望在其中应用自定义 Google 字体（例如段落、页眉 2、页眉 3 等）的网站的不同区域。

默认排版

在要编辑的部分下，单击Edit Font 。 然后，您可以选择要使用的字体——您将能够直接在您的网站上预览每种字体的外观。

编辑字体

您不仅可以更改字体类型，还可以更改颜色、大小、位置等等。 对新字体感到满意后，单击Publish 。

第 3 步：创建自定义字体控件

Easy Google Fonts 默认控件将允许您更改段落部分和标题 1-6 的字体。 但是，并非主题的所有元素都可以通过默认字体控件进行管理。

如果要更改主题的不同元素（段落或标题除外），则需要创建自己的自定义字体控件。 尽管 Easy Font Control 使您能够轻松地做到这一点，但您仍然需要对 CSS 选择器有基本的了解。

要添加自定义字体控件，请从 WordPress 仪表板中选择设置 > Google 字体。 然后，在Edit Font Controls选项卡中，为您的新字体控件组指定一个适当的名称，然后选择Create Font Control 。 在这里，我们将为块引用创建一个字体控件……

块引用

在Add CSS Selectors下，为您要管理的元素添加 CSS 选择器。 如果您愿意，可以添加多个元素。 然后选择Save Font Control 。

编辑字体控件

回到网站前端的定制器中，在Typography下，您现在可以找到 Theme Typography 选项，您可以在其中访问新的自定义控件。

主题排版

您现在可以为特定自定义元素选择新的自定义字体并更改任何其他外观和定位设置。

块引用

对于想要从 Google 向 WordPress 添加自定义字体的任何人来说，Easy Custom Fonts 都是一个不错的选择。 但是，如果您愿意，您也可以仅使用代码手动将 Google 字体添加到您的网站，无需插件。 让我们看看如何做到这一点……

如何手动将 Google 字体添加到 WordPress（无需插件）

如果您希望手动将 Google 字体添加到 WordPress，那么您将需要非常基本的编码知识。

第 1 步：选择 Google 字体

要开始使用，请打开 Google 字体，然后选择您要添加到网站的自定义字体类型。

然后在字体页面上，单击Select this Font 。 在这里，我们选择了 Indie Flower 字体。

独立花

现在，您的屏幕上将出现一个弹出窗口。 根据您选择的字体，您将能够访问字体粗细和样式的一系列自定义选项，以及查看嵌入信息。

独立花卉嵌入信息

第 2 步：在您的 WordPress 网站中嵌入自定义字体的代码

接下来，您需要复制嵌入代码（参见上面的弹出窗口）并将其粘贴到 WordPress 主题的<head>部分。 最简单的方法是安装免费的 WordPress 插件插入页眉和页脚。 使用此插件，您可以快速将代码添加到您的网站，而无需编辑您的主题文件。

安装后，通过从 WordPress 仪表板中选择设置 > 插入页眉和页脚来打开插件设置。 然后，您需要将您的 Google 字体嵌入代码添加到页眉部分。

插入页眉和页脚插件

同样，如果您愿意，您可以编辑子主题的 header.php 文件。

第 3 步：使用 CSS 应用新字体

将自定义字体的 HTML 代码添加到网站后，您现在可以使用 CSS 应用新的自定义字体。 在 Google 字体弹出窗口中，您将找到特定于您的新字体的 CSS 规则。

独立花 CSS

回到网站直播端的定制器中，选择附加 CSS。 您可以在此处输入 CSS 代码来自定义您网站上的字体。 您可以在下面看到我们已将 Indie Flower CSS 代码应用于标题 2 和段落部分……

附加 CSS

定制器将实时向您显示字体更改，如果您对结果满意，请单击发布。

如何将 Adob​​e 字体添加到 WordPress

如果您已注册 Adob​​e 高级 Creative Cloud 软件包，那么您将能够将其任何自定义字体添加到您的 WordPress 网站。 此过程与手动将 Google 字体添加到您的站点的过程非常相似。 让我们快速浏览一下。

第 1 步：选择 Adob​​e 字体

首先，您需要浏览 Adob​​e 广泛的字体库并选择适合您项目的字体。 做出选择后，单击</>图标将字体添加到新的Web 项目。

选择和 Adob​​e 字体

现在将要求您命名您的 Web 项目，并使用复选框选择要包含的字体粗细和样式。 然后选择创建项目。

第 2 步：在您的 WordPress 网站中嵌入 Adob​​e Font 的代码

下一步是将 Adob​​e 为您选择的字体提供的代码嵌入到您的 WordPress 网站中。

这与嵌入 Google 字体代码的过程完全相同。 只需将代码嵌入您网站上的<head>标记中，或使用 WordPress 插件插入页眉和页脚（如前所述）。

第 3 步：使用 CSS 应用新字体

同样，与 Google 字体一样，您现在可以使用 CSS 规则应用新的 Adob​​e 自定义字体。 在您的 Adob​​e 仪表板中，您的 Web 项目页面将列出您选择的每种字体类型的 CSS 字体系列名称以及字体样式和数字粗细。

Adobe Font CSS 字体系列

回到您的 WordPress 网站，这些 CSS 规则可以在附加 CSS 下的定制器中使用。

所以现在我们已经介绍了如何使用广受欢迎的免费 G​​oogle Fonts 以及令人印象深刻的高级资源 Adob​​e Fonts 将自定义字体添加到 WordPress。

但是，我们将讨论的最后一个选项使您可以通过将任何自定义字体上传到您网站的服务器来将其添加到您的网站。 让我们了解更多。

如何将自定义字体添加到您的 Web 空间

将自定义字体添加到您的网站空间相对简单，但同样，您需要对 CSS 有基本的了解才能将字体应用到您的网站。

第 1 步：下载自定义字体

如本文开头所述，有许多资源可供您选择免费或高级自定义字体以在您的网站上使用。 在添加到您的服务器时选择自定义字体时，只需确保您有权使用它，并且它是可下载的。

在这里，我们从 Squirrel Fonts 下载了免费的自定义字体 Milkshake。

奶昔

以 webfont 格式下载您的自定义字体非常重要。 Webfont 容器格式 WOFF 享有最多的跨浏览器支持，但 Google 建议提供多种格式，以便为跨设备的用户提供一致的体验。

如果您需要将自定义字体转换为不同的格式，那么 Squirrel Font 提供了一个免费的 Webfont Generator 工具，可以让您这样做。

第 2 步：将自定义字体上传到您的服务器

下一步是将您的自定义字体上传到您的服务器。 为此，请在您站点的 cPanel 中打开文件管理器。

然后在您的活动主题文件夹中，创建一个名为Fonts的新文件夹并在此处上传您的自定义字体。

上传字体

如果您有多种格式的字体，请将它们全部上传到Fonts文件夹。 您的自定义字体现已添加到您的网络空间。

第 3 步：使用 CSS 将自定义字体应用到您的网站

您现在需要将自定义字体应用到您的网站。 首先，您需要在主题的样式表中加载字体。 为此，请打开 WordPress 定制器并在 Additional CSS 下添加以下代码：

 @字体脸{
    字体系列：奶昔；
    src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         格式（“woff”）；
}

重要的是，确保更改字体名称和 URL（复制服务器上字体文件的 URL）。

然后，您可以继续使用 CSS 规则来更新您网站上的字体。 以下是如何将自定义字体应用于页眉 3 和段落部分的示例：

奶昔 CSS

一旦您对新的自定义字体在您的网站上的外观感到满意，请点击Publish 。

关于如何向 WordPress 添加自定义字体的最终想法

如您所见，如果您正在寻找一种漂亮且引人注目的自定义字体，那么有许多资源可以让您为您的项目找到完美的字体。 更重要的是，您现在掌握了如何成功地将自定义字体添加到 WordPress 的知识。 那么，您会选择哪些自定义字体呢？

对如何向 WordPress 添加自定义字体有任何疑问？ 请在下面的评论中询问...