如何在 WordPress 中更改字体

已发表: 2021-04-06

您想自定义您的网站并调整排版吗？ 在本文中，我们将向您展示如何更改 WordPress 中的字体以使您的网站具有专业和时尚的外观。

网站排版很重要。 它不仅为您的网站赋予了一定的风格，而且还可以成就或破坏用户体验。 如果您的字体对用户不友好，访问者更有可能离开您的网站。

您使用的排版应该与您尝试与您的网站交流的内容相匹配。 您的网站是销售咨询服务还是摄影网站？ 您可以想象这两个网站将使用的主题和字体完全不同。

您可以在 Google 字体库中看到几种可以使用的免费字体。 如果您正在寻找 Proxima-Nova 等高级字体，您必须查看 Adob​​e 的 Typekit。 这两个字体库都带有许多适合您业务的用户友好字体。

如何在 WordPress 中更改字体

有几种方法可以在 WordPress 中更改字体：

  1. WordPress 默认选项（古腾堡/​​经典编辑器）
  2. 手动使用 CSS
  3. 使用专用插件
  4. 托管自己的字体
  5. 网页字体整合

在本指南中，我们将逐步向您展示每种方法，以便您选择最适合您网站的方法。

1) WordPress 默认选项

默认情况下，WordPress 提供两种自定义排版的选项：使用 Gutenberg 或使用 Classic 编辑器。

1.1) 与古腾堡

最新版本的 WordPress 带有一个全新的编辑器：古腾堡编辑器。 它是一个高级工具，带有几个块并且非常易于使用。

要更改字体，请打开帖子或页面，然后选择要修改的文本。

段落块

在右侧，您将看到排版选项。

段落字体

在那里，您将看到几个更改字体大小的选项：

  • 默认
  • 小的
  • 中等的
  • 大
  • 巨大的
  • 风俗

您可以选择任何这些预定义尺寸或添加自定义尺寸。 例如，如果我们选择 20px 作为字体大小，我们将在编辑器中看到更改。

自定义字体大小

这样，您可以轻松地修改您的块并为其分配自定义字体大小。

1.2) 使用经典编辑器

如果您更喜欢通过经典编辑器管理排版，则需要安装并激活高级编辑器工具 (TinyMCE Advanced) 插件。

安装高级编辑器工具插件

激活插件后，打开内容编辑器，您会注意到几个附加工具。

高级编辑器工具

从下拉列表中，您可以更改字体类型和大小。 您可以选择多种 Google 字体和尺寸来自定义您的网站。

tinymce 字体集成

使用这些选项，您可以选择任何段落并从下拉列表中选择任何字体和大小。

2) 手动使用自定义 CSS 代码

在 WordPress 中更改字体的另一种方法是使用自定义 CSS 代码。 默认情况下，主题带有适用于整个站点的特定字体大小。 但是，有时您可能希望自定义它们以使您的网站具有不同的风格。

为此，首先，在您的 WordPress 仪表板中转到外观 > 自定义 > 附加 CSS 。 在本节中，您可以添加自定义代码并编辑您的站点。

更改正文字体

例如，要将站点范围内的正文字体大小更改为 16 像素，您需要使用以下 CSS 代码：

 body { font-size : 16px; }

更改字体大小

更改段落字体

同样，如果您正在寻找一种将段落字体大小调整为 16 像素的方法，您应该使用以下 CSS 代码：

p {
 font-size : 16px;
}

段落字体

自定义标题字体

最重要的是，如果您需要修改标题的字体大小，可以使用以下代码：

.entry-content h2 {
 font-size : 36px;
}

.entry-content h3 {
 font-size : 30px;
}

.entry-content h4 {
 font-size : 26px;
}

.entry-content h5 {
 font-size : 22px;
}

.entry-content h6 {
 font-size : 20px;
}

使用 CSS 更改字体大小

这些只是示例，因此请确保根据需要调整字体大小。 当我们使用定制器进行这些更改时，您可以在右侧看到更改。

对自定义感到满意后，保存更改并按Publish 。

发布更新

更改字体系列

此外，要更改站点范围内的字体系列，您可以使用以下代码：

 * {字体系列：“Verdana”，Verdana，无衬线}

星号 (*) 会将更改应用于整个站点，因此如果您只想将更改应用于某些页面或帖子，请将其从代码中删除。 有关 CSS 字体的更多信息，请查看此站点。

