如何添加自定义 WordPress 字体（并选择配对的字体）

已发表: 2019-04-04

正在寻找一种方法将您自己的自定义 WordPress 字体添加到您的网站？

您的 WordPress 主题可能带有自己的一组字体供您选择，但选项可能非常有限，因此您想要添加自己的 WordPress 字体是完全可以理解的。

在这篇文章中，您将学习如何通过几种不同的方法在 WordPress 中上传和使用任何字体。

如果您不熟悉使用自己的 WordPress 字体的想法，我们将从快速入门开始，了解在哪里可以找到自定义字体以及如何将它们配对。

然后，我们将向您展示如何从以下位置添加自定义 WordPress 字体：

谷歌字体
Adobe 字体 (Typekit)
从字面上看其他任何地方！（通过上传字体文件并使用 CSS3 @font-face）

单击此链接可直接跳转到教程。

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

最著名的找到自定义 WordPress 字体的地方绝对是 Google Fonts。在 Google Fonts，您会找到一个包含 900 多种字体的存储库，借助 Google 的 CDN，所有这些字体都是免费的，并且非常容易集成到您的 WordPress 网站中。

在 Google Fonts 之后，另一个著名的选项是 Adobe Fonts（以前称为 Typekit ）。 Adobe Fonts 作为 Adobe Creative Cloud 订阅的一部分免费提供，但非订阅者无法使用。

最后，您可以找到许多其他聚合免费和高级字体的网站。我们最喜欢的两个是：

Font Squirrel – 收集 100% 免费用于商业用途的字体。
Fonts.com – 拥有大量优质字体。

如何配对字体使您的网站看起来很棒

通常，您不会在 WordPress 网站上使用单一字体。相反，大多数网站使用成对的字体来创建更有趣的设计并帮助区分内容。

但是，您不想只是随意地将两种字体放在一起——这可能看起来不太热。

相反，您需要两种可以协同工作的字体，如果您不是设计师，可能很难弄清楚。

为了提供帮助，有很多很棒的网站会为您推荐字体对。例如，如果您找到一种您非常喜欢的字体，您可以使用这些网站中的一个来为它找到一对。我们的一些最爱是：

字体对
丰悦
输入法

虽然没有规定只能使用两种字体，但您应该警惕使用过多的 WordPress 字体。除了可能会造成混乱的设计，使用过多的自定义字体还会减慢网站的加载时间。

如何添加自定义 WordPress 字体：分步指南

现在是有趣的部分——这里是如何开始使用您自己的自定义 WordPress 字体。

根据您要从何处获取字体，您可以在此处采用几条路线。

以下是我们将介绍的三种方法。同样，您可以单击链接直接跳转到特定教程：

在 WordPress 中添加 Google 字体（插件、手动或本地托管方法）
在 WordPress 中添加 Adobe Fonts (Typekit)
使用 CSS3 @font-face 在 WordPress 中上传和添加任何字体

如何将 Google 字体添加到 WordPress

由于 Google Fonts 是自定义 WordPress 字体最流行的来源，因此我们将介绍三种将 Google Fonts 添加到 WordPress 的不同方法：

使用插件从 Google 的 CDN 添加 Google 字体
从 Google 的 CDN 手动添加 Google 字体
使用插件在 WordPress 本地托管 Google 字体

如何使用插件在 WordPress 中添加 Google 字体

由于 Google Fonts 的流行，您可以找到几个高质量的插件，让将 Google Fonts 添加到 WordPress 变得非常简单，我们最喜欢的是 Easy Google Fonts，因为它是：

自由
轻的
使用方便

安装并激活插件后，转到 WordPress 仪表板中的外观 → 自定义以启动实时 WordPress 定制器。

然后，单击“排版”选项以选择您的 Google 字体选项：

从那里，您可以使用选项为站点上的每个元素选择自定义字体：

例如，这里是更改段落字体的样子：

除了选择字体本身，该插件还允许您自定义：

字体粗细
文字装饰
颜色

如果您了解一点 CSS，您还可以使用插件的字体控件功能将某些元素组合在一起。例如，您可以组合标题选择器以一次定位所有标题。

要进行设置，请转到设置 → Google 字体并创建一个新的字体控件以针对特定的 CSS 选择器：

如何在没有插件的情况下在 WordPress 中添加 Google 字体

由于 Google 将所有字体托管在自己的 CDN 上，因此手动将 Google 字体添加到 WordPress 也非常容易。

基本上，无需将字体文件上传到您的服务器，您只需链接到 Google 托管的 CDN，Google 就会为您处理字体服务。

出于性能原因，有些人不喜欢这样做 – 如果需要，我将在下一节中分享一种在本地托管 Google 字体的方法。

首先，您需要使用 Google Fonts 网站来选择要添加的字体。

对于此示例，假设您要使用Roboto 。

转到字体页面，然后单击+ 选择此字体：

