您网站上出色的排版可以对转化产生积极影响。选择正确的字体并对其进行优化至关重要。谷歌字体是一项非常受欢迎的服务，因为它们设计精良，可以为默认网站增添额外的优雅气息。不幸的是，与网络上的其他任何东西一样，如果使用不当，它们可能会损害您网站的性能。在本文中，我们将介绍在 WordPress 中使用 Google 字体时优化性能的 5 个技巧。
谷歌字体和WordPress网站性能
Google Fonts 是 Google 提供的 1300 多种免费字体系列的目录，任何人都可以在其网站或打印项目中使用。尽管它们在数百万个 WordPress 网站上使用，但它们是增强网站设计的好方法。您一定会在其中找到独特的设计。谷歌字体通常通过从谷歌的 CDN 中提取来添加到 WordPress 网站。这意味着它们托管在离用户最近的服务器上，包括字体和样式表。
从网络上获取的 Google 字体不如系统字体（安装在您计算机上的字体）快。您网站之外的网络流量成为加载速度的一部分。与较大的文件相比，Google 字体加载时间对网站性能的影响较小。毕竟，字体比图像小得多。但是，您的站点发出的每个请求都是在用户不可用时花费的时间。因此，优化你的谷歌字体是值得做的，以提高你网站的加载速度。
幸运的是，在将 Google 字体与 WordPress 结合使用时，有多种方法可以优化您的性能。
1.使用更少的字体
是最好使用尽可能少的字体。理想情况下，您将使用两种配对字体以获得最佳效果。
当我们谈论字体时，我们实际上是在谈论字体系列。当我们谈论字体类型时，我们通常会想到主要字体，但字体包括许多变体，例如多重粗细、斜体、数字和符号。这些被称为字形。
很多字体包括thin， Light、Medium、Semi-Bold、Bold、Extra Bold 等。每一种都是字体系列中的不同字体。此外，每个字重都包含一个斜体，使字体数量加倍。当您使用该字体系列时，您还加载了它的所有变体。当你认真对待它时，这是很多。
例如，Roboto 是当今网站上流行的字体。该家族有 12 套字体，每套有 282 个字形。这是一个字体系列的 3,384 个字形乘以您要使用的字体扩展名的数量。添加 Roboto Condensed 和 Roboto Slab，很容易看出网站上使用的字体数量如何变成天文数字。当您使用多个字体系列时，您可能会使用数以万计的字体。
2.在您的 WordPress 服务器上托管 Google 字体
p>Google 字体可以下载并托管在您的 WordPress 服务器上。这样，网站的排版将从与网站相同的位置交付给用户。该网站不必从其他地方请求字体文件，并且页面将为用户加载得更快。
当您在 Google 字体网站上选择一种字体时，您会看到一个下载选项。下载字体系列，然后通过 FTP 传输到您的内容/上传文件夹。要使用它们，请不要在您的页面中引用第三方字体主机。相反，请在样式表中引用您的 URL/fonts/FONT_FILE_NAME.file-extension。
考虑到所有这些，只加载您需要的字体和粗细。不要使用所有可能的粗细和斜体选项。为每种字体使用 TTF、EOT、WOFF 和 WOFF2 格式。
3.预加载谷歌字体
谷歌字体通常来自谷歌的CDN。诚然，这是一个快速的服务器，但字体通常在网站的加载过程中延迟。
如果出现连接问题，字体未下载，页面将使用通用系统字体呈现。然后，一旦下载了字体，页面将重新呈现。简而言之，页面以一种字体加载，然后更改为另一种字体。这称为无样式文本闪烁 (FOUT)。这比等待更可取。但它仍然不是很好。
解决这个问题的一种方法是预加载字体。预加载 Google 字体还减少了大约 100 毫秒的加载时间。原因是 DNS、TCP 和 TLS 是与 Google Fonts CSS 文件并行加载的。
预加载要求您在样式表中预先连接和使用预加载链接。您将使用 HTML 将字体的系列和样式表加载到您的网站。
这是一个使用预连接 HTML 的 CDN 星球示例：
< link rel="preload" as="style" href="https://fonts.googleapis.com/%20css2?family=Open+Sans|Roboto:[email protected]&display=swap">在上面的示例中，替换将 Roboto 和所有字体选项替换为您要使用的字体和选项。
4.使用WordPress插件优化谷歌字体
p>与 WordPress 的大多数事情一样，插件可以更轻松地针对 Google 字体进行优化。他们为您处理软件方面的事情，因此您不必担心将代码放在哪里。
有很多不错的插件可以优化您的 Google 字体。我发现特别有趣的一个是 OMGF |在本地托管 Google 字体。它专为优化您已在使用的 Google 字体而设计。与许多其他 Google 字体插件一样，这个插件有免费版和付费版。免费版本仅包括手动设置，这可能很棘手。但它们的设置并不复杂。
这方面的主要优势是免费版本包括一些任何人都可以利用的优化，而不是简单地促进字体本身的使用。像这样的大多数插件仅通过高级版本提供优化。但是，为了获得最佳效果，我推荐高级版。免费版本确实有足够的优化来帮助您入门。
本插件缓存字体，您可以在本地托管 Google 字体。排队的字体会自动从标题中删除并替换为本地字体。您可以预加载首屏字体并阻止它们加载某些字体和样式表。
可以查看设置替换或删除 .这在重新设计后特别有用，因此您不会加载从未交付给用户的遗留资源。
如果你保持一个非常干净的房子，高级设置允许您选择字体缓存的目录。
5.使用谷歌字体集成 Divi 模块
p>600 种 Google 字体已集成到所有使用文本的 Divi 模块中，在 Divi 主题和 Divi 插件中可用，并针对最佳性能和设计进行了优化。选择字体系列、粗细和样式，并分别为正文和所有标题大小自定义它们的大小、颜色、行高、行距和阴影。您甚至可以针对单个设备调整它们。
谷歌字体被缓存，只有使用过的字体才会加载到模块中。这可以防止浏览器加载不需要的字体变体。
有几种谷歌字体设置，在“常规”>“性能”选项卡中。两者都默认启用。这意味着如果您是 Divi 用户并且不知道这是主题处理的内容，那么您已经得到了照顾。
改进了谷歌字体加载缓存谷歌字体并内联加载它们以缩短页面加载时间并减少渲染阻塞请求。在其下方是一个名为“限制对旧浏览器的 Google 字体支持”的选项。此功能减小了 Google 字体的大小以缩短加载时间。缺点是一些旧浏览器对谷歌字体的支持有限。
结束语
很有可能您的网站已经以某种方式使用了 Google 字体。但是，如果您在将 Google 字体与 WordPress 结合使用时遵循这 5 个优化性能的提示，我想您会注意到不同之处。未经优化的 Google 字体可能很小，但会影响您网站的加载时间和整体用户体验。有一些手动选项可用于优化您的 Google 字体，但我建议大多数用户安装字体优化插件，例如 OMGF。当然，Divi 始终是任何类型的字体优化和管理的绝佳选择。
我们很乐意听取您的意见。您是否使用这些技巧中的任何一个来优化 WordPress 的 Google 字体？让我们在评论中知道。
特色图片来自 Sammby / shutterstock.com
来源
