重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

因为专注,所以专业

如何更改和添加 WordPress 字体

为什么要在您的 WordPress 网站上使用自定义字体?

排版本身就是一门科学,我们无法在这里为您提供有关在网页设计中使用字体的完整课程。毕竟,这不仅与字体本身有关,还与字体大小、倾斜度、厚度和许多其他因素有关。但是,我们可以介绍为什么在您的 WordPress 网站上使用自定义字体是个好主意,这正是我们现在要做的。

1. 排版是第一印象的一部分

您选择的字体对人们如何看待您的网站有很大影响。好玩吗?专业且信息丰富?访客一眼就决定了这一点,您的排版在他们的感知中起着重要作用。
因此,您可能想要选择一种字体来强化您希望他们对您的看法。否则,为什么首先要使用它?

2. 字体比你想象的更重要

印刷类型会影响您的学习、记忆文本的能力,甚至会影响您的心情。除其他外,研究发现:
  • 读者可以更好地回忆以粗体或更大字体显示的信息。
  • 更难阅读的字体会带来更好的信息回忆和更强的专注力。
  • 另一方面,对眼睛更舒服的字体可以提高阅读速度
  • 内容的感知根据它出现的字体而变化。
此外,排版会影响我们的判断。
在一项研究中,人们被问及他们在灾难性事件中的安全感。读者被问及他们是否同意某个陈述以及在多大程度上同意。然而,这项研究背后的真正目的是测试受试者是否会根据字体的选择来发现更可信的陈述。使用的字体是 Georgia、Comic Sans、Computer Modern、Baskerville、Helvetica 和 Trebuchet。
结果?巴斯克维尔同意“我们生活在一个前所未有的安全时代”声明的人数增加1.5%
字体会影响我们的判断
简而言之:您网站上的字体设计对您的读者有巨大的影响。有足够的理由学习如何向 WordPress 添加自定义字体,你不觉得吗?

我在哪里可以找到 WordPress 的自定义字体?

好的,既然您知道为什么自定义网站的字体可能是个好主意,那么让我们继续第二步:在哪里可以找到量身定制的字体?
有几种服务可用。最著名的之一是Google Fonts。顾名思义,这是 Google 提供的一项服务,可提供近 1,000 种不同的字体。完全免费。为了所有人。这是如何使用它。

1. 转到 Google Fonts 并开始过滤

当您第一次进入 Google 字体页面时,您会看到以下内容:
谷歌字体主页
如果您已经有一种字体,只需在左上角的搜索字段中输入其名称即可。如果没有,您可以通过多种不同的方式过滤可用的内容,例如,按类别:
  • Serif - 意思是末尾带有波浪线的字体。
  • Sans-Serif - 没有波浪线的简单字体。我们在 WebsiteSetup.org 上使用的就是一个例子。
  • 显示- 适用于较大尺寸的字体,例如标题。
  • 手写——你想让你的字体看起来像是手写的吗?那么这就是你的设置。
  • Monospace - 所有字符都占据相同空间的排版,like this.
如果您仍然不确定,以下是一些示例:
自定义字体类别示例
其他过滤器包括:
  • 语言— 将字体选择限制为某些语言,包括不在拉丁字母中的语言,例如阿拉伯语、泰语或越南语。
  • 字体属性— 按多种样式(即是否提供斜体、粗体等)、粗细、倾斜度和字母宽度来过滤字体。
  • 仅显示可变字体- 将您的选择限制为仅可变字体。这些在一个文件中包含所有样式,是网页设计中一个非常新的和令人兴奋的发展。
您还可以在网格和列表视图之间切换字体列表,以及按趋势、最流行、最新或字母顺序对字体进行排序。
当您应用任何过滤器时,您的搜索结果会实时调整。您将在您的类别和例句中看到可用的字体。使用顶部栏在查看句子、字母、段落或数字之间切换。您甚至可以输入自己的自定义文本并使用滑块更改字体大小。
在谷歌字体中自定义字体预览
单击右侧的重置按钮可反转所有自定义和过滤器选择。

2.检查字体细节

找到您喜欢的字体后,只需单击它即可进入其单个页面。
谷歌字体字体详细信息页面
在这里,您将看到所有可用的样式和示例(同样,可以更改预览文本和字体大小)。再往下是这个自定义字体中所有可用字形(意思是字母)的列表。
谷歌字体可用字形
然后,您将找到有关字体的信息,例如作者和许可证。然而,最重要的是,在底部,Google Fonts 显示了与这种特定字体的流行配对。
谷歌字体流行字体配对
如果您不是设计师并且不太确定如何将印刷类型相互组合,这将非常实用。