最重要的是，您还可以更改字体样式。 例如，如果要将标题 2 和 3 设为斜体，请使用以下代码：

 h2, h3 { font-style : italics ; }

如果您想对主题应用类似的更改，可以直接在子主题的style.css文件中编写代码。 请记住，这将在整个站点范围内应用更改，因此请确保在继续之前创建站点的完整备份。

3) 使用插件

您还可以使用专用插件更改 WordPress 中的字体。 在本节中，我们将向您展示如何将 Google 字体与您的网站集成。 您需要做的第一件事是安装并激活 Easy Google Fonts 插件。

在 wordpress 中更改字体 - 安装简单的谷歌字体

之后，您可以更改网站的字体。 转到外观 > 自定义，然后从自定义程序中，您将能够控制您网站的排版。 在左侧，您将看到一个名为Typography的新自定义选项。

更改 wordpress 中的字体 - wordpress 定制器

选择它，您将看到一个屏幕，其中包含多个选项来更改段落和标题的整个排版。

假设您要更改段落字体，请打开“编辑字体”选项。

选择段落字体

从那里，您可以更改：

  • 脚本/子集
  • 字体系列
  • 字体粗细
  • 文字装饰
  • 文本转换

如果您需要更改字体外观，请转到下一个可以更改的选项卡：

  • 字体颜色
  • 背景颜色
  • 字体大小
  • 线高
  • 字母间距

字体外观

最后，从定位选项卡中，您可以自定义：

  • 利润
  • 填充
  • 边界
  • 边界半径
  • 展示

字体定位

更改字体

这些自定义选项非常适合将您的排版提升到一个新的水平。 例如，假设您想更改 WordPress 网站上的字体系列。 从样式选项卡中，选择您要使用的字体。

字体系列

如果您有特定的字体系列，您可以使用搜索功能。 对于这个演示，我们将使用 Work Sans 字体。

工作无字体系列

由于我们使用 WordPress 定制器进行这些更改，因此每次更新都将在实时预览中可见。 例如，当我们将默认主题字体更改为 Work Sans 时，我们可以实时看到更改。

工作无字体激活

同样，您还可以修改字体粗细、文本装饰和转换以及标题。

完成段落字体自定义后，转到“标题 1”字体选项。 您可以从列表中选择任何标题，但在本教程中，我们将重点关注标题 1。

标题 1 字体选项

就像我们之前所做的那样，我们将更改字体系列。 在本例中，我们将选择 Roboto Slab。

标题字体

通过遵循这个简单的方法，您可以更改段落和标题字体。 由于此插件集成了大多数 Google 字体，因此您有很多选项可供选择。 最重要的是，样式自定义选项非常易于使用，使每个用户都可以访问整个过程。

4) 托管您自己的字体

如果您的本地计算机上有一些自定义字体，您可以将它们托管在您的 Web 服务器上。 在本节中，我们将向您展示如何在 WordPress 中托管自己的字体并更改排版。

为此，您需要访问 Web 服务器的文件管理器以创建自定义文件夹并上传字体。 如果您使用任何最受欢迎的 WordPress 托管公司，您可能可以使用易于使用的 cPanel。 或者，如果您使用的是 Kinsta 或 WP Engine 等托管托管服务，则必须使用 FileZilla 等 FTP 客户端或专用文件管理器插件。

对于这个演示，我们将使用暂存环境，因此更改核心文件和上传自定义文件将非常容易。

在将字体直接上传到主题文件夹之前，为了便于管理，您应该创建一个名为fonts的新文件夹。 然后，您可以将所有自定义字体上传到此文件夹，以便于访问。

字体文件夹

创建文件夹后，打开它。 您将在此处上传自定义字体文件。

现在，您需要找到您打算使用的字体。 对于这个演示，我们将使用来自 Google Fonts 的字体文件 Lato，但您可以选择任何您喜欢的字体。

拉托网络字体

选择字体后，您将被重定向到其专用页面，您将在那里看到下载系列按钮。

下载字体系列

按下该按钮后，字体系列将作为.zip文件下载到您的计算机。 解压缩并将文件上传到您的字体文件夹。

上传的字体

这是第一步。 现在让我们看看如何更进一步，将您的字体与您的主题相结合。

将您的字体与 CSS 集成

