移除 WordPress 載入的 Google Fonts，讓網站變快：不會弄壞版面的寫法

很多佈景主題、頁面編輯器、輪播外掛，會從 Google 的伺服器載入字型。打開網頁原始碼，常會看到這樣的一行：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

這一行會讓網頁變慢：

• 要多連兩個網站：瀏覽器要另外連到 fonts.googleapis.com 下載樣式表，再連到 fonts.gstatic.com 下載字型檔。每多連一個網站，就多一次連線的等待。
• 畫面要等它：樣式表放在 <head> 裡，下載完之前，瀏覽器不會把網頁畫出來。手機網路慢的時候，訪客會先看到一片空白。
• 中文字型特別重：我們在〈網頁中文字型怎麼設定？〉實測過，一個只有 44 個不同中文字的頁面，Google Fonts 的中文字型就下載了 8 個檔、約 480 KB。
• 很多網站根本用不到：英文佈景主題載入的 Roboto、Open Sans 只有英文字母。中文字還是用訪客電腦內建的字型顯示，下載了也只用在英文和數字上。

拿掉用不到的 Google Fonts，是 WordPress 網站加速最簡單的一步：不用換主機、不用裝快取外掛，加一段程式碼就好。

這篇處理的是佈景主題、外掛自己加上、你根本用不到的 Google Fonts。如果是你刻意選用的字型（例如思源黑體），那是美觀和速度之間的取捨，可以保留。

書籤上那篇舊文章教的是拿掉 WordPress 後台的 Open Sans。WordPress 4.6 起後台已經改用電腦內建的系統字型，現在的後台不用再處理（我們測試的 WordPress 7.1.3 後台，沒有載入任何 Google Fonts）。

先檢查網站有沒有載入 Google Fonts

• 打開網站，按 Ctrl + U（Mac 是 Option + Command + U）看原始碼，搜尋 fonts.googleapis.com。
• 或是按 F12 打開開發人員工具，切到「網路」，重新整理後在篩選欄輸入 fonts.g。

找到了，再看看是誰載入的：<link> 的 id 通常是「代稱-css」，例如 id="mytheme-fonts-css"，前面的代稱通常就看得出是哪個佈景主題或外掛。

頁面編輯器、佈景主題，多半有自己的設定可以關掉 Google Fonts。 先到它們的設定裡找，找不到再用下面的程式碼。

程式碼：拿掉 Google Fonts，也清掉預先連線

// 1. 拿掉用 wp_enqueue_style 載入的 Google Fonts
//    只把檔案網址清空、保留名稱，依賴它的樣式表（例如佈景主題的 style.css）才不會跟著消失
add_action( 'wp_enqueue_scripts', function () {
	foreach ( wp_styles()->registered as $style ) {
		if ( is_string( $style->src ) && preg_match( '#//fonts\.googleapis\.com/#', $style->src ) ) {
			$style->src = false;
		}
	}
}, 999 );

// 2. 拿掉預先連線到 Google 字型主機的提示（preconnect、dns-prefetch）
add_filter( 'wp_resource_hints', function ( $urls, $relation ) {
	if ( ! in_array( $relation, array( 'preconnect', 'dns-prefetch' ), true ) ) {
		return $urls;
	}
	return array_values( array_filter( $urls, function ( $url ) {
		$href = is_array( $url ) ? ( isset( $url['href'] ) ? $url['href'] : '' ) : $url;
		return ! preg_match( '#//fonts\.(googleapis|gstatic)\.com#', $href );
	} ) );
}, 99, 2 );

第一段：把 Google Fonts 樣式表的網址清空

• 掃過所有登記過的樣式表，網址裡有 fonts.googleapis.com 的，把網址設成 false。
• 網址是 false 的樣式表，WordPress 不會輸出 <link>，但它還留在清單裡。
• 優先順序 999：等佈景主題、外掛都登記完樣式表，最後才處理。

