如何在WordPress中更改字体

在您的WordPress网站上添加一些品牌和个性主义的一种好方法是更改​​主题中的字体。

排版和其他带状元素会给人留下良好的第一印象，为网站的访问者营造心情，并建立您的品牌形象。 学习 还发现字体会影响读者学习，回忆信息和记忆文本的能力。

如果您安装了WordPress主题 或有一定的CSS和编码经验，我们将为您展示几个可用于在WordPress中更改字体的选项。

如何在WordPress中更改字体

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

使用Google字体 ， Fonts.com 或之类的网络字体4，它们托管在第三方网站上

将网络字体编码到您的主题中并将它们排入队列

您网站上的主机字体并将它们添加到您的主题中

1。如何使用Web字体在WordPress中更改字体

与下载和上传字体文件相比，使用Web字体是一种在WordPress中更改字体的简便快捷的方法。选项，您可以访问各种字体 而不每次更改时都更新它们，并且它不会占用主机上的服务器空间。可以使用插件直接从提供商的服务器提供字体，也可以通过将代码添加到您的站点来直接提供字体。

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

。您可以添加Web字体使用WordPress插件 或通过向站点添加几行代码来手动添加。让我们探讨这两个选项。

如何使用WordPress插件添加网络字体

根据您选择的网络字体，您可以使用WordPress该插件可访问字体库，并在您的网站上选择所需的字体。在本指南中，我们选择了Google字体并使用了Google字体排版 插件。

要开始使用，请登录到WordPress管理信息中心，然后选择插件>添加新。

在搜索框中输入Google字体排版，然后选择立即安装。

选择激活。

接下来，转到外观>自定义。访问自定义程序。

选择Google字体部分。

接下来，单击链接以打开字体的设置并按如下方式进行配置：

在基本设置下，为您的身体设置默认字体文本，标题和按钮。

在高级设置下，配置网站标题和说明ription，菜单，标题和内容，侧边栏和页脚。

在字体加载部分中取消选中所有不需要的字体粗细为避免减慢您的网站速度 。

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

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

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

如何使用代码添加Web字体

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

但是，如果您使用的是WordPress主题目录中的主题，则可以采取不同的步骤。

如果您是从WordPress主题目录中购买的主题，请创建一个子主题 ，然后为其指定style.css和functions.php文件。如果您有一个自定义的主题，这会更容易，因为您可以从主题中编辑样式表和函数文件。

要开始使用，请从Google字体 库中选择一种字体，并选择+（加号）图标将其添加到您的库中。

接下来，选择底部的标签，您将在其中找到要添加到网站的代码。转到嵌入标签下的嵌入字体部分。您会发现由Google字体生成的代码，如下所示：

注意：我们为本指南选择了Work Sans，因此字体名称可能因您选择的名称而异。

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

这可让您从Google字体服务器中加入样式，以防止与第三方插件冲突。

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

功能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'）;

您可以如果要在以后添加更多字体，请在函数中添加新行，或在同一行中添加新行，如下所示：

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_font s'）;

在这种情况下，我们已将Cambria和Work Sans字体排入队列。

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

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

body {
font-family：'Work Sans'，sans-serif;
}

h1，h2，h3 {
字体家族：“ Cambria”，衬线;
}

在这种情况下，主字体为Work Sans，而标题元素（如h1，h2和h3）将使用坎布里亚。

完成后，保存样式表并检查字体是否按预期工作。如果不是，请检查样式表中是否没有覆盖这些字体，或者清除浏览器缓存，然后重试。

已准备好备用字体，以确保字体可以很容易地呈现或访问，特别是对于使用旧设备，连接不良或字体提供商存在技术问题的用户。为此，请转到样式表并编辑CSS，使其如下所示：

body {
font-family：'Work Sans '，Arial，sans-serif;
}

h1，h2，h3 {
font -family：“ Cambria”，Times New Roman，衬线；
}

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

2。如何通过托管字体在WordPress中更改字体

在自己的服务器上托管字体可以帮助您优化Web字体的性能，但这也是一种更安全的方式

Google字体和其他网络字体允许您下载用作本地托管字体的字体，但在许可允许的情况下，您仍然可以将其他字体下载到计算机上

要开始使用，请下载，解压缩，将字体文件上传到您的站点，然后将其链接到样式表中。在这种情况下，您不必像使用网络字体那样将字体排入functions.php文件。在您的网站上使用文件之前，请确认您要上传的文件为.woff格式。

接下来，转到wp-content / themes / themename即可将字体文件上传到您的主题。

打开样式表并添加以下代码（在这种情况下，我们使用的是Work Sans字体，但是您可以用自己的字体替换）：

@ font-face {
font-family：'Work Sans';
src：url（“ fonts / Work Sans-Medium.ttf”）格式（'woff'）; / *中* /
字体粗细：普通；
字体样式：普通；
}

@ font-face {
字体系列：'Work Sans';
src：url（ “ fonts / Work Sans-Bold.ttf”）格式（“ woff”）； / *中* /
字体粗细：粗体；
字体样式：普通；
}

@ font-face {
font-family：'Cambria';
src：url（“ fonts / Cambria.ttf”）format（'woff'）; / *中* /
字体粗细：普通；
字体样式：普通；
}

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

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

body {
font-family：'Work Sans '，Arial，sans-serif;
src：url（“ / fonts / Work Sans-Medium.ttf”）;
}

h1，h2，h3 {
字体家族：“ Cambria”，Times New Roman，衬线；
}

自定义WordPress字体

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

您是否能够按照本指南中的提示使用以下步骤来自定义网站字体？在评论中告诉我们。

相关文章: