如何在 WordPress 中优化谷歌字体

已发表: 2023-02-11

每个人都知道拥有一个设计良好的网站是吸引更多访问者的关键。 使您的网站看起来有吸引力但又不影响可用性的一种方法是使用正确的字体。 在本文中，我们将探讨如何在 WordPress 中优化 Google 字体以获得更好的性能和改进的用户体验。

在我们开始之前，让我们来看看谷歌字体到底是什么，以及为什么我们必须在 WordPress 中优化谷歌字体。

什么是谷歌字体？

Google Fonts 是一个免费字体库，其中包含 1300 多种由 Google 团队创建的开源字体，您可以在自己的网站上使用这些字体。 它们有多种款式和重量可供选择。 您可以在 Serif 和 Sans-Serif 系列以及一系列 Display 和 Handwriting 字体中找到它们。 您可以将这些字体用作网站、电子邮件甚至打印文档中的正文或标题。

如果您不确定选择哪种字体，Google 提供了一个方便的预览工具，因此您可以查看每种字体在您的网站上的外观。 该库还包含大量国际字体，支持 200 多种语言。 使用 Google Fonts 时，您无需在计算机上安装任何软件，也无需担心版权问题。 您需要做的就是将字体链接到您的网站，一切顺利。

Google Fonts 还设计为适合不同的屏幕尺寸，使其易于在任何设备上使用。 Google Fonts 还可以让排版创意变得轻松。 借助其库中的数百种字体，您可以创建出众的精美设计。 而且，如果您想为多种设计使用一种字体，您还可以组合字体以获得独特的外观。

为什么我们必须在 WordPress 中优化谷歌字体？

许多人经常使用 Google 字体，因为它们免费且易于使用。 但是，当在一个网站上使用太多字体时，可能会导致加载时间极慢。 这是因为每种字体必须先从服务器单独加载，然后才能显示在页面上。

但是通过优化谷歌字体，浏览器发出的请求数量减少了，从而加快了加载速度。 更快的加载时间可以大大提高您网站的性能，因为它可以提高用户参与度并降低跳出率。

除此之外，最明显的好处之一是改善了网站的外观。 通过更好的排版，您的网站将更具视觉吸引力并吸引访问者。 此外，Google Fonts 还提供一系列国际字体，可以提高您网站的可用性。 通过合并不同语言的字体，您可以使不同背景的人更容易访问您的网站。

最后，优化谷歌字体有助于改善您网站的搜索引擎优化。 通过使用针对搜索引擎优化的字体，您可以提高网站在搜索结果中的排名。

现在您可能想知道我们如何将 Google 字体添加到 WordPress。 让我们在下一节中找出答案。

如何将谷歌字体添加到 WordPress？

有多种方法可以将 Google 字体添加到 WordPress。 但是，我们将使用一种快速简便的方法，当然是插件方法。

对于此演示，我们将使用 Google Fonts Typography 插件，因为它是最好的免费工具之一，可让您在网站上包含 Google Fonts，而无需编写一行代码。

谷歌字体插件

在转到本教程之前，请记住大多数 WordPress 主题都带有集成的 Google 字体支持。 如果您使用包含 Google 字体集成的主题，您可以从主题面板或 WordPress 定制器更改您网站的排版。 因此，在您开始在您的网站上包含 Google 字体之前，我们建议您首先检查您的主题是否已包含 Google 字体。

现在让我们开始安装激活 Google Fonts Typography 插件。

第 1 步：安装并激活 Google Fonts Typography 插件

要安装该插件，请导航到 WordPress 仪表板中的插件 > 添加新插件。 在此处输入插件的关键字并在 WordPress 插件存储库中搜索它。

当您在搜索结果中找到该插件时，单击立即安装。 安装只需几分钟。 安装后，单击激活按钮以激活您网站上的插件。

安装和激活谷歌字体排版插件

您也可以手动安装插件。 有关更多信息，请参阅我们关于如何手动安装 WordPress 插件的指南。

然后，导航到插件并检查插件的设置。 单击它时，您将被重定向到 WordPress 定制器。 从那里，您可以控制网站的排版。

