WordPress 主题字体怎么改?5 种方法新手教程

WordPress 主题字体怎么改?5 种方法新手教程

选择正确的字体,和选择正确的颜色、布局一样重要。网站的排版影响可读性、用户体验和品牌形象。如果你想知道如何在 WordPress 中更改字体,你来对地方了。

今天的教程会带你了解 5 种更改 WordPress 字体的简单方法。无论你用内置主题设置、插件还是自定义 CSS,不管你的技能水平如何,都能找到适合你的方法。

1. 用 WordPress 主题自定义器更改字体

在 WordPress 中更改字体最简单的方法是通过主题自定义器。大多数现代主题让你在不碰任何代码的情况下调整排版设置。大多数 WordPress 主题的步骤类似。通常你导航到排版 > 字体,更改默认字体或定制当前字体。

让我用 Astra 主题演示如何更改 WordPress 字体。无论你的主题是什么,步骤都类似。全站编辑主题的字体更改选项见下文。先进入 Astra > 自定义,或悬停在外观上点击”自定义”。两个选项都进入同一个界面。这会打开 WordPress 主题自定义器界面。

Astra 在此界面有”全局”设置,让你定制排版、颜色、容器、返回顶部、无障碍、块编辑器等元素。你也可以更改和定制单个网站元素的设置。我会逐一介绍每个选项。点击自定义器中的”全局”访问全局字体设置,可以全站设置字体样式。在自定义器下一页,点击”排版”。

Astra 主题 WordPress 自定义器:红色箭头高亮显示全局设置选项

Astra 主题全局设置面板:红色箭头高亮显示排版选项

你会看到预设字体组合。喜欢的话可以选择任何默认选项,预设会应用到整个网站。想知道预设包含哪些字体,悬停即可查看字体类型。

Astra 主题排版自定义器:显示预设字体配对选项,悬停提示显示 Rubik 和 Karla 字体组合

比如,我为标题和正文选择了 Rubik/Karla 字体组合。Rubik(用于标题)会作用于网站所有 H 标签(H1-H6),Karla 会作用于所有正文和页脚内容。假设你不想要这个组合,或者想为网站的每个标题标签更改字体族(比如 H1 用 Lato、H2 用 Arial 等)。你可以向下滚动自定义器配置相关设置。

下图中,”Base Font(基础字体)“选项让你选择全站字体族(标题和正文)并全局定制设置。你可以设置字重、大小、大小写等。”Heading Font(标题字体)“选项让你更改单个标题标签的字体族。和基础字体一样,可以定制字重、字体族、大小、大小写等。需要点击小铅笔编辑图标打开它们的设置。

Astra 主题排版设置:显示基础字体和标题字体选项,可单独定制 H1 到 H6 字体样式

就像这样:

Astra 主题 H1 字体自定义面板:字体族、字重、大小、行高和文本转换控制

这个页面可以做出很多定制。比如,你可以按设备(平板、桌面、移动)定制字体族。设置是否下划线、删除线、大写、首字母大写等。你越探索 Astra 主题,越能发现它的超能力。定制完网站排版后,点击自定义器界面上的”发布”按钮发布或更新更改。

2. 用 WordPress 插件更改字体

如果你的主题不让你完全控制字体,插件是次优选择。Olympus Google Fonts 插件(或 Easy Google Fonts 等类似插件)让你无需编辑代码就能添加和定制字体。用插件更改 WordPress 字体还有其他好处:完整访问 Google 字体库、Adobe Font 集成,以及上传自己的字体。这种灵活性可能是 WordPress 主题给不了的。许多 WordPress 主题不提供完整的 Google 字体库,可能限制你的设计定制。

本教程我们使用 Olympus Google Font 插件。这个插件还本地托管 Google 字体、预加载字体,并移除其他插件和主题加载的外部字体。如果你的主题或缓存插件不提供这些功能,这个插件是不错的选择。先在博客上安装并激活 Olympus Google Font 插件。

WP 后台中的 Olympus WordPress 插件激活页面,超过 20 万活跃安装

激活后,你会看到 QuickStarter Guide 页面。在这个页面,你可以输入邮箱订阅、下载操作指南 PDF,或直接跳到配置插件。不管怎样,在 WordPress 仪表盘点击”自定义字体(Customize Font)”打开自定义器页面。接下来,从选项点击”Basic(基础)”设置。

WordPress 仪表盘中的 Olympus Google Fonts 插件菜单:红色箭头高亮显示 Customize Fonts 选项

WordPress 自定义器中的字体插件面板:红色箭头高亮显示 Basic Settings

点击下拉菜单选择字体。有超过 1400 种 Google 字体可选。点击小设置图标控制字体样式和字重:斜体、倾斜或常规,以及正常、粗体、中等、半粗和加粗。

WordPress 自定义器中的字体插件基础设置面板:基础排版、标题和按钮的字体族下拉选择器

这个插件有高级设置,让你控制主题排版的每个部分,可以为模板部件、标题和内容指定不同的字体族,页脚内容和其他模板区域也都能单独更改。比如,导航菜单用 Arial、正文内容用 Georgia、引用用 Consolas、项目符号列表用 Palatino、侧边栏标题用 Calibri、侧边栏内容用 AR One Sans。

字体插件高级设置面板:品牌、导航、内容、侧边栏、页脚和仅加载字体的字体定制选项

