如何在 WordPress 中更改字体

为您的WordPress(WordPress)网站添加一些品牌和个人主义的好方法是更改​​主题中的字体。

排版和其他条带元素可以营造良好的第一印象，为您网站的访问者营造氛围，并确立您的品牌形象。研究(Studies)还发现，字体会影响读者学习、回忆信息和记忆文本的能力。

如果您刚刚安装了 WordPress 主题(installed a WordPress theme)或有一些CSS和编码经验，我们将向您展示几个可用于更改WordPress字体的选项。

如何在 WordPress 中更改字体(How to Change Fonts in WordPress)

您可以使用三个主要选项来更改 WordPress 中的字体：

  • 使用托管在第三方网站上的Web 字体，例如Google Fonts、Fonts.com或Adob​​e Edge Web Fonts
  • 将网络字体编码(Code)到您的主题中并将它们排入队列
  • 在您的网站上托管(Host)字体并将它们添加到您的主题中

1. 如何使用 Web 字体更改 WordPress 中的字体(1. How to Change Fonts in WordPress Using Web Fonts)

与下载和上传字体文件相比，使用网络字体在WordPress中更改字体是一种更简单、更快捷的方法。

使用此选项，您可以访问各种字体(access a variety of fonts)，而无需在每次更改时都更新它们，并且它不会占用您主机上的服务器空间。使用插件或通过向您的站点添加代码直接从提供商的服务器提供字体。

确保(Make)您为网站选择的网络字体与您的品牌标识相匹配，正文易于阅读，网站访问者熟悉，并传达您想要的情绪和形象。

您可以使用 WordPress 插件(using a WordPress plugin)或通过向您的网站添加几行代码手动添加网络字体。让我们探索这两种选择。

如何使用 WordPress 插件添加 Web 字体(How to Add Web Fonts Using a WordPress Plugin)

根据您选择的网络字体，您可以使用WordPress插件访问字体库并在您的网站上选择您想要的字体。对于本指南，我们选择了Google Fonts并使用了Google Fonts Typography插件。

  1. 要开始使用，请登录您的WordPress管理仪表板，然后选择Plugins > Add New。

  1. 在搜索框中输入 Google Fonts Typography，然后选择立即(Google Fonts Typography)安装(Install Now)。

  1. 选择激活(Activate)。

  1. 接下来，通过转到Appearance > Customize定制(Customizer)器。

  1. 选择Google 字体(Google Fonts)部分。

  1. 接下来，单击链接以打开字体设置并进行如下配置：
  • 在Basic Settings下，设置正文、标题和按钮的默认字体。

  • 在高级设置(Advanced Settings)下，配置您的网站标题和描述、菜单、标题和内容、侧边栏和页脚。

  • 取消选中“(Uncheck)字体加载(Font Loading)”部分中任何不需要的字体粗细，以避免减慢您的网站速度(avoid slowing down your site)。

如果您网站上的字体无法正常显示或无法正常工作，请使用“调试(Debugging )”部分进行故障排除。

  1. 您可以在定制(Customizer)器中测试这些设置，以确保它们按您希望的方式工作，然后选择发布(Publish)。

注意(Note)：如果您忘记在定制(Customizer)器中选择发布，您将丢失所做的所有更改。

如何使用代码添加 Web 字体(How to Add Web Fonts Using Code)

如果您有权访问主题代码，则可以安装和使用网络字体。这是添加额外插件的手动替代方法，但如果您仔细按照步骤操作，它并不复杂。

但是，如果您使用WordPress主题目录中的主题或自定义主题，则需要采取不同的步骤。

如果您从WordPress主题目录中购买了主题，请创建一个子主题(create a child theme)，然后为其提供 style.css 和 functions.php 文件。如果您有自定义主题会更容易，因为您可以从主题中编辑样式表和函数文件。

  1. 要开始使用，请从Google 字体(Google Fonts)库中选择一种字体，然后选择+ (plus)图标将其添加到您的库中。

  1. 接下来，选择底部的选项卡，您可以在其中找到要添加到站点的代码。转到嵌入选项卡下的(Embed)嵌入字体(Embed font)部分。您会发现由Google Fonts生成的代码，如下所示：

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

