是否要在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中更改字体大小的指南。

微信 OR QQ 扫描二维码与项目经理沟通
我们在线上24小时期待你的声音
微信二维码 qq二维码
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建