如何轻松地将自定义字体添加到您的 WordPress 网站

为您的网站选择正确的字体可能是一项漫长而具有挑战性的任务。 有很多事情需要考虑——哪种字体风格适合你的品牌精髓,你应该选择多少种不同的字体,是安全使用还是选择更独特和更具挑战性的东西,等等。 尽管如此,最终结果通常还是值得所有的麻烦,因为好的字体会对用户体验产生重大影响,从而影响网页的整体成功。

现在,重要的是要注意我们严格从 WordPress 的角度讨论自定义字体。 这意味着我们没有在更一般的意义上使用术语“自定义字体”,它指的是专门为一个客户设计的字体。 相反,我们指的是开箱即​​用的 WordPress 未包含的任何字体。

如今,自定义字体已成为许多 WordPress 网站永远存在的力量。 为此原因, 有许多带有自定义字体的 WordPress 主题. 但是,在您的网站上使用过多的自定义字体会对您的网站速度产生负面影响。 幸运的是,有一种方法可以避免这种情况。 我们决定展示如何在不减慢速度的情况下向 WordPress 网站添加自定义网络字体。 您可以在下面阅读有关它的更多信息,或者您可以观看视频。

查找自定义字体

正如我们已经提到的,选择用于您的网站的字体可能很困难。 如果你不确定如何去做, 网络上有免费和许可的字体资源 – 喜欢 字体松鼠, 例如。 这是一个网站,您可以在其中找到来自整个网络的免费、高质量字体,您可以将它们用于个人和商业目的。

除了字体松鼠, 谷歌字体, 恩瓦托, 字体网, 和 字体空间 只是众多其他地方中的一部分,这些地方必将帮助您找到您正在寻找的东西。

在网站创建过程中, 人们通常选择并组合两种不同的字体 – 一个用于标题,另一个用于正文。 除非您是经验丰富的设计师,否则不建议选择两种以上的字体,因为这会使您的页面看起来凌乱并减慢页面加载时间。 如果您不确定要一起使用哪些字体, 字体对 可以帮助您做出决定并找到适合您的完美组合。 在那里,您可以浏览不同的字体对建议,您可以立即看到相关字体的名称,以及将两者排列在一起时的外观。 你也有 现场下载字体对的选项. 该站点允许您按特定条件搜索字体对,例如特色对、衬线/无衬线、显示/无衬线等。

字体对

丰乔伊 是另一个可以帮助您选择字体对的网站。 您可以单击“生成”按钮来生成字体,并且可以确定它们的相关程度。 此外,如果您已经选择了一种字体,您可以生成另一种字体并查看它与您选择的字体的匹配程度。 你唯一需要做的就是 单击所需字体旁边的锁定图标 这样字体生成器就会知道要保留哪一个以及要生成哪一个。

丰乔伊

在 Qode 交互式主题中使用自定义字体

如果您正在使用(或计划使用)Qode Interactive 的高级 WordPress 主题之一,那么您应该知道它们 随附已集成的 Google 字体. 因此,如果您想使用 Google 庞大字体库中的任何 Google 字体,您不必担心。

在我们的主题中,如果您访问相关主题的选项,则可以找到字体设置,然后单击 字体.

Qode 交互式主题带有集成的 Google 字体

如果您想将任何其他特定字体添加到您的主题,您可以使用本文“添加自定义 WordPress 字体而不使用插件”部分中描述的方法之一。 另一方面,如果您不使用我们的主题,但仍想拥有 Google 字体,您可以在下面了解如何操作。

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

使用插件向 WordPress 添加自定义字体很简单。 我们将向您展示如何使用两个不同的插件来做到这一点。

1.谷歌字体排版

谷歌字体排版

这个插件已经集成了谷歌字体,所以你不需要安装任何字体——你只需要选择你想要使用的字体。

一旦你安装了 谷歌字体排版插件,您可以访问其选项 外观 > 自定义 > Google 字体.

谷歌字体设置

两组不同的设置 你可以使用 – 基本和高级设置.

基本设置,您可以使用三种不同的选项:基本排版、标题排版以及按钮和输入排版。 这 基本排版 选项允许您选择和配置正文的字体(在您的网站上出现最多的文本)。 这 标题排版 选项用于为所有标题选择字体,而 按钮和输入排版 允许您为输入字段和按钮选择字体。

Google 字体排版 - 基本设置

对于更彻底的选择,还有 高级设置. 在那里,您将能够为每个标题选择单独的字体(例如网站标题和描述、帖子和页面标题和副标题、侧边栏和页脚的字体)。

Google 字体排版 - 高级设置