这将在右下角添加一个窗口。单击以展开该窗口。

如果您想选择其他字体粗细（例如粗体和斜体），您可以转到自定义选项卡。为了在可用性和性能之间取得良好的平衡，我们建议选择绝对最大的三种字体权重：

常规的
斜体
胆大

如果您想要最佳性能，您甚至可以使用更少的资源。

做出选择后，返回“嵌入”选项卡并复制嵌入字体代码：

接下来，您需要将此代码添加到 WordPress 主题的<head>部分。您可以通过以下方式执行此操作：

直接编辑子主题的header.php文件（确保使用子主题 - 否则，当您更新主题时，您的自定义字体将消失）
使用像插入页眉和页脚这样的免费插件

添加代码后，您可以开始在 CSS 中使用 Google 字体。

如果你回到谷歌字体网站，谷歌实际上会告诉你需要使用的 CSS 规则：

例如，要让 h2 标签使用新的 Roboto 字体，您可以转到外观 → 自定义 → 附加 CSS并添加以下代码段：

h2{

字体系列：'Roboto'，无衬线；

}

如何使用插件在 WordPress 中本地托管 Google 字体

这是 Google Fonts 的最终方法！

有些人更喜欢在本地托管 Google 字体，而不是从 Google 的 CDN 加载它们。也就是说，您可以在自己的服务器上托管文件，而不是从“https://fonts.googleapis.com/css?family=Roboto:400,700”之类的链接加载它们。

最简单的方法是使用名为 CAOS for Webfonts 的免费插件。

安装并激活插件后，您可以转到设置 → 优化Webfonts以选择要下载到服务器的字体：

完成此操作后，您就可以开始在 CSS 中使用字体（就像您遵循前面的方法一样）。

如何在 WordPress 中添加 Adobe Fonts (Typekit)

如果您想在 WordPress 中使用 Adobe Fonts，您基本上可以按照与手动 Google Fonts 方法相同的步骤进行操作。 请记住，Adobe Fonts 服务仅作为 Creative Cloud 订阅的一部分提供。

首先，您需要使用 Adobe Fonts 网站来选择您的字体并创建一个Web 项目（详细说明在此）。

在将字体添加到 Web 项目窗口中，您可以选择要包含的字体：

然后，Adobe 会给你一个嵌入代码，就像谷歌字体一样：

获取嵌入代码并使用子主题的header.php文件或插入页眉和页脚等插件将其添加到您的站点。

链接到 CSS 文件后，您可以使用 Adobe 提供的 CSS 开始将字体应用于您站点上的 CSS 选择器：

如何在 WordPress 中使用 @font-face

最后，我们将向您展示的最后一种方法是如何在 WordPress 中使用 @font-face。这种方法的好处是它可以处理任何来源的任何字体文件。

基本上，只要你能下载字体文件并有使用权，CSS3 @font-face 就可以搞定。

首先，从您的首选来源下载字体文件。对于本示例，我们将使用 Font Squirrel 的免费字体Alex Brush 。

如果可能，请尝试以.woff或.woff2文件格式下载文件，以获得最佳的跨浏览器兼容性。如果这不可能，您可以下载不同格式的字体，然后使用免费的 FontSquirrel Webfont Generator 工具将其转换为.woff ：

接下来，通过 FTP 或 cPanel 文件管理器连接到 WordPress 站点的服务器。然后…

在您的活动主题或子主题的目录中创建一个名为fonts的新文件夹（某些主题可能已经有一个fonts文件夹。如果是这种情况，您可以跳过此步骤）。
上传字体文件的字体文件夹。您可以上传 .woff 和 .woff2 格式

上传文件后，转到 WordPress 仪表板中的外观 → 自定义 → 附加 CSS 。

首先，你需要使用@font-face来添加你的字体……

为此，请输入您的字体名称作为font-family并将直接 URL 添加到您服务器上的字体文件中作为URL 。这是我们的 AlexBrush 示例的样子：

@字体脸{

字体系列：AlexBrush；

源代码：网址（http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff）；

字体粗细：正常；

}

完成后，您可以使用 CSS 应用您的字体系列（通过您在 @font-face 注册的名称）。例如，以下是对 <h2> 标题使用 AlexBrush 字体的效果：

就是这样！您可以将这个 CSS3 @font-face 方法用于任何字体文件。

关于自定义 WordPress 字体的最终想法

如果您的 WordPress 主题没有您想要使用的字体，请不要惊慌！您有很多选项可以添加自己的自定义 WordPress 字体。

最简单的入门方法是使用 Google Fonts 托管的免费字体或 Adobe Fonts 托管的高级选项。

但是，您绝不仅限于这些服务，通过使用 CSS3 @font-face，您可以将任何字体文件上传到 WordPress 并开始在您的主题中使用它。

现在走出去，创建自己的字体配对！