将自定义字体添加到 WordPress 网站主题的 3 种不同方法

有许多有趣且可自定义的方式可以让您的 WordPress 网站看起来更独特、更具视觉吸引力。 其中一种方法是将自定义字体添加到您的 WordPress 网站。 看看你的一些竞争对手的网站。 他们可能会模仿您也希望通过自己的 WordPress 网站创建的相同基调和风格。 注意他们使用的字体。 许多成功的网站倾向于使用少数精心挑选的字体，这些字体在整个网站中始终如一地使用。

网上有很多免费的自定义字体，您可以轻松地将它们添加到自己的网站中。 找到合适的字体后，您将需要知道如何将它们应用到您的网站。 您可以尝试多种方法来实现这一目标。

首先，找到合适的字体； 有无数的网站提供数以千计的免费字体供您下载。 试试谷歌字体、TemplateMonster、MyFonts、FontSpring、Cufonfonts、Dafont、Font Squirrel、Edge Web Fonts、1001 Free Fonts、Fonts.com。

简而言之，有两种主要方法可以将自定义字体添加到您的 WordPress 网站：手动或使用插件。

手动将自定义字体添加到您的 WordPress 网站主题

如果您不想冒险使用太多插件使您的 WordPress 网站负担过重，手动将自定义字体添加到您的 WordPress 可能是有益的。 这可以通过编辑@font-face 指令来完成。 这允许您将任何格式的多种字体连接到您的站点。

这涉及以下步骤：

步骤1

首先，从您认为最有用的网站下载您选择的自定义字体。 将文件保存到您的计算机后，解压缩此 .zip 存档。

第2步

在此之后，您可以将此字体文件上传到您的 WordPress 托管服务器中的“wp-content/themes/your-theme-folder/fonts”目录下。 如果您还没有为您的自定义字体设置一个指定的文件夹，请创建一个并将其保存在那里。

步骤 3

接下来，前往 WordPress 的管理区域。 选择外观，然后转到主题编辑器。 此时，您将在屏幕上看到主题的 style.css 文件。 在此之下，您将需要添加这部分代码：

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

请记住将代码中的“URL”和“font-family”替换为与您选择的字体相对应的适当值。 您还应该将这部分代码粘贴在 CSS 文件的开头，但在主题注释之后。

步骤4

最后，确保单击重要的更新文件按钮。 这可确保在您离开页面之前正确保存您的更改。

步骤 5

在此之后，您可以轻松地在您想要在主题样式表中应用它的任何其他地方使用该字体。 使用以下代码：

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

现在您已经编辑了这个字体代码，只要有人访问您的网站，字体就会加载。 但是您还没有将它应用到页面上的任何特定元素。 为此，您需要对刚刚访问的相应 style.css 文件进行最后一次编辑。 您需要在文件中输入如下代码：

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

为您推荐：初学者指南：如何安装 WordPress 主题？

快速说明：

请记住，和以前一样，编辑 font-family 值以适合您正在使用的字体。

例如，如果您使用来自 Google Fonts 的自定义字体，您会看到一个名为@import 的选项卡，它为您提供了相关代码，只需将其复制并粘贴到主题的 style.css 文件中即可。 如果您不习惯处理过多的编码，这可以使整个过程变得更加简单。

但是，这不再是强烈推荐的方法。 它遇到了一些性能问题，阻止浏览器同时下载多个样式表。 这最终会导致页面加载速度变慢。 因此，当您选择字体和使用它们的方法时，请记住这一点。

另一方面，通过 CSS 手动安装自定义字体确实允许您连接多种格式的字体，包括 SVG、WOFF、TTF 和 OTF。 此方法还允许您在不依赖第三方服务的情况下工作。 您的字体文件将位于您的服务器上。 这是向 WordPress 添加自定义字体的最直接方式。

使用插件将自定义字体添加到您的 WordPress 网站主题

许多人选择使用插件将他们的自定义字体包含到他们的 WordPress 网站中，因为在许多方面这可能是最简单的方法。 如果您不想处理 CSS 编码，则尤其如此。 谷歌字体是一个受欢迎的选择，主要是因为它可以很容易地与 WordPress 插件一起使用。 最适合您的两个选择是 Easy Google Fonts 和 Google Fonts Typography。 一旦激活了这些插件中的任何一个，您就可以轻松访问整个 Google Fonts 字体目录以添加到您的页面，而无需处理任何复杂的代码。

使用 Google 字体是最简单的方法，您可以在屏幕上实时预览您的更改和自定义字体。

根据您要使用的字体文件以及您是否打算使用单个存储库，您可能需要考虑使用替代插件，例如自定义字体插件。

步骤1

一旦你安装了你选择的插件并激活它，进入外观，然后点击进入定制器页面，这将打开实时 WordPress 主题定制器界面页面。 在这里您将看到排版选项卡，它将向您显示您自己网站的每个部分，您可以在其中应用您自己的自定义字体。

第2步

打开此页面后，您将能够单击要开始编辑的页面部分中的“编辑字体”按钮。 然后您可以完成各个子部分，选择字体样式、大小、边距等——这些部分将根据您使用的主题而有所不同。

您的主题还可能意味着您将无法直接编辑您网站各个部分的字体选择。 然而，这个问题有一个简单的解决方法：只需前往“设置”，然后是“谷歌字体”，您可以在其中创建自己的字体控件。 为此，只需在框中输入控件名称并选择 CSS 选择器。 这允许您添加任何您想要为此字体定位的 HTML 元素。 输入此信息后，请确保通过单击“保存字体控制”按钮保存更改，以便您的设置完全更新。 然后，您可以继续为 WordPress 网站的每个不同部分创建尽可能多的自定义字体控件。

步骤 3

要在创建这些新字体控制器后使用它们，只需返回“外观”部分，单击“自定义程序”，然后单击“排版”选项卡。 在此之后，您将看到标有 Theme Typography 的选项 - 当您单击它时，您将能够通过简单地选择 Edit 按钮来访问您的自定义字体控件，这样您就可以为这个特定的字体选择您想要的字体和外观控制。 再次强调，不要忘记保存您的更改，方法是单击“发布”或“保存”按钮来更新您的网站。

快速说明：

我们推荐的其他一些很棒的自定义 WordPress 字体插件是 Custom Font Uploader 和 Use Any Font – 但还有无数其他字体可供选择，因此在选择您想要使用的插件之前先探索您的选项。

您可能还喜欢： 20 个最畅销的微型 WordPress 主题。

最后，尝试使用主题

除了这两种向您的 WordPress 网站添加自定义字体和排版的主要方法外，您还可以使用您可以选择的主题。 有许多可用的主题，其中许多都带有内置选项，可让您自定义已安装的字体。 这样做的过程会因您使用的主题而异。 因此，请务必查找适合您主题的指南。 高质量、优质的 WordPress 主题还将提供可在线访问的文档，这些文档提供了向该特定主题添加自定义字体的指南。

视觉和设计元素可以说是创建有效网站的最重要因素之一，该网站将吸引每个访问者的注意力。 该领域最大的特点之一是字体的使用。 无论您选择哪种方式将自定义字体添加到您的 WordPress 网站，您都应该找到并使用最适合您整个网站和品牌的风格、受众、内容、主题和基调的字体。

 本文由比阿特丽斯比尔德撰写。 Beatrice 是 Academic Brits 的专业文案撰稿人，擅长广泛的主题和学科领域。 比阿特丽斯总是乐于分享她的个人经验，并向初学者作家提供专家建议，以发现创作真正畅销的高质量内容的所有挑战和特点。