谷歌字体排版设置

您可以配置4 个主要设置。

插件设置

第 2 步：配置插件设置

在基本设置中，您可以从基本排版部分为正文、标题和输入字段选择默认字体系列。 您可以从每个字体系列部分下的下拉菜单中选择数百种 Google 字体中的任何一种。 如果您知道自己想要什么字体，只需将其输入搜索框即可。

基本排版设置

另一方面，从高级设置中，您可以为品牌、导航、内容、侧边栏和页脚选择字体系列。 如果您打算在网站的不同部分使用不同的字体，这是一个有用的功能。

另一个设置选项是Font Loading 。 您可以简单地取消选中不需要的任何字体粗细。 然后点击发布。 最后，您可以找到一个设置选项Debugging 。 在此设置中，您可以重置所有字体并从头开始，也可以清除字体缓存。

就是这样。 使用这些步骤，您可以轻松地将 Google 字体添加到您的 WordPress 网站，

在 WordPress 中优化谷歌字体的技巧

现在您已经将 Google 字体添加到您的 WordPress 网站。 以下是可用于优化 WordPress 中的 Google 字体的提示。

1.使用正确的字体栈

在为您的 Web 项目使用正确的字体堆栈时，需要牢记一些事项。 字体堆栈是在网站上显示文本的字体集合。 通常选择字体堆栈中的字体，以便它们可以显示各种不同语言的文本。

首先，您需要确保您使用的字体是大多数设备上广泛使用的字体。 其次，您需要使用包含几种不同字体的字体堆栈，以防您使用的其中一种字体在特定设备上不可用。

最后，您需要确保您选择的字体以您想要支持的语言显示文本。 此外，请确保您选择的字体与您的用户将使用的浏览器兼容，并且可以在各种设备上阅读。

2.指定字符集

创建新文档时，您可以指定要使用的字符集。 指定正在使用的字符集很重要，这样文本才能正确显示。 特别是如果您使用的语言使用非拉丁字符，例如阿拉伯语、中文、日语或俄语。

如果不确定要使用哪个字符集，可以查阅不同语言支持的字符集列表。 选择字符集后，请务必使用该字符集保存文档。

在处理文本时可以指定许多不同的字符集。 最常见的字符集是 ASCII 字符集，它包括所有标准的英文字母和数字。 其他字符集可用于其他语言。

3. 不要依赖自动回退

在开发网络时，重要的是不要依赖自动回退。 这是因为自动回退通常会导致意想不到的结果，甚至会导致您的网站崩溃。 相反，最好在尽可能多的浏览器和设备中测试您的站点，并确保它按预期工作。 如果可能，请尝试提供手动回退或可在自动回退失败时使用的替代解决方案。

4.使用正确的权重和样式

在字体中使用层次结构很重要，这样读者可以轻松扫描页面并知道在哪里可以找到最重要的信息。 您用于标题的粗细和样式应该与您用于正文的不同。 对于正文，最好使用轻到中等字体，使用简单的无衬线字体。 对于标题，您可以使用更粗的字体，并且您可能需要考虑使用衬线字体。

如有疑问，越简单越好。 坚持一些基本的粗细和字体样式，不要害怕尝试。 首先，您需要决定要向访问者传达什么样的信息。 如果你想让你的文字严肃而专业，那么你会想要使用更粗的字体。 如果你想让你的文字有趣好玩，那么你可以使用更轻的字体。

5. 优化您的 CSS 交付

要优化您的 CSS 交付，您应该缩小和压缩您的 CSS 文件。 缩小 CSS 意味着通过删除不必要的空格、注释和其他代码来减小 CSS 文件的文件大小。 压缩 CSS 意味着通过减小单个文件的大小来减小 CSS 文件的文件大小。

一种方法是使用 CDN 来托管您的 CSS 文件。 或者，您可以将 CSS 代码直接内嵌到 HTML 文件中。 如果您需要交付少量 CSS，这可能是一个不错的选择。 无论您采用何种方法，请务必彻底测试您的网站，以确保不存在交付问题。

