小時
分鐘
Cloudways 主機獨家優惠:贈金20$+3個月7折,點此前往註冊,才可獲取贈金
專注於企業網站架設,分享WordPress教學和Elementor教學

如何在WordPress中刪除谷歌字體、本地託管谷歌字體(3種簡單方法)

更新日期:2023-04-24
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折,戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛價值多為$49+
主機送Astra Pro不限站點1年
用Gmail郵箱,註冊易通過
遇到問題,聯繫我
來開通SEO工具20+

許多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.67

Your page rank:

Bonnie
Bonnie

Bonnie是LOYSEO的創始人,熱愛能將想法變為現實的WordPress,更是Elementor的忠實用戶~

發表回复

您的電子郵箱地址不會被公開。 必填項已用*標註

架設網站學習交流群