如何在WordPress中加速Google字体

今天,我将介绍几种在WordPress中优化和加速Google字体的方法。图片当然一直是网页中最重的部分,但据HTTP Archive称,截至2016年10月,网页字体仅占页面总重量的3%以上。

elements-envato 如何在WordPress中加速Google字体

即使网络字体的重量仅占整个网页的一小部分,您所做的每次优化也有助于缩短加载时间。请查看以下一些方法来加快这些字体的速度!

google-fonts-th 如何在WordPress中加速Google字体

什么是Google字体?

首先,对于您可能不了解的人来说,Google字体是一个开放源代码(免费)目录,包含800多个Web字体系列,您可以在您的网站上使用它们。也可以从本地下载它们以供打印和其他用途。数以百万计的WordPress网站都使用Google字体,因为这是一种增强网站外观和可用性的免费方法。

如果您追求纯粹的性能,系统字体将永远赢,但是没有什么比优质的网络字体更专业和更美观了。实际上,字体印刷已显示出对转换的积极影响。但是,一切都有代价。因此,重要的是要了解将Google字体添加到WordPress网站如何影响速度和性能。

为什么要优化Google字体?

优化谷歌字体无非就是要让网页加载速度,特别是在china,谷歌字体是被k的服务,对国内朋友来说,外国主题的谷歌字体简直就是站长的噩梦,去不掉,网上搜索的方法没有效果。网站加载奇慢无比。

本地托管Google字体

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

为了在本地托管,我实际上使用了一个名为google-webfonts-helper的免费工具。 这使您可以更轻松地在本地下载Google字体,并提供所有CSS。 下面是一个最终的示例。 您将需要将下载的字体上载到Web服务器。 在这种情况下,我将它们放在一个名为“fonts”的文件夹中。代码如下:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://xxx.com/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://xxx.com/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://xxx.com/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://xxx.com/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://xxx.com/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

把上面的代码放在您的主题的style.css的开头或是末尾即可,然后在您想要引用字体的地方。比如body正文的字体时,搜索您style.css里的body标签。改成如下的代码:

body {
    color: #323232;
    font-size: 16px;
    font-family: 'Roboto'; //这里就是您的字体名字,具体的见上面的代码
    line-height: 32px;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这样就能实现了,当然这个地址可以是本地。也可以是你的腾讯,阿里等cdn服务的地址,唯一的区别就是把你下载到的字体放在正确的位置。

通过插件本地化Google字体

如果你没有代码基础或是不想修改主题,那么有一个更好的方法。那就是用插件自动缓存主题必备的谷歌字体到本地。这个插件的名字叫:Host Google Fonts Locally

彻底禁用谷歌字体

当然,如果您的站点是中文站点,因为Google字体大多数不支持中文,您完全可以禁用谷歌字体。方法就是用我们自制的Ie Optimize免费优化插件

通过上面的链接下载插件,并按传统方法上传激活插件,在后台 Setting – Ie Optimize – Ban Gfw,勾选相应设置即可。如图

gfw-optimizer-ieoptimize 如何在WordPress中加速Google字体

从上面的文章中可以看到,Google字体CDN很棒,但是它可能并不总是最快的。 当然,这将始终取决于您自己的环境以及您为流量提供服务的位置,无论是针对本地受众还是全球受众。我建议您自己测试上述每种方法,然后看看哪种方法最快,并且对您的WordPress网站效果最佳。 请记住,仅加载您实际需要的字体!

本文已在Ie主题99839发布

文章来源:https://ietheme.com/speed-google-fonts-wordpress.html


发表评论

撰写评论

电子邮件地址不会被公开。 必填项已用*标注

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。