3. 将首选字体添加到您的收藏中

如果您找到了适合自己的字体,请使用“选择此样式”按钮将其添加到您的收藏中。这样做将在右侧打开一个菜单,您将在其中看到所有选择。
在谷歌字体中选择字体系列或样式
请注意,您可以添加多个字体系列。例如,当您为正文选择一个副本而为标题选择另一个时,这是有道理的。
相同字体的不同样式相同。每个字体系列中甚至还有一个链接,可让您轻松添加更多字体。如果您想使用不同粗细级别的字体,这将非常有用。
但是,请注意:您加载的字体和样式越多,它就会开始阻碍您的WordPress 网站速度。所以在选择字体时请记住这一点。
Embed 下,您可以找到一些代码来使用您网站上的字体。这将在以后变得重要。
在普通视图中,您还会在底部看到一个下载系列按钮,允许您将所选字体和样式的字体文件传输到您的计算机。这样,您就可以在本地使用它们,例如,在 Photoshop 或其他网页设计工具中。稍后,我们还将向您展示一种将这些文件上传到您的服务器并直接在您的站点上托管字体的方法。

为 WordPress 查找自定义字体的其他来源:

Google Fonts 并不是唯一的同类服务。以下是一些其他地方,您可以在其中找到 WordPress 网站的自定义字体:
  • Font Squirrel — 此站点收集免费和优质的 Web 字体,您可以通过多种不同的方式对其进行过滤,以找到适合您项目的字体。然而,它们都是可供下载的,而不是像 Google Fonts 那样的远程集成。
  • Dafont — 互联网上最古老的字体库之一,拥有超过 50,000 种字体。使用无数的过滤选项来筛选您想要的选择并将其下载到您的计算机。
  • Urbanfonts — 与 Dafont 类似,具有更少的字体但更好的网站设计。
  • Adobe Fonts — Typekit 曾经是免费网络字体库中仅次于 Google Fonts 的第二大玩家。到目前为止,他们的免费帐户仍然可以访问 200 多种网络字体。但是,对于完整的 1,900+,您需要每月 4.99 美元起的 Adob​​e Cloud 订阅。
  • Fontstand — 在订阅模式的基础上租用异地托管字体的地方。他们的商业模式有点复杂,但可能适合大型商业项目。近 2,000 种字体可供选择。
  • Type Network — 与 Fontstand 类似,该站点提供托管和自托管字体供您购买。价格随着页面浏览量的增加而上涨,并且他们有近 400 种字体系列的库存。
使用上述资源,您应该能够找到适合您的字体。此外,您可能还想阅读我们关于网络安全字体的文章。最后,如果您在正确组合字体时遇到问题,请使用设计师为您完成的工作的字体对
好的,现在是时候讨论如何将您找到的任何自定义字体添加到您的 WordPress 网站。有几种方法可以做到这一点。

向 WordPress 添加自定义字体的 7 种方法

在手动向 WordPress 添加自定义字体时,它们通常涉及以下三个选项之一:HTML + CSS、PHP 或插件。每种方法都有优点和缺点,哪种方法适合您取决于您​​的设置。别担心,我们将详细介绍它们中的每一个。

1. 使用“字体插件”

如果没有几个用于向平台添加自定义字体的插件解决方案, WordPress 领域就不会是现在这个样子。我们现在将看到的只是称为Fonts Plugin。它使在您的网站上使用 Google 字体变得非常容易。下面我们也会讨论是否有更好的选择。

安装插件

第一步是安装插件。为此,请转到Plugins > Install New。然后,搜索插件的名称。在搜索结果中,单击立即安装并在插件出现在您的站点后激活它。
安装字体插件

在您的 WordPress 网站上添加/更改字体

更改网站上的字体非常容易。只需转到外观 > 自定义 > Google 字体
wordpress 定制器中的字体插件配置选项
请注意,该插件还会在Appearance > Google Fonts下创建一个菜单项。但是,在这里您只能找到他们时事通讯的选择加入表格(以换取插件的快速入门指南)。你 没有必须填写该使用该插件可以!
Google Fonts下的定制器中,您可以找到以下选项:
  • 基本设置
  • 高级设置
  • 调试
