专注于外贸建站,分享WordPress教程和Elementor教程

如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)

更新日期:2024-02-20
本系列教程
加入读者学习群
我用的页面编辑器
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我

许多WordPress主题都会用Google字体,然而,Google字体并不存储在网站本地,它是一个第三方资源,这会影响网站的加载速度,让网站变慢,尤其当你的网站面向的是国内用户时,更需要禁用Google字体。

起初,我用Code snippets代码段来移除主题的谷歌字体,然而发现依旧有漏网之鱼,我又不愿意去细究代码,所以,就找到了两个简单的方法来删除网站中的谷歌字体,以利于提升网站速度

如果你想保留谷歌字体,但又想提升网站速度,可以考虑将谷歌字体本地化(即将字体存储到你自己的主机),下文中的OMGF插件就能实现谷歌字体本地托管。

如果你使用的主题是Astra,主题也提供了谷歌字体本地化功能,详见下文。

最新方案:我目前给客户和自己都使用付费插件perfmatters来进行谷歌字体的移除与本地化。

如何检查自己的网站是否使用谷歌字体

请使用工具https://gtmetrix.com/,输入你的网站,点击analyze按钮,在检测结果中(如下图所示),进入waterfall标签也,点击fonts,就能看到字体中是否有谷歌字体,字体所在的域名是fonts.gstatic.com。

如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)

当我用下面的方法把谷歌字体移除后,加载时间减少了0.6s,requests请求数也降低了

remove google font wordpress

接下来,我们看看禁用谷歌字体的具体方法

用OMGF插件移除谷歌字体

remove google font wordpress
备注:由于插件经常更新,可能你看到的界面跟我教程里的已经不一样了,届时,请自行查看界面里的文案介绍和官方文档来进行配置。我目前给客户和自己都使用付费插件perfmatters来进行谷歌字体的移除与本地化。

OMGF插件活跃安装20000+,五星好评,最近一次更新是4周前,看起来是个有人维护的优质插件,并且这个插件本身是为了将谷歌字体本地化的,如果你不想禁用谷歌字体,也可以将字体本地化。

  1. 安装并启用omgf插件,安装插件的教程在此
  2. 进入wordpress后台的setting – Optimize Google Fonts页面中,如下图所示,在optimize fonts中勾选automatic模式,保存它。
如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)
  1. 然后进入detection settings标签页,如下图所示设置,将google fonts processing设置为remove only,然后保存,这样就设置完毕了。
如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)

设置完成后,记得用上文提到的GTmetrix检测一下是否移除成功,也要检查一下你的网站样式是否有样式异常(换个新浏览器用无痕模式查看网站)。

OMGF插件的禁用谷歌字体功能,可能在一些主题上不能发挥作用,此时,你可以用到下文中的autoptimize来替代。

用Autoptimize插件删除谷歌字体

remove google font wordpress

Autoptimize插件是一个免费的网站代码优化插件,可以优化html、js、css文件,提升网站速度,同时,它也提供了google 字体的优化方案,包括禁用谷歌字体。它的活跃安装数量已经达到一百万+,评价也有4.5星,更新也及时,同样是一个优质插件。

  1. 安装并启用Autoptimize插件
  2. 进入WordPress后台的setting – autoptimize页面中,在额外标签页中,选中删除谷歌字体,但需要注意的是,你至少需要启用html、js、css、图像优化任一一项,不然这个移除谷歌字体功能不能发挥作用。如果你使用WP Rocket或其他网站优化插件,那么用OMGF插件更合适;如果你正好缺少优化插件,那么用Autoptimize插件更合适,顺便还能用上优化网站功能了。
remove google font wordpress

使用Astra主题自带的谷歌字体本地化功能

当您在网站上使用任何 Google 字体时,每次加载页面或帖子时都需要向 Google 发送请求以获取该字体。这可能会损害您在 Core Web Vitals 分数中的 CLS 分数。为了帮助改善这一点,Astra主题内置了自托管的 Google 字体功能。此功能是 Astra主题 3.6.0版本 新增的功能。

如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)

激活这个功能将只发送一个Google字体API请求,它将从Google收集所有的字体数据和资产文件,并将它们存储在您的服务器上。然后,对于任何进一步的请求,谷歌字体将使用本地存储的文件来加载。

如需了解更多,请查看Astra主题官方文档

注意:目前这个功能存在一个Bug,如果你切换域名前没有清除字体缓存以及关闭谷歌字体本地化功能,那么切换域名后,无法清除这些字体了。

使用Perfmatters插件来移除或本地化谷歌字体

在深究网站速度优化的过程中,我又用了Perfmatters这款付费插件(20多刀一年,也不贵,买一个站点的可以用于多个站点,因为授权仅用于更新插件,而更新插件也可以用插件安装包更新大法),我用它的主要目的是移除页面里没用到的CSS、JS,但他同时也提供了谷歌字体禁用与本地化的功能,用法也很简单,如下图所示,点击开关按钮即可。

如何在WordPress中删除谷歌字体、本地托管谷歌字体(3种简单方法)

结语:在进行外贸建站时,也请尽量少用google字体,从系统默认字体里挑选一些即可,字体过多不仅让人眼花缭乱,也会增加网站加载时间、降低网站加载速度。

点赞

0 / 5 4.71

Your page rank:

Picture of 外贸建站技术姐Bonnie
外贸建站技术姐Bonnie

Bonnie是LOYSEO的创始人,在建站领域有着超过14年的经验,热爱能将想法变为现实的WordPress,更是Elementor的忠实用户~

LOYSEO
让我的客户网站GTmetrix测分A\A的主机Cloudways
独家优惠前3个月7折, 戳上方按钮注册即可自动带入优惠码LOYSEO
所赠主题插件价值>$49
主机送Astra Pro不限站点1年
gmail.comsina.com邮箱,注册易通过
遇到问题,联系我