现在，您可以使用一些自定义 CSS 开始将此字体与您的主题集成。 打开WordPress Customizer ，转到Additional CSS部分，然后从下面复制 CSS 代码。

 @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Medium.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : normal ; font-style : normal ; } @font-face { font-family : 'Lato' ; src : url ( “fonts/Lato-Bold.ttf” ) format ( 'woff' ) ; /* medium */ font-weight : bold ; font-style : normal ; }

如果您查看 CSS 代码，您会发现它提到了三个主要内容。

  • 字体家族
  • 来源网址
  • 字体粗细

当您将此 CSS 代码粘贴到您的定制器时，您需要根据您选择的字体更新某些部分。 首先，您需要更新字体系列。 在我们的代码中，Lato 是字体系列，因此您需要将其替换为您选择的字体。 您可以在标题中找到字体系列。

在wordpress中更改字体查找字体系列

之后，您需要调整字体的路径。 如果您已按照上述步骤操作，则您已将字体文件上传到名为fonts的文件夹中。 因此，只需将行src : url ( “fonts/Lato-Bold.ttf”更改为fonts/your-font-name.ttf ，就可以了。

此外，您可以根据需要更改字体粗细。 如果您将字体用于段落，则正常的字体粗细可以完成这项工作，但您也可以更改值。

在wordpress lato font css中更改字体

最重要的是，您可以使用以下 CSS 代码更改标题字体：

 h1 { font-family : 'Lato' , Georgia , serif ; }

使用更改 wordpress lato 字体中的字体

如果您想更改段落字体，请使用以下 CSS 代码：

p {
font-family : 'Lato' , Georgia , serif ;

}

更改wordpress lato段落字体中的字体

另一方面，如果您需要更改整个网站的字体，请使用以下 CSS 代码：

body {
font-family : 'Lato' , Georgia , serif ;

}

更改 wordpress lato 正文字体中的字体

这样，您可以轻松更改 WordPress 中的字体。 如您所见，这是一种对初学者友好的方法，无论您的编码知识如何，都可以轻松应用。

5) 网页字体整合

集成网络字体是在 WordPress 中自定义字体的另一种简单方法。 我们不会在我们的服务器上托管字体，而是通过唯一链接调用第三方字体，提供字体。 Web 字体集成的好处是您不需要手动托管任何字体并依赖任何 FTP 软件。

对于网络字体集成，首先，转到Google 字体并选择您喜欢的字体和样式。

在wordpress中更改字体选择字体样式

在您的右侧，您将看到嵌入字体的代码。 复制它。

更改wordpress字体链接代码中的字体

在我们的例子中，字体代码是：

 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family= Spartan & display=swap" rel="stylesheet">

然后，您需要编辑主题的functions.php文件来调用字体。 但在此之前，您将不得不调整代码。 您所需要的只是字体系列 URL，在我们的例子中是：

https://fonts.googleapis.com/css2? 家庭=斯巴达人

获得 URL 后，打开主题的functions.php文件。 您可以使用子主题或插件来修改主题核心文件。 然后，粘贴以下代码。

 function quadlayers_add_google_fonts ( ) { wp_register_style ( 'googleFonts' , 'https://fonts.googleapis.com/css2?family=Spartan' ) ; wp_enqueue_style ( 'googleFonts' ) ; } add_action ( 'wp_enqueue_scripts' , 'quadlayers_add_google_fonts' ) ;

注意：确保使用您选择的字体更改 URL。 functions.php 文件编辑

更新文件后，您将成功地将字体与您的网站集成。 现在，您可以使用 CSS 代码来指定字体。 正如我们之前所做的，要更改正文字体，您可以使用以下代码：

body {
font-family : 'Spartan' , Georgia , serif ;

}

之后，根据你的谷歌字体更新字体系列，你就完成了。

我们已经看到了在 WordPress 中更改字体的不同方法。 但这还不是全部。 您还可以更进一步，进一步自定义字体。

如何将自定义字体添加到 WordPress

更改字体是一个好的开始，但如果您想从竞争对手中脱颖而出并创建一个独特的网站，您可能需要向您的网站添加自定义字体。 有四种方法可以将 Google 字体与 WordPress 安装集成。

  • 带有专用的字体插件
  • 修改functions.php文件
  • 编辑 header.php 文件
  • 通过 style.css 文件

有关如何使用每种方法将自定义字体添加到您的网站的更多信息，请查看我们的完整指南。

奖励：如何在某些区域更改主题字体

