您要建立会员网站吗？长期以来，网站所有者仅依靠广告和会员收入…
是否要在WordPress中添加自定义字体？自定义字体使您可以在网站上使用不同字体的精美组合，以改善版式和用户体验。
自定义字体除了看起来不错之外，还可以帮助您提高可读性，创建品牌形象并增加用户在您的网站上花费的时间。
在本文中，我们将向您展示如何使用Google Fonts，TypeKit和CSS3 @ Font-Face方法在WordPress中添加自定义字体。
注意：加载太多字体可能会降低您的网站速度。我们建议选择两种字体并在您的网站上使用它们。我们还将向您展示如何正确加载它们而不降低网站速度。
在介绍如何在WordPress网站建设中添加自定义字体之前，让我们看一下如何查找可以使用的自定义字体。
如何查找自定义字体以在WordPress中使用
字体曾经很昂贵，但现在已经不多了。在很多地方可以找到出色的免费网络字体，例如Google Fonts，Typekit，FontSquirrel和fonts.com。
如果您不知道如何混合和匹配字体，请尝试使用字体对。它可以帮助设计师将精美的Google字体配对在一起。
在选择字体时，请记住使用过多的自定义字体会降低网站速度。这就是为什么您应该选择两种字体并在整个设计中使用它们的原因。这还将为您的设计带来一致性。
如果您不喜欢该视频或偏爱书面指南，请继续阅读。
从Google字体在WordPress中添加自定义字体
Google字体是网站开发人员中最大，免费和最常用的字体库。您可以通过多种方式在WordPress中添加和使用Google字体。
方法1：使用Easy Google Fonts插件添加自定义字体
如果您要在网站上添加和使用Google字体，则此方法是迄今为止最简单的方法，建议初学者使用。
您需要做的第一件事是安装并激活Easy Google Fonts插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
激活后，您可以转到外观»定制程序页面。这将打开实时主题定制器界面，您将在其中看到新的“版式”部分。
单击“版式”，将显示网站的不同部分，可在其中应用Google字体。只需单击要编辑部分下面的“编辑字体”。
在字体系列部分下，您可以选择要在网站上使用的任何Google字体。您还可以选择字体样式，字体大小，填充，边距等。
根据您的主题，此处部分的数量可能会受到限制，并且您可能无法直接更改网站许多不同区域的字体选择。
为了解决这个问题，该插件还允许您创建自己的控件，并使用它们来更改网站上的字体。
首先，您需要访问设置»Google字体页面，并提供字体控件的名称。使用有助于您快速了解将在何处使用此字体控件的内容。
接下来，单击“创建字体控件”按钮，然后将要求您输入CSS选择器。
您可以添加要定位的HTML元素（例如h1，h2，p，blockquote）或使用CSS类。
您可以在浏览器中使用Inspect工具来查找要更改的特定区域使用的CSS类。
现在，单击“保存字体控制”按钮以存储您的设置。您可以根据需要在网站的不同部分创建任意数量的字体控制器。
要使用这些字体控制器，您需要转到外观»定制程序，然后单击“版式”选项卡。
在“版式”下，您现在还将看到“主题版式”选项。单击它会显示您之前创建的自定义字体控件。现在，您只需单击编辑按钮即可选择该控件的字体和外观。
不要忘记单击“保存”或“发布”按钮以保存您的更改。
方法2：在WordPress中手动添加Google字体
此方法要求您将代码添加到WordPress主题文件中。如果您以前没有做过，请参阅有关如何在WordPress中复制和粘贴代码的指南。
首先，访问Google字体库，然后选择要使用的字体。接下来，单击字体下方的快速使用按钮。
在字体页面上，您将看到该字体可用的样式。选择要在项目中使用的样式，然后单击顶部的侧边栏按钮。
接下来，您将需要切换到侧栏中的“嵌入”标签，以复制嵌入代码。
您可以通过两种方式将此代码添加到WordPress网站。
首先，您可以简单地编辑主题的header.php文件，并将代码粘贴到<body>标记之前。
但是，如果您不熟悉WordPress中的代码编辑，则可以使用插件添加此代码。
只需安装并激活“ 插入页眉和页脚”插件即可。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
激活后，转到“设置”»“插入页眉和页脚”页面，然后将嵌入的代码粘贴到“页眉中的脚本”框中。
不要忘记单击“保存”按钮来存储您的更改。现在，该插件将开始在您网站的所有页面上加载Google字体嵌入代码。
您可以在主题的样式表中使用此字体，如下所示：
.h1site-title { font-family: 'Open Sans', Arial, sans-serif; } 有关更多详细说明，请参阅有关如何在WordPress主题中添加Google字体的指南。
使用Typekit在WordPress中添加自定义字体
Adobe Fonts的Typekit是另一个免费的高级资源，可用于设计项目中的出色字体。他们有付费订阅以及您可以使用的有限免费计划。
只需注册一个Adobe Fonts帐户，然后访问“浏览字体”部分。在这里，您需要单击</>按钮以选择一种字体并创建一个项目。
接下来，您将看到带有项目ID的嵌入代码。它还将向您展示如何在主题的CSS中使用字体。
您需要将此代码复制并粘贴到网站的<head>部分中。
您可以通过两种方式将此代码添加到WordPress网站。
首先，您可以简单地编辑主题的header.php文件，并将代码粘贴到<body>标记之前。
但是，如果您不熟悉WordPress中的代码编辑，则可以使用插件添加此代码。
只需安装并激活“ 插入页眉和页脚”插件即可。
激活后，转到“设置”»“插入页眉和页脚”页面，然后将嵌入的代码粘贴到“页眉中的脚本”框中。
就是这样，您现在可以使用在WordPress主题的样式表中选择的Typekit字体，如下所示：
h1.site-title { font-family: gilbert, sans-serif;} 有关更多详细说明，请查看我们的教程如何使用Typekit在WordPress中添加很棒的排版。
使用CSS3 @ font-face在WordPress中添加自定义字体
在WordPress中添加自定义字体的最直接方法是使用CSS3 @font-face方法添加字体。此方法使您可以使用网站上喜欢的任何字体。
您需要做的第一件事是以网络格式下载所需的字体。如果您没有字体的Web格式，则可以使用FontSquirrel Webfont generator进行转换。
有了webfont文件后，您需要将其上传到WordPress托管服务器上。
上载字体的最佳位置是在主题或子主题目录中的新“字体”文件夹中。
您可以使用cPanel的FTP或文件管理器上传字体。
上载字体后，您需要使用CSS3 @ font-face规则在主题的样式表中加载字体，如下所示：
@font-face { font-family: Arvo; src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal; } 不要忘记用自己的字体和URL替换字体。
之后，您可以在主题样式表中的任何位置使用该字体，如下所示：
.h1site-title { font-family: "Arvo", Arial, sans-serif; } 直接使用CSS3 @ font-face加载字体并不总是最好的解决方案。如果您使用的是Google Fonts或Typekit中的字体，那么最好直接从其服务器提供字体以实现最佳性能。
仅此而已，我们希望本文能帮助您在WordPress中添加自定义字体。您可能还需要查看有关如何在WordPress中使用图标字体以及如何在WordPress中更改字体大小的指南。
相关内容
