大港企业网站制作：在WordPress中加速Google字体

2019.06.17 大港企业网站制作

今天，大港企业网站制作将介绍几种优化和加速WordPress中Google字体的方法。当然，图片是并且将永远是网页中最重的部分，但根据HTTPArchive的数据，截至2016年10月，网页字体仅占平均页面总重量的3%多一点。

尽管网页字体的重量只占整个网页的一小部分，但您所做的每一次优化都有助于加快加载时间。看看下面的一些方法，以加快这些字体！

谷歌字体是什么？

首先，对于那些可能不知道的人来说，谷歌字体是一个开放源码(免费)目录的800多个网页字体系列，您可以使用在您的网站。它们也可在本地下载，以供印刷和其他用途。数百万的WordPress网站使用谷歌字体，因为它是一个伟大的免费方式，以提高您的网站的外观和可用性。

如果你追求的是纯粹的性能，系统字体将永远获胜，但没有什么能比得上专业精神和良好的网页字体的美学。事实上，印刷术已经被证明影响转换以积极的方式。但一切都有代价。因此，了解将Google字体添加到WordPress站点是如何影响速度和性能的，这一点很重要。

如何在WordPress中使用Google字体

有几种方法可以将Google字体添加到WordPress站点。第一种也是默认的方法是直接从Google抓取它们。该方法使用它们的全局CDN从来自全球各地的不同服务器快速传递字体。

当您将它们添加到您的站点时，将有一个外部请求fonts.googleapis.com.

googleapis

也是外部请求fonts.gstatic.com对于WOFF或WOFF 2版本，取决于浏览器的支持。

gstatic

WordPress插件

如果你是WordPress的初学者，向你的网站添加Google字体的最简单的方法可能是一个免费的插件。这个简单的Google字体插件是一个很受欢迎的例子。到目前为止，它已经有超过300，000活跃安装与4.9的五星级评级.

大港企业网站制作

从Google字体中添加嵌入代码

值得注意的是，大多数WordPress插件都会增加一些开销，所以我更喜欢使用更简单的嵌入代码来添加Google字体。所以，转到谷歌字体，选择你想要的字体，在这个例子中，我使用的是Roboto。

点击“自定义“选项。这是一个重要的步骤，因为每个字体系列都有不同的字体权重。通常，您需要常规的、中等的和粗体的。

注：您所包含的每个字体都会增加字体的加载时间，所以不要只选择所有字体。越少越好。

4 roboto google fonts

然后单击“嵌入“选项。这就是您想要复制它提供的嵌入代码的地方。

google fonts embed

大港企业网站制作把这段代码放进<head>部分您的WordPress网站。有不同的方法可以做到这一点，有些人可能更喜欢排列字体，但是在这个示例中，我只是简单地将代码添加到header.php档案。注：根据所使用的主题，这可能略有不同。

header font embed

然后，要真正使WordPress主题使用Google字体，您必须添加一些CSS样式。下面是我使用的例子。如果您的主题管理面板没有自定义CSS编辑器，则可以始终使用以下免费插件定制CSS和JS.

body {font-family:roboto; font-size:18px;}h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}h1 {font-size:28px;}h2 {font-size:26px;}h3 {font-size:24px;}h4 {font-size:20px;}h5 {font-size:18px;}h6 {font-size:16px;}

现在您已经知道了将Google字体添加到WordPress站点的一些快速方法，现在我将进行一些快速测试，以了解加速它们的其他方法。我首先使用上面的设置运行了一些测试，平均速度在418毫秒的时候出来了。注：每次测试运行5次，并进行平均结果。

google fonts cdn speed test

本地托管Google字体

在WordPress站点上提供Google字体的另一种方法是在Web服务器上本地托管它们。如果您的受众位于特定的地理位置，并且靠近您的服务器，那么在本地托管它们的速度实际上要比使用Google字体的速度要快。Google字体CDN很棒，但是添加这些额外的外部请求和DNS查找会导致延迟。

只有在使用快速托管时，此方法才能正常工作。在这个例子中，我使用来自Kinsta的托管WordPress主机，具有讽刺意味的是，Kinsta是由GoogleCloud平台驱动的。

大港企业网站制作为了在本地托管，我实际上使用了一个名为Google-webfonts-助手..这使您可以更容易地在本地下载Google字体，并为您提供所有的CSS。下面是我们最后的一个例子。您将需要上传您下载的字体到您的Web服务器。在本例中，我将它们放在一个名为“字体”的文件夹中。

/* roboto-regular - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-500 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-700 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

然后，我们需要确保从头中的Google字体中删除嵌入代码，这样您就不再有那些外部调用了。然后，我再次使用上面的设置运行一些测试，平均速度到了386毫秒。

大港企业网站制作

注：Web服务器位于爱荷华州，从德克萨斯州达拉斯运行来自Pingdom的速度测试。因此，正如您所看到的，即使服务器位于美国的其他地方，在服务器上本地加载Google字体仍然要稍微快一些。当然，你会想要自己测试不同的位置，根据你自己的观众。

在您自己的CDN上托管Google字体

接下来是第三种情况。在上面的站点上，我已经使用了第三方CDN提供商(KeyCDN)托管所有其他资产(图像、CSS、Javascript等)。如果我们现在把字体放在同一个CDN上，而不是Google的CDN上，会发生什么呢？

我用的是免费的CDN促成器WordPress插件。这实际上是将字体从Web服务器上的“字体”文件夹自动复制到KeyCDN。然后，我们必须稍微修改代码，以便字体的路径现在指向CDN(例如cdn.domain.com)。

/* roboto-regular - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-500 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-700 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

然后，我再次使用上面的设置运行一些测试，平均速度达到了384毫秒。