还有一个 专业版 插件的,它带有一些其他选项,例如自定义字体大小、颜色和行高的能力,通过仅加载您计划使用的字体粗细来优化网站性能的选项,以及添加您想要的自定义元素该插件可以相应地调整设置并使它们更加个性化以满足您的需求。

2.简单的谷歌字体

简单的谷歌字体插件

一旦你安装 简单的谷歌字体插件前往 外观 > 自定义 > 版式 > 默认版式.

简单的谷歌字体插件排版

此插件仅允许您更改段落和标题的字体,但不能更改页脚、侧边栏和其他网站部分的字体。 但是,您可以设置一些附加功能,例如字体粗细/样式、文本装饰、文本转换、字体大小等。

简易谷歌字体插件排版设置

即使您只能更改段落和标题的字体,您仍然可以 插入文本的自定义部分 要更改字体的。 例如,假设您希望更改块引用和链接的排版。 为此,您只需为这些类别插入自定义字段。 我们会告诉你怎么做。

设置 > 谷歌字体.

插件常规设置

如果您希望块引用和链接使用相同的字体,那么您 需要创建一个字体控件. 您可以通过在 控件名称 字段,然后单击 创建字体控件 按钮。

创建字体控件

那么,你应该 将链接和块引用的 HTML 标签放在同一个字体控件中 (标签是 blockquote 和 a)。 完成后,点击 保存字体控制.

保存字体控制

创建此新字体控件后,您将获得其他设置。 当你去 外观 > 自定义 > 排版,您将看到另一个名为 主题排版. 在这里,您将找到您选择的标签的所有设置。

主题排版

您将获得的设置将与默认字体控件的设置相同。

在没有插件的情况下添加自定义 WordPress 字体

有很多方法可以手动添加自定义 WordPress 字体,而且这样做非常简单。 您确实需要一些基本的 CSS 知识才能做到这一点,但如果您按照这些步骤操作,就不会出错。 下面我们将向您展示在不使用插件的情况下添加自定义 WordPress 字体的两种不同方法。

方法一

首先,转到 Google Fonts 并找到最符合您的想法的字体。 当您选择所需的字体时,您将获得将其嵌入网页所需的所有信息。

将字体嵌入到您的网页中

然后, 确保将代码添加到 header.php 文件中. 去 外观 > 主题编辑器,找到 header.php 文件并在标签正下方添加代码。 我们选择的Indie Flower字体代码如下:

<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
将代码添加到 header.php 文件中

现在,你需要 找到 style.css 文件. 要访问它,请访问 外观 > 主题编辑器 在您的仪表板中并选择 样式.css. 在那里,您将定义要应用字体的元素。 也就是说,如果您想要 H1 标题的特定字体,那么这就是您将插入到 style.css 文件中的内容:

h1 {
font-family: ‘your font name goes here’, cursive;
}

您可以以相同的方式将字体添加到网站的任何部分。 您只需要知道要更改字体的元素的 CSS 选择器。

或者,您可以在另一个地方定义字体出现的位置。 点击 自定义 > 附加 CSS. 从这里您可以现场监控所有更改。

添加额外的 CSS

方法二

向 WordPress 添加自定义字体最直接的方法是 通过使用 CSS3 @font-face,它允许您在网页上使用所需的任何字体。 首先,您需要以网络文件格式下载要使用的字体。 如果你没有格式,那么你可以简单地转换它 FontSquirrel 网络字体生成器.

然后,您需要将字体文件上传到您的托管服务器。 你可以 将文件上传到您的子主题目录中,或者上传到主题本身的新文件夹中. 要上传字体,您可以使用 FTP 或 cPanel 的文件管理器。

上传字体后,您应该将其加载到主题的 CSS 样式表中。 为此,您将使用 CSS3 @font-face 规则:

@font-face {
font-family: Arvo; 
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
font-weight: normal; 
}

您需要指定字体的名称、它在服务器上的位置以及它的字体粗细。 从那里,您可以通过一些简单的 CSS 在您网站的任何地方使用该字体:

h1 { 
font-family: "Arvo", Arial, sans-serif;
}

结论

这就是您将自定义 WordPress 字体添加到您的网站的方式。 如您所见,您可以使用许多不同的方法,而且没有一种方法过于复杂。 所以继续吧,选择一种你喜欢的字体(或字体对),将它添加到你的 WordPress 网站,然后开始定制,让你的排版变得漂亮、干净和卓越。

In relation :  如何从 GoDaddy 建站神器迁移到 WordPress
Moyens Staff
Moyens I/O 员工激励了您,为您提供技术、个人发展、生活方式和策略方面的建议,对您有所帮助。