如何在 WordPress 中使用 Google 字体？

已发表: 2020-02-17

关注@Cloudways

现代网络完全是关于用户体验的。公司投入大量时间和金钱来确保其网站的访问者在浏览其网站时获得最佳体验。

文本表示在网站的美学中起着不可或缺的作用。你的内容质量有多好并不重要；如果读起来不愉快，对读者来说太杂乱了，那么你所有的努力都白费了。

尽管有许多排版选项可供您使用，但访问数百种专业字体（免费）的最简单方法是在您的 WordPress 网站上使用Google 字体。

在这篇文章中，我将向您展示分步说明，以了解如何使用Easy Google Fonts插件手动在您的网站中添加 WordPress Google 字体。我还将向您展示可用于提高网站内容可读性的最佳字体。

什么是 Google 字体以及为什么要使用它们？
如何手动将 Google 字体添加到 WordPress？
如何使用插件将 Google 字体添加到 WordPress？
在网站中使用的 10 种最佳 Google 字体。
在网站中使用 Google 字体的最佳实践。

1- 什么是 WordPress 谷歌字体以及为什么要使用它们？

在开始之前，让我们快速了解一下什么是 Google 字体以及在您的 WordPress 网站上使用它们的主要优势。

Google Fonts是 2010 年推出的libre 许可字体库。您可以通过调用提供的 API 来使用令人惊叹的 Google Fonts 库。有趣的是，您可以免费使用 877 种网络优化字体。这是令人难以置信的。它具有交互式 Web 目录，可让您搜索特定类型的字体并在 Web 浏览器中对其进行测试。

谷歌字体

使用 WordPress Google Fonts 有许多优点。它们可以免费使用（即使对于商业项目）、预先托管（因此它们不会占用您服务器的资源）和可下载（您可以在打印中使用它们）。

目前有大量网站在 WordPress 中使用 Google 字体来发挥自己的优势。所有现代主题都支持使用 Google 字体。

如果您准备好使用易于使用的网络字体来改进您网站的排版，那么您所要做的就是找到合适的字体并将它们与您的 WordPress 网站一起使用。

2- 如何手动将 Google 字体添加到 WordPress

Google Fonts 消除了将字体系列嵌入您的网站的大部分繁重工作。这是一个在线库，可以像任何其他 JS 或 CSS 脚本一样在任何 Web 项目中调用。

在本节中，我将向您演示如何在 WordPress 网站上手动安装 Google 字体。

第 1 步：找到要添加到网站的字体

首先，浏览 Google Fonts 目录并选择要在 WordPress 网站上使用的字体。如果您已经有特定的字体，您可以使用右侧边栏中的搜索框简单地搜索它。

找到合适的字体

您还可以按类别、语言、样式数量、粗细、倾斜度和宽度过滤字体，或按添加日期、字母顺序、趋势或流行程度对字体进行排序。

这些字体在字母笔划的末尾附加了小线，例如Times New Roman和Courier 。
无衬线字体。 在字母笔画末尾没有小线的字体是无衬线字体，例如Helvetica和Roboto 。
显示字体主要用于大文本，例如标题。
具有手写外观的字体，例如Pacifico 。
与所有字符的间距完全相同的字体，例如Source Code Pro 。

互动展示

使用 Google Fonts 的交互式目录功能的最大优势之一是您可以快速预览您感兴趣的字体。您所要做的就是单击字体的字段框并在其中键入文本。

出于本教程的目的，我将使用Open Sans 。

打开 sans

第 2 步：将字体添加到您的选择中

现在我们知道我们要使用哪种字体，让我们将它添加到我们的选择中。您可以通过单击字体系列框右上角的加号 (+) 来执行此操作。

添加字体选择

您可以将任意数量的字体系列添加到您的选择中。一切就绪后，单击屏幕底部的黑色X Family Selected栏查看您的选择。

第 3 步：自定义字体

X Family Selected栏会打开一个窗口，该窗口有两个选项卡 -嵌入和自定义。在我们将字体系列嵌入到我们的 WordPress 网站之前，我们将花点时间对其进行一些自定义。