為什麼不用網路上常見的 wp_dequeue_style()＋wp_deregister_style()？

很多佈景主題的主要樣式表，會把 Google Fonts 設成「相依」（要先載入字型，再載入主要樣式表）。把 Google Fonts 取消登記之後，WordPress 找不到它依賴的東西，主要樣式表也不會輸出，整個網站的版面就跑掉了。

把網址清空，相依關係還在，主要樣式表照常載入。下面的實測結果可以看到差別。

第二段：清掉多餘的預先連線

有些佈景主題會加上 <link rel="preconnect" href="https://fonts.gstatic.com">，讓瀏覽器提早連到 Google 的字型伺服器。字型拿掉之後，這個提示只會多一條沒用到的連線，所以一起清掉。

這段程式碼抓不到的情況

• 佈景主題把 <link> 直接寫死在 header.php 裡。
• 用 CSS 的 @import 載入 Google Fonts。
• 外掛在頁面裡另外用 JavaScript 載入字型。

遇到這些，要改子佈景主題的檔案，或請佈景主題、外掛作者提供關閉的選項。

拿掉之後，字型怎麼辦

中文網站：用電腦內建的中文字型

Windows 的微軟正黑體、Mac 和 iPhone 的蘋方，都很好看，不用下載。font-family 怎麼寫，可以看〈網頁中文字型怎麼設定？〉。

一定要用那個字型：改放在自己的主機

• 區塊佈景主題可以用 WordPress 的「字型庫」，從 Google Fonts 的清單安裝字型。WordPress 會把字型檔下載到網站的 wp-content/uploads/fonts/，之後由你自己的網站提供，訪客不會再連到 Google。
• 傳統佈景主題：把字型檔（.woff2）放進子佈景主題，用 CSS 的 @font-face 載入。

中文字型要特別小心檔案大小。 中文字型有好幾萬個字，一個字重的檔案就好幾 MB。Google Fonts 會把中文字型切成很多小檔案，網頁用到哪些字才下載哪幾份；自己放主機時，如果整個檔案一次下載，可能比原本更慢。中文字型只用在標題、Logo 這種少數字的地方，或先把用到的字挑出來做成小檔案。

實際測試的結果

測試站：WordPress 7.1.3，Twenty Twenty-Five（區塊佈景主題）、Twenty Twenty-One（傳統佈景主題）。這兩個預設佈景主題本身沒有用 Google Fonts，所以另外模擬一個常見的佈景主題寫法：

• 載入 Google Fonts 的 Noto Sans TC 樣式表
• 主要樣式表依賴這個 Google Fonts 樣式表
• 加上連到 fonts.googleapis.com、fonts.gstatic.com 的 preconnect

比較三種情況，看前台輸出的原始碼：

不處理

• Google Fonts 樣式表：有
• 主要樣式表：有
• 原始碼裡連到 Google 字型網域的網址：4 個（樣式表 1 個，preconnect、dns-prefetch 3 個）

網路上常見的 dequeue＋deregister

• Google Fonts 樣式表：不見了
• 主要樣式表：也不見了（版面會壞掉）
• 連到 Google 字型網域的網址：還剩 2 個（preconnect 沒清掉）

本文的寫法

• Google Fonts 樣式表：不見了
• 主要樣式表：還在
• 連到 Google 字型網域的網址：0 個

兩個佈景主題的結果完全一樣。測試站後台也檢查過，沒有任何 Google Fonts 的網址。

延伸閱讀

• 網頁中文字型怎麼設定？font-family 寫法、思源黑體載入，英文佈景主題中文變醜的原因
• WordPress 網站加速完整攻略：測速、主機、快取、圖片、外掛與資料庫清理
• 免費可商用圖庫、圖示、字型哪裡找？

網站快一點，客人就少等一點。正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站管家年費包含系統、外掛與安全性更新，以及每半年一次網站健檢報告，台北與全台客戶也歡迎來聊聊。