注意(Note)：我们为本指南选择了Work Sans，因此字体名称可能因您选择的不同而有所不同。

  1. 复制这部分代码：https://fonts.googleapis.com/css2?family=Work+Sans

这允许您将样式从Google 字体(Google Fonts)服务器排入队列，以防止与第三方插件发生冲突。它还允许更轻松地修改子主题。

  1. 要将字体排入队列，请打开函数文件并添加以下代码。（将(Replace)链接替换为您从Google 字体(Google Fonts)获得的链接）：

函数 wosib_add_google_fonts() { (function wosib_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

  1. 如果您想在将来添加更多字体，您可以在函数中添加新行，或者在同一行中添加新行，如下所示：

功能 mybh_add_google_fonts() { (function mybh_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style('googleFonts');
}

add_action('wp_enqueue_scripts', 'mybh_add_google_fonts');

在本例中，我们已将Cambria和Work Sans字体排入队列。

下一步是将字体添加到主题的样式表中，以使字体在您的网站上工作。

  1. 为此，请打开主题的 style.css 文件并添加代码以使用 Web 字体设置各个元素的样式，如下所示：

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

在这种情况下，主字体将是Work Sans，而像 h1、h2 和 h3 这样的标题元素将使用Cambria。

完成后，保存样式表并检查您的字体是否正常工作。如果没有，请检查样式表中的字体是否被覆盖，或者清除浏览器缓存并重试。

  1. 准备好备用字体，以确保可以轻松呈现或访问字体，尤其是对于使用旧设备、连接不良或字体提供商有技术问题的用户。为此，请转到样式表并编辑CSS，如下所示：

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

如果一切顺利，您网站的访问者将看到您的默认网络字体，在我们的例子中是Work Sans和Cambria。如果有问题，他们会看到备用字体，例如我们的例子中的Arial或Times New Roman。

2. 如何通过托管字体更改 WordPress 中的字体(2. How to Change Fonts in WordPress by Hosting Fonts)

在您自己的服务器上托管字体可以帮助您优化 Web 字体的性能，但它也是一种更安全(a more secure way)的方式，而不是从第三方站点获取资源。

Google字体和其他网络字体允许您下载字体以用作本地托管的字体，但如果许可证允许您这样做，您仍然可以将其他字体下载到您的计算机上。

  1. 首先，下载、解压缩、将字体文件上传到您的站点，然后将其链接到您的样式表中。在这种情况下，您不必像处理 web 字体那样在 functions.php 文件中将字体排入队列。在您的网站上使用它们之前，请确认您上传的文件是.woff格式。

  1. 接下来，转到wp-content/themes/themename将字体文件上传到您的主题。 
  2. 打开样式表并添加以下代码（在本例中，我们使用 Work Sans字体，但您可以将其替换为您自己的字体）：

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
字体粗细：正常；( font-weight: normal;)
字体样式：正常；( font-style: normal;)
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
字体粗细：粗体；( font-weight: bold;)
字体样式：正常；(font-style: normal;)
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
字体粗细：正常；( font-weight: normal;)
字体样式：正常；( font-style: normal;)
}

注意(Note)：使用@fontface 允许您使用粗体、斜体和其他字体变体，之后您可以指定每种字体的粗细或样式。

  1. 接下来，为您的元素添加样式，如下所示：

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

自定义您的 WordPress 排版(Customize Your WordPress Typography)

在WordPress(WordPress)中更改字体是改善品牌和用户体验的好主意。这不是一项简单的任务，但您可以更好地控制您的主题。

您(Were)是否能够使用本指南中的提示步骤自定义您网站的字体？在评论中告诉我们。(Tell)



平 任

About the author

我是一位强烈推荐的 Windows 10 专家，我专注于帮助人们个性化他们的计算机外观并使他们的 Office 工具更加用户友好。我利用自己的技能帮助他人找到使用 Microsoft Office 的最有效方法，包括如何格式化文本和图形以进行在线打印、如何为 Outlook 创建自定义主题，甚至如何自定义桌面任务栏的外观计算机。


Related posts