它是定制 WordPress 排版的强大插件,提供远超传统 WordPress 主题的广泛定制功能。Pro 版提供更多定制和功能:本地托管 Google 字体、阻止其他插件在网站加载 Google 字体、重写外部字体。免费方案对大多数小型 WordPress 博客足够了。

字体插件 Pro 优化设置:本地托管 Google 字体、启用预加载和移除外部字体的高级功能

如果你想访问各种字体族又不修改主题文件,用 Olympus Google Font 等插件更改 WordPress 字体是合适的选择。定制完成后点击”发布”让更改生效。

3. 在全站编辑主题中更改字体

全站编辑主题的不同之处在于:你可以在不写代码的情况下使用块修改或编辑主题的任何部分。就像你在 Gutenberg 编辑器中写作和添加内容一样。默认 WordPress 主题(如 Twenty Twenty-Five)是全站编辑主题的好例子。这种基于块的主题不使用传统 WordPress 自定义器。如果你使用这种主题,可以轻松更改和定制它的字体。

要在全站编辑器(FSE)主题中更改字体,进入外观 > 编辑器。这会打开全站编辑器定制界面。这里你可以定制主题的颜色、排版、导航、模式、布局等。

WordPress 外观菜单:高亮显示编辑器选项,Twenty Twenty-Five 为当前主题

我们只关注在全站编辑器主题中更改字体族。在全站编辑器主题界面点击”样式(Style)”。

WordPress 全站编辑器设计面板:红色箭头高亮显示 Styles 选项

在下一页,你可以点击铅笔编辑图标或向下滚动面板更改排版。点击小铅笔图标在 WordPress 编辑器中打开主题,进一步定制网站排版。

WordPress 全站编辑器 Styles 面板:显示主题定制的调色板和排版字体族预设

如果你只想更改全站排版而不做进一步定制(比如为标题、说明、链接、按钮、文本和大小选择特定字体),可以在这里选择偏好字体。但如果需要进一步定制(添加更多 Google 字体、上传自己的字体、为网站不同元素定制字体大小),点击小铅笔编辑图标。然后在 WordPress 编辑器界面的自定义器中点击”排版”。

WordPress 全站编辑器 Styles 面板:红色箭头高亮显示 Typography 选项

从这里,你打开了一个字体定制的新世界。定制完成后点击保存发布更改。就这样,你已经在全站编辑器主题中更改了字体。

4. 添加自定义字体到 WordPress

想使用 Google Fonts 没有的独特字体?你可以上传自定义字体到 WordPress 网站。这让你对网站设计、字体和整体外观有更多控制。以下是添加自定义字体的方法:

  • 在 Google、Adobe 或 Font Squirrel 找到你喜欢的字体;
  • 下载字体文件(OTF 或 TTF 格式);
  • 用 Use Any Font 等插件上传和应用自定义字体;
  • 或者用 FTP 手动上传字体,添加 CSS 规则全站使用。

自定义字体可以增强品牌形象,但要确保它们是网页安全字体,不会拖慢网站。

5. 自定义 CSS 方法

如果你熟悉代码,也可以直接用自定义 CSS 更改字体:

body {
    font-family: 'Your Font', sans-serif;
}
h1, h2, h3 {
    font-family: 'Another Font', serif;
}

在主题自定义器”附加 CSS”中添加这些规则即可。

总结

在 WordPress 中更改字体比你想象的容易。无论你用内置主题自定义器、插件、页面构建器还是 CSS,总有一种方法适合你的需求。主题自定义器选项最适合新手。它直接、简单,不需要大量配置。插件选项提供更精细的控制和高级定制,适合进阶用户。如果你有想用的自定义字体,可以手动添加到网站。现在你知道如何更改字体了,去实验并找到适合你网站的完美排版吧。

常见问题解答(FAQ)

新手改字体最简单的方法是什么?

用主题自定义器。进入外观 > 自定义,找到排版设置,选预设字体组合或单独调标题、正文的字体就行,完全不用碰代码。大多数现代主题都是这个路子。

主题自带的字体太少,想要更多字体怎么办?

装一个字体插件,比如 Olympus Google Fonts。它提供 1400 多种 Google 字体,还能给导航、正文、侧边栏这些区域分别指定不同字体,比主题自带的灵活得多。

用的是 Twenty Twenty-Five 这类全站编辑主题,怎么改字体?

这类主题不走传统自定义器,要进入外观 > 编辑器,点样式(Styles)面板,再进排版(Typography)设置。想更精细地定制就点铅笔图标打开编辑器慢慢调。

我想用 Google Fonts 里没有的特殊字体,可以吗?

可以。先下载字体文件(OTF 或 TTF 格式),用 Use Any Font 这类插件上传应用,或者用 FTP 手动上传再加 CSS 规则。注意要选网页安全字体,别拖慢网站。

改字体影不影响网站速度?

选对字体就不影响。Olympus 这类插件可以本地托管 Google 字体、启用预加载,还能移除其他插件和主题加载的外部字体,反而对性能有帮助。

我会写一点代码,怎么直接改字体?

在主题自定义器的附加 CSS 里写 font-family 规则就行,比如给 body 设置正文字体、给 h1、h2、h3 设置标题字体,保存后立即生效,不用改主题文件。

从一个具体问题开始

浏览 213 篇中文 WordPress 指南,找到可以立刻执行的答案。

浏览全部教程 →