让我们一步一步地了解它们。
基本设置可让您进入此菜单:
字体插件基本设置
正如您从标签中看到的,这使您可以更改内容、标题和按钮/输入的字体。为此,只需单击下拉列表即可访问可用系统和 Google 字体的列表。
在字体插件中更改字体
输入字体名称或向下滚动以找到它。单击后,您可以立即在右侧的预览窗口中看到更改。
字体插件在 wordpress 定制器预览中更改了自定义字体
如需其他设置,请单击下拉菜单右侧的蓝色图标。在这里,您可以根据可用的内容选择不同的字体粗细(如粗体或细长)和样式(如斜体)。
在字体插件中自定义字体样式
一旦您对您的选择感到满意,请单击顶部的“发布”以使其永久化。
差不多就是这样。很简单吧?您的所有更改也会自动转换为 WordPress 编辑器。

使用高级设置

高级设置下,您会找到与上述几乎相同的选项。但是,这里将它们分解为更详细的选项。
字体插件高级设置
以下是您可以在不同菜单项下更改的内容:
  • 品牌- 更改站点标题和描述的字体。
  • 导航- 配置导航菜单的排版。
  • 内容— 单独更改您的内容排版以及每个标题标签 (H1-H6)。
  • 侧边栏- 侧边栏标题和内容的字体控件。
  • 页脚- 与上面相同,但用于站点页脚。
此外,您还有“仅加载字体”选项。在这里,您可以将 Google 字体加载到您的网站上,而无需将它们分配给任何类型的内容。这可能很有用,例如,如果您计划通过 CSS 手动调用字体。这样,您就不必手动将其加载到您的网站上。

它不起作用,我该怎么办?

如果您在 WordPress 网站上使用自定义字体时遇到问题,您可以在Debugging下找到解决方案。
字体插件调试选项
在这里,您可以做两件事:强制样式和重置所有字体。当您点击第一个选项的复选标记时,该插件将覆盖您网站上的任何现有字体。如果您的某些文本无法采用更改后的字体时遇到问题,这将非常有用。
另一方面,重置所有字体按钮会撤销您所做的所有更改,并将您网站上的所有版式恢复为默认设置。有关更多信息,还有文档
这就是这个插件的全部内容。请注意,它还带有Pro 版本。付费版允许您更改字体大小和颜色、优化字体加载过程以提高站点速度、在本地托管字体文件等。许可证起价为 29 美元。

替代自定义字体 WordPress 插件

还有其他 WordPress 插件可用于添加自定义字体。除非您打算购买上述 Pro 版本,否则我们建议您好好看看。
如前所述,由于 GDPR 的担忧,从 Google 的服务器导入字体可能不是一个好主意。因此,您最好检查一下允许您在本地存储字体文件的选项的替代方案。
  • OMGF - 可以自动将您的主题中包含的任何 Google 字体下载到您的本地服务器,创建一个样式表来使用它们,并删除任何外部请求。使用起来也很方便!
  • 使用任何字体- 帮助您在没有任何 CSS 的情况下使用上传的字体。该插件将字体存放在您自己的服务器上,并提供将它们转换为正确格式的工具。
  • 自定义字体上传器– 使用易于使用的界面将本地字体文件和 Google 字体上传到您的网站。
  • 自定义字体– 在 WordPress 中嵌入不同格式的字体文件。与 Fonts Plugin 的工作原理类似,并支持许多页面构建器。
  • 自定义 Adob​​e Fonts (Typekit) – 如果您使用 Adob​​e Fonts,此插件可以更轻松地将您选择的字体调用到您的 WordPress 站点。您所需要的只是您的项目 ID。十分简单。

2. 使用 CSS 和 @import

让我们从最不推荐的方法开始。如果您打算从 Google Fonts 安装自定义字体,您可能已经注意到它在Embed下有一个标记为@import的选项卡。在这里,您可以找到一段如下所示的 CSS 代码。
@import 在谷歌字体中嵌入代码
您可以按原样将其插入到您的标题中(更多内容见下文),也可以不带<style>括号将其复制到主题(或者更好的是,子主题)style.css文件的开头。
/*
主题名称:二十个孩子
主题 URI:https://wordpress.org/themes/twentytwenty/
模板:二十
作者:WordPress 团队
作者 URI:https://wordpress.org/ 版本:1.0*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'); 

/* 额外的 CSS 放在这里 */
这样做会将字体从样式表加载到您的站点中。这似乎是一个简单的解决方案,对吧?那为什么是最不推荐的呢?
原因是性能问题。使用@import防止浏览器一次下载多个样式表。
结果:页面加载时间变慢