6. 谨慎使用斜体

斜体主要用于强调单词或短语或表示标题。 过度使用斜体会让你的写作看起来像是在努力使自己变得生动或有趣。 而过度使用斜体也可能使您的写作看起来杂乱无章。 但是，如果使用得当，它们可以增加重点并有助于分解长文本块。

7.考虑使用网络字体加载器

如果您希望提高网络字体的性能，请考虑使用网络字体加载器。 这有助于避免在未正确加载 Web 字体时可能发生的不可见文本闪烁 (FOIT) 。 网络字体加载器可确保在正确显示网络字体的同时缩短网络字体的加载时间。

这个简单的工具可以显着改变您网站的外观，而且易于使用。 只需选择您要使用的网络字体，然后将代码添加到您的站点。 网络字体加载器将处理剩下的事情，确保您的网站看起来最好。

8.使用font-display:swap；

Font-display 是一个 CSS 属性，它告诉浏览器如何呈现尚未加载的字体。 swap 值告诉浏览器首先呈现后备字体，然后在准备就绪时将其换成 Google 字体。 这可确保用户在加载字体时看不到空白区域，还可以通过减少加载页面所需的 HTTP 请求数来帮助提高性能。 Chrome 和 Safari 分别从版本 60 和 63 开始支持此属性。

9. 将多种字体组合成一个请求。

当谈到在网页设计中使用多种字体时，有几种不同的方法可以解决。 一种方法是在 CSS 中简单地包含多个字体文件，每个文件指向不同的字体系列。 但是，这通常会导致大量额外的 HTTP 请求，这会增加并减慢您的页面加载时间。

另一种方法是使用称为字体嵌入的技术将您要使用的所有字体组合到一个文件中。 这有助于减少 HTTP 请求的数量，也有助于加快页面加载时间。 嵌入字体有几种不同的方法，但一种流行的方法是使用 @font-face CSS 规则。

10. 为提供的字体使用 CDN。

许多 Web 开发人员选择使用内容分发网络 (CDN) 来提供他们的字体。 CDN 可以通过在其服务器上缓存您的字体来帮助提高性能，这意味着您网站的访问者将拥有更快的加载时间。 这可能是提高站点性能以及减少带宽使用量的好方法。

但是，在为您的字体使用 CDN 时需要牢记一些事项。 首先，您需要确保您选择的 CDN 支持您正在使用的字体类型。 其次，您需要确保您选择的 CDN 使用 SSL来提供字体，因为许多 CDN 仅通过 HTTPS 提供字体。

第三，您需要确保您网站的设计不会因使用不同的字体而受到不利影响。 有许多不同的 CDN 提供字体服务，因此请务必进行研究以找到最适合您需求的 CDN。 找到满意的 CDN 后，只需将字体上传到他们的服务器即可。

通过遵循这些简单的提示，您可以确保您的网站快速高效地加载，并且 Google 字体在所有设备上看起来都很棒！ 所以继续吧——开始优化吧！

结论

Google Fonts 是一种不可思议的资源，让您无需花大价钱就可以轻松地为您的网站添加一些个性和风格。 通过优化 WordPress 网站中使用的字体，您可以确保访问者拥有良好的用户体验，同时还可以提高网站的性能。

无论您的目标是让您的网站看起来更时尚、更专业，还是只是添加一些风格，熟悉字体自定义的强大功能都可以让您的网站从平庸到非凡。 通过适当的设置，在字体、大小和字距调整上进行一些更改，可以在对访问者产生影响时真正发挥重要作用。

此外，除了在 WordPress 中优化 Google 字体的技巧外，我们还讨论了如何使用Google 字体排版插件将 Google 添加到 WordPress。

我们希望本文能帮助您了解如何在 WordPress 中优化 Google 字体。 如果是，那么您可以通过在您的社交媒体上分享这篇文章来支持我们。

同时，我们希望您查看这些其他相关的博客文章以改进您的 WordPress 网站。

  • 如何从网站上识别字体

  • 最佳 WordPress 速度优化插件

  • 提高 WordPress 性能的 11 种方法