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

已发表: 2020-11-05

学习自定义网站的排版是创建和运行网站的一个非常基本的方面。它可以改变您网站的整体感觉，并对访问者与客户互动的方式产生重大影响。

因此，有必要知道如何将自定义字体添加到 WordPress。选择正确的字体可以为您的网站创建独特的外观，让您建立视觉品牌，并提高可读性和访问者参与度。

您可以在线使用数千种字体，其中许多是免费的。本文将讨论将两个最流行的网络字体数据库中的字体添加到您的网站 - Google Fonts 和 Adobe Fonts，也称为 Typekit Fonts。这些字体库包括数千种您可以下载的网络字体。

除了这些，互联网上还有无数其他字体库，我们也会讨论这些。

您可以通过以下方式将这些自定义字体添加到您的网站：

如何将自定义字体添加到 WordPress
- 1.使用插件添加谷歌字体
- 2.使用代码添加谷歌字体
- 3. 将 Adobe TypeKit 字体添加到 WordPress
其他一些自定义字体库
如何使用插件添加其他自定义字体
如何手动添加其他自定义字体
结论

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

1.使用插件添加谷歌字体

如果您打算使用 Google 字体对 WordPress 网站内容进行风格化，那么有一个方便的工具可以直接将您的 WordPress 定制器与 Google 字体数据库连接起来。 Easy Google Fonts 是免费的，让您无需使用任何代码即可使用 Google 字体。

对于这种方法，首先安装 Easy Google Fonts 插件。设置插件后，您会在 WordPress 定制器（外观 > 定制）中找到一个名为“排版”的新选项。

2. 进入排版选项后，您会发现可以自定义的不同默认内容部分或字体控件。您可以通过单击“编辑字体”找到该特定组的字体设置。

字体设置非常广泛，允许您自定义文本的几乎每个方面以创建所需的字体样式，例如字体大小等。您可以从样式选项卡下的字体系列选项更改该特定文本类别的字体。

在外观选项卡下，您可以找到其他常用选项，例如字体颜色、字体大小和行高。

在 Positioning 选项卡下有一些深入的可视化控件，例如 Margin、Padding 和 Border。

3. 现在，您的网站可能还需要特别注意此插件提供的默认字体控件可能无法解决的某些文本类别。也许您只想为所有标题设置相同的排版设置，并希望一个类别来控制所有标题。您可以通过转到“设置”>“Google 字体”来创建自定义字体控件。

4. 转到“管理字体控件”选项卡，然后单击“创建字体控件”。

5. 您将被要求提供 CSS 选择器来定义此特定类别。然后，单击“安全字体控件”以创建新的类别/字体控件。

6. 自定义字体控件可以在与默认字体不同的位置找到。返回 WordPress 定制器并单击排版选项。你会发现有两个类别——默认字体和主题字体。自定义字体控件将在主题排版选项下找到。

2.使用代码添加谷歌字体

如果您想在没有插件的情况下将您的 Google 字体添加到 WordPress，您可以将代码添加到您的主题文件中。您可能希望为此创建一个子主题，以便在您不喜欢更改时可以恢复更改。

2. 访问 Google Fonts 网站并找到您喜欢的字体。您将在字体页面中找到每种字体的不同样式。单击所需样式的“选择此样式”按钮。您选择的字体将被保存以在特殊部分中使用。在页面的右上角，有一个按钮可以查看您选择的字体。它打开一个带有两个选项卡的侧边栏。单击“嵌入”选项卡。

3. 复制此嵌入链接并将其粘贴到 header.php 文件中，就在 <body> 标记之前。

4. 如果您不想处理使用主题文件的麻烦，那么有一个方便的插件，称为插入页眉和页脚，可以轻松地将代码添加到您的主题文件。您可以通过标题为“插入页眉和页脚”的设置栏中的自己的部分来使用此插件。只需将代码粘贴到“标头中的脚本”框中即可。

3. 将 Adobe TypeKit 字体添加到 WordPress

Adobe 有另一个令人印象深刻的自定义字体库，有免费版本和付费版本。在开始使用他们的字体之前，您需要在 Adobe Fonts 网站上拥有一个帐户。您可以从“浏览字体”页面开始浏览可用字体。

登录网站后，您可以通过单击 </> 按钮使用您喜欢的字体。

2. 要获得嵌入链接，您需要在 Adobe Fonts 上创建一个 Web 项目并将所选字体添加到项目中。

3. 与使用 Google 字体的过程一样，您必须将此嵌入链接粘贴到主题的 header.php 文件中的 <body> 标记之前。

4.您可以通过使用插入页眉和页脚插件来避免直接使用主题文件。只需转到设置栏中的插入页眉和页脚选项，然后将嵌入代码粘贴到“页眉中的脚本”框中。这将导入您选择的 TypeKit 字体。

其他一些自定义字体库

虽然 Google Fonts 和 Adobe Fonts 是一些最流行的网络字体数据库。但是，您可以探索许多其他字体库，以便为您的 WordPress 网站下载正确的字体。以下是您可以探索的一些内容：

模板怪物
字体松鼠
泉源
1001 种免费字体
字体怪胎
抽象字体
我的字体

如何使用插件添加其他自定义字体

有一个名为 Use Any Font 的便捷插件，可让您跳过手动添加自定义字体的麻烦。它为您提供了一个简单的界面，您可以通过该界面直接从仪表板添加新字体并将自定义字体分配给所需的元素。

如何手动添加其他自定义字体

如果要手动添加所需的字体，则需要将字体文件上传到 WordPress 目录。为此使用子主题以建立一层安全性，以防您不喜欢新外观或某些不需要的更改在您的网站中造成错误。子主题将允许您轻松还原更改。

从任何字体库（如 TemplateMonster）下载您想要的字体。然后，转到wp-content/themes/your-theme/fonts并使用 FTP 客户端将其上传到 Fonts 文件夹。如果没有 Fonts 文件夹，则创建一个。

上传字体文件后，您需要使用样式表导入字体。将以下代码添加到您的style.css文件中：

@字体脸{

font-family：自定义字体；

src：网址（http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf）；

字体粗细：正常；

}

您需要将 font-family 替换为您希望导入的字体名称，并将 URL 替换为您网站的 URL。

结论

通过执行上述步骤，您可以轻松地将自定义字体添加到您的 WordPress 网站，并且最省心。您可以仅从 Google Fonts 和 Adobe Fonts 数据库中使用数以千计的网络字体。通过正确选择自定义字体，您的网站可以获得不同的魅力，更好地吸引访问者，并创建与您的主题相关的更好的美学。