自定义字体

在自定义屏幕上，勾选您希望能够在您的网站上使用的样式和语言的框。

请记住，您选择的字体样式和语言越多，您网站页面的加载时间就越长。您会在同一屏幕中看到一个加载时间指示器，让您知道您的选择是否会使加载时间变慢。

加载时间慢

为了防止我们的字体选择影响我们网站的页面加载时间，我们决定采用一个简单的选择 -浅色 300和常规 400 。

快速加载时间

Cloudways 上的 WordPress 网站速度提高 300 倍

尝试我们的 3 天免费试用

免费开始！

第 4 步：将 Google 字体嵌入您的 WordPress 网站

您可以通过多种方式向 WordPress 添加自定义字体。我们将向您展示如何使用wp_enqueue_style()函数执行此操作，因为它是 WordPress 网站的推荐方法。

首先返回“嵌入”选项卡，然后将字体选择的链接 (URL) 复制到剪贴板。在我们的例子中，完整的 URL 是： https://fonts.googleapis.com/css?family=Open+Sans:300,400 。

嵌入字体 wp

接下来，登录到您的 WordPress 仪表板，在Appearance 中转到编辑器并使用 FTP 客户端打开活动主题的functions.php文件，并向其中添加以下代码。

 函数 add_google_fonts() {

wp_enqueue_style( ' add_google_fonts ', ' https://fonts.googleapis.com/css?family=Open+Sans:300,400', false );}

add_action('wp_enqueue_scripts', 'add_google_fonts');

注意：您需要将 URL 替换为您自己的 URL。

您可以通过使用主题的排版选项（如果支持）或通过向活动主题的主样式表添加一些代码来开始使用刚刚添加的字体。例如，如果我们想将所有 H2 标题更改为我们的新字体，我们的代码可能如下所示：

 h2{

font-family: 'Open Sans', sans-serif;

}

我已经使用 Google Fonts 成功升级了我的 WordPress。由于某些奇怪的原因，谷歌字体可能无法工作，遇到这种情况，我必须参考可以作为备份显示的默认字体集。但这种情况很少发生。

为什么速度对 SEO 和 UX 至关重要？

这些专家提示将向您展示如何提高 WordPress 网站的速度。

谢谢你

您的电子书正在进入您的收件箱。

为此，只需添加默认的本地托管字体类型，例如 Georgia、Cambria 或 Courier。

3- 如何使用插件将 Google 字体添加到 WordPress

对于某些人来说，手动集成 WordPress Google Fonts 可能不是一种选择。不要担心。还有另一种（更简单的）方法可以将 Google 字体添加到您的 WordPress 网站。通过插件。

在本节中，我将向您展示如何使用Easy Google Fonts插件将 Google Fonts 集成到 WordPress 中。

简单的谷歌字体

第 1 步：安装并激活插件

登录您的 WordPress 管理面板并导航到Plugins > Add New 。搜索Easy Google Fonts并将其安装在您的网站上。

安装插件后，单击“激活”按钮开始使用它。

第 2 步：开始使用 Google 字体

将插件激活到您的网站后，它会自动将您选择使用的 Google 字体的样式表排入队列。要开始，请从 WordPress 管理面板转到外观>自定义。

您会注意到一个名为Typography的新菜单项已添加到 WordPress 定制器中。

排版菜单

它允许您控制段落和各种标题（H1 到 H6）的排版设置。

编辑字体

假设您想编辑网站上的段落字体，Easy Google Fonts 插件可让您自定义其样式、外观和位置。让我们来看看它具有的不同样式选项。

在样式选项卡中，您可以配置脚本、字体系列、字体粗细、文本修饰和文本转换。字体系列选项使您可以访问数百种 Google 字体，这些字体分类为标准 Web 字体、 Google Serif 字体、 Google Sans Serif 字体、 Google 显示字体、 Google 手写字体和Google Monospace 字体。

因此，如果我们想使用Open Sans ，我们将脚本选项设置为Latin ，字体系列选项设置为Open Sans ，字体粗细设置为Regular （相当于Regular 400 ）。

排版风格