您可以将更改应用于某些区域，而不是更改站点范围内的字体。 为此，请右键单击要更改字体的页面并选择Inspect 。

检查元素

它将在您的右侧打开一个新控制台。

检查元素工具

您可以将鼠标悬停在元素上以查看每个元素的确切 CSS 值。

检查元素 CSS 代码

在这种情况下，我们将更改标题字体 (h1)，因此 CSS 类是entry-title 。

更改 wordpress 条目标题中的字体

然后，在您的 WordPress 仪表板中，转到外观 > 自定义 > 附加 CSS并粘贴以下 CSS 代码以更改帖子标题字体。

注意：您要使用的字体应该已经与您的站点集成。

 .entry-title { font-family: 'Lato', Georgia, serif; }

只需使用您想在您的网站上使用的字体调整代码。

而已！ 这样，您可以轻松更改某些区域的字体。 确保为它使用正确的 CSS 类，否则它将无法工作。

如何更改字体颜色

除了更改字体外，您可能还想更改字体颜色以创建独特的网站并为访问者提供更好的用户体验。 好消息是您可以在不使用任何插件的情况下实现这一目标。

让我们看看如何使用简单的 CSS 代码更改网站上的字体颜色。

假设您有一个包含多个标题的页面，如下所示：

四层演示帖子

要更改标题的颜色，首先需要找到合适的 CSS 类。 例如，要修改 h2 字体颜色，您必须通过右键单击它并按Inspect来找到它的类。

条目内容h2

在这种情况下，CSS 类是.entry-content h2 。

之后，打开 WordPress Customizer，转到Additional CSS部分并粘贴以下 CSS 代码：

 .entry-content h2 { color : #f542f5 ; }

改变h2颜色

如您所见，标题 2 的颜色变为红色。

这样，您还可以修改所有标题。 您需要做的就是将 h2 替换为您喜欢的标题标签。

或者，如果您想更改段落字体，请使用以下 CSS 代码：

 .entry-content p { color : blue ; }

段落颜色

使用代码作为基础，并为网站的每个部分选择所需的颜色。

而已！ 这就是您可以轻松更改字体颜色的方法。

如何从网站和图像中识别字体

浏览网页时另一个有趣的选择是能够从网站和图像中识别字体。

有不同的方法可以了解网站使用的排版。 最简单的方法是使用浏览器的检查工具。 找到您喜欢的字体后，只需右键单击包含该字体的文本并转到Inspect （在某些浏览器中，您可能需要转到Web Developer > Developer Tool ）。 您将看到该元素将突出显示，并且您将能够在检查器上看到样式和布局。

之后，转到Computed选项卡并找到Font-Family字段，您将在其中看到网站的字体。

此外，您可以使用名为 WhatTheFont 的工具从图像中识别字体。 有关如何从网站和图像中获取有关字体信息的更多信息，我们建议您查看我们的关于如何识别字体的指南。

结论

总而言之，通过自定义您网站上的排版，您可以为您的网站赋予不同的风格并改善您网站的用户体验，从而在您的竞争中脱颖而出。

在本指南中，我们看到了在 WordPress 中更改字体的不同方法：

  • 默认编辑器（古腾堡和经典编辑器）
  • 自定义 CSS 代码
  • 带插件
  • 托管自己的字体
  • 网页字体整合

列表中最简单的方法是使用古腾堡或经典编辑器。 它允许您单击几下修改字体并实时查看更改。 或者，如果要自定义字体大小、样式和颜色，可以使用 CSS 代码。

另一个很好的解决方案是使用专用插件。 无需编写任何代码，您就可以通过定制器更改您的网站字体并完全控制您的网站排版。

如果您有字体文件，托管您自己的网络字体也是一个不错的选择。 另一方面，如果您不想在服务器上托管字体，则集成 Web 字体是自定义字体的一种简单方法。 这种方法的主要优点是您必须托管字体或依赖 FTP 软件。 但是，请记住，调用 Web 字体可能会增加您网站上的 HTTP 请求，因此您需要优化请求以避免性能和速度问题。

我们希望您喜欢本指南并发现它很有用。 如果你这样做了，请在社交媒体上分享。 如需更多教程和指南，请查看我们的博客。

您使用哪种方法来更改网站上的字体？ 您知道我们应该添加的任何其他方法吗？ 在下面的评论部分让我们知道！