3. 使用 WordPress 模板文件

在您的站点上获取字体的另一种方法是获取字体库提供的代码并将它们复制到您的header.php模板文件中。大多数标准的WordPress 主题都有它。
确保将其放在<head></head>括号之间的某个位置。这样,无论何时加载任何页面,您的字体都会加载。
通过模板文件将自定义字体添加到 wordpress
如果您使用的是子主题,请务必将父主题的header.php文件复制到子主题目录中并在其中进行更改。
一些主题带有设置,允许您通过后端将自定义代码添加到页眉和页脚。这也是一个可行的选择以及像Insert Headers 和 Footers这样的插件。
插入页眉和页脚插件

4. 使用 @font-face

到目前为止,我们只讨论了如何在 WordPress 中使用托管在其他地方的自定义字体,即谷歌的服务器。但是,也可以(通常推荐)在您自己的网站上托管字体,并从那里向访问者的浏览器提供这些字体
为此,您首先需要获取相关字体。还记得 Google Fonts 中的下载按钮吗?那个现在会很方便。其他提供商也允许您下载字体。
这样做时,请确保以Web 字体格式获取它。这意味着 TTF、OTF、WOFF 或 WOFF2。如果您没有正确的网络字体格式,您也可以使用此服务将您的字体转换为受支持的字体。
准备好字体文件后,您需要通过 FTP 将它们上传到您的 WordPress 站点。将它们存储在名为fonts(创意,对吗?)的子主题的子目录中是一个很好的位置。
之后,您需要通过@font-face. 这是它的样子:
@字体脸{
	字体系列:Roboto;
	src: url(https://localhost/wordpress/wp-content/themes/twentytwenty-child/fonts/Roboto-Regular.ttf);
	字体粗细:正常;
}
请记住将字体名称及其位置路径替换为您自己站点上的名称。之后,您的新自定义字体将可用。在下面,我们还将提到一些可以为您执行此操作的插件。

5. 字体入队——“WordPress 方式”

如果您想以正确的方式向 WordPress 添加自定义字体,您将通过主题functions.php文件和功能  wp_enqueue_scriptwp_enqueue_style.
在他们的帮助下,您可以使用 Google Fonts 提供的代码片段。但是,我们不是将它们复制到文件中,而是通过函数将它们添加到标题中。
wp_enqueue_script和 和有wp_enqueue_style什么区别?顾名思义,一种用于添加脚本,一种用于样式表。使用哪种字体取决于您的自定义字体是如何从其来源提供的。
例如,Google Fonts 为您提供字体作为样式表。在这种情况下,您可以通过以下方式将它们添加到您的 WordPress 网站:
函数 add_google_fonts() {
	wp_enqueue_style('google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
}

add_action('enqueue_block_assets', 'add_google_fonts');
与此相反,如果您的提供商以 JavaScript 的形式提供他们的字体,您可以wp_enqueue_script改用。下面是一个示例:
函数 add_custom_fonts() {
	wp_enqueue_script('my_custom_fonts', '//fonts.myprovider.com/open-sans.js');
}

add_action('enqueue_block_assets', 'add_custom_fonts');
如果您将上述@font-face规则移动到自己的样式表(例如fonts.css)中,将其保存在主题文件夹中,然后functions.php像这样调用它,这也适用于本地字体:
函数 add_local_fonts() {
	wp_enqueue_style('local_web_fonts', get_stylesheet_directory_uri() .'/fonts.css');
}

add_action('enqueue_block_assets', 'add_local_fonts');
没那么难吧?另外,您可以通过 WordPress 方式获得加分。

将多个 Google 字体排入队列

快速警告: Google Fonts 最近更改了它们提供的用于链接到其服务上的字体的语法。因此,尝试将 WordPress 中的几种字体排入同一函数时会出现一些问题
wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap' );
由于&family=参数的重复,WordPress 会忽略第一个,因此只将链接中的最后一个字体系列加入队列。希望很快就会有 WordPress 或 Google 的官方解决方案。
目前你有两种方法可以解决这个问题。首先是将入队样式的版本设置为null像这样:
wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap', [], null );
第二个是将您从 Google Fonts 获得的链接恢复为旧格式。您可以通过更改css2为 justcss并将除第一个之外的所有内容替换?family=|(在 PHP 中表示“和”,本备忘单中的更多信息)来实现。这是它的样子:
wp_enqueue_style('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
如前所述,这并不理想,但这是我们目前所坚持的。

Google 字体和 GDPR

如果您拥有并运营网站,您可能了解 GDPR 或2018 年生效的欧洲通用数据保护条例。这些规则的目标是限制消费者数据的共享,以保护个人信息。
不幸的是,当在您的网站上实施来自 Google 的字体时,任何下载它们以查看您网站的访问者的 IP 都将自动与 Google 共享,并且很可能被发送到美国的服务器。这在新规则下是有问题的。
因此,如果您受到 GDPR 规则的约束(并且在欧洲在线市场内运营的任何人都受到约束),这意味着您必须找到解决方案。到目前为止,您可以通过三种方式来应对这种困境:
  1. 继续使用 Google Fonts并希望一切顺利(不推荐)
  2. 设置一种机制,允许您在用户加载 Google 字体(并与 Google 服务器共享其 IP)之前获得他们的同意。那里有软件。
  3. 下载并在本地托管字体。这通常是最简单的解决方案,我们已经在上面提供了有关如何执行此操作的步骤。
快速说明: WebsiteSetup.org 上的任何人都不是律师,甚至都不是在电视上扮演的角色。因此,以上内容仅应视为一般信息,而非法律建议。如果您想 100% 确定,请咨询法律专业人士。
 

6. 在样式表中调用自定义字体

既然字体已经出现在您的网站上,您就可以正式使用它们了。为此,剩下的就是在样式表中为新字体添加一个声明。例如,要更改标题标签的字体,您可以使用以下内容:
h1,
h2,
h3,
h4,
h5,
h6{
	字体系列:'Roboto';
}
注意:注意您使用的服务如何为您的字体指定 CSS 声明。例如,Adobe Fonts 在 CSS 中调用 Open Sans,  open-sans而不是'Open Sans'在 Google Fonts 中。
 

7. 在古腾堡中使用自定义字体

使用上面的代码,您可以修改网站前端的排版外观。但是,当您在 WordPress 编辑器中创建内容时,它不会改变您的内容的外观。
由于WordPress Gutenberg 编辑器的重点之一是使编辑过程和最终结果之间的过渡更加无缝,因此这是一个很大的禁忌。因此,重要的是要提到如何处理这个问题。
我们已经完成了上面的第一步,将排队的字体挂钩到enqueue_block_assets而不是wp_enqueue_scripts,这曾经是正常过程。
这使得字体在您网站的前端和 Gutenberg 编辑器内都可用。您已经知道如何修改网站面向访问者的字体。但是,要在编辑器中进行类似的更改需要额外的步骤。

创建编辑器样式表

该附加步骤是为编辑器设置样式表。这是属于您的主题functions.php文件的代码:
add_theme_support('editor-styles');
add_editor_style('style-editor.css');
第一行添加了对 WordPress 中编辑器样式表的支持,第二行告诉 WordPress 它的名称以及在哪里查找它。在这种情况下,style-editor.css它位于活动主题文件夹的根目录中。
但是,您可以随意调用该文件,也可以将其放在主题文件夹中的其他位置(如果您愿意):
add_editor_style('assets/css/make-gutenberg-prettier.css');
重要的部分是您实际上创建了一个同名文件并将其放置在指定位置。完成后,您可以打开它并将自定义字体添加到 Gutenberg,如下所示:
h1,
h2,
h3,
h4,
h5,
h6{
	字体系列:'Roboto';
}

p{
	字体系列:“打开 Sans”;
}
而已。您现在知道如何手动将自定义字体添加到 WordPress。
恭喜你自己,这是一些下一级的知识!

简而言之:自定义字体和 WordPress

将自定义字体添加到您的 WordPress 网站是改善网站设计品牌用户体验的好主意。如今,任何人都可以从各种字体中进行选择以在其网站上使用。
上面,我们向您展示了如何在 Google 字体和替代来源上找到自定义排版。我们还讨论了如何以不同方式(远程和本地)在 WordPress 中调用自定义字体并将它们分配给前端和后端。此外,我们研究了如何使用插件解决方案实现相同的目标。
到目前为止,您没有理由在您的网站上使用任何旧字体。从现在开始,自定义您的 WordPress 排版完全在您的手中。
如何将自定义字体添加到 WordPress?您可以推荐任何其他工具吗?在下面的评论部分让我们知道!