wordpress 中文字型瘦身攻略

Photo of author

Lowie 洛伊

前言

洛伊自力自建這個網站。
從找網路空間到摸索cpanel 後台。
使用Wordpress 來架設起屬於自己的網站空間，也花了不少心力跟時間。
WordPress最大的優勢就是他的自由度與外掛眾多，只要有心跟時間，每個人都可以建立一個美觀，屬於自己的網站
但由於洛伊有很基本的html跟css語法概念，所以我秉持土法煉鋼，能夠使用語法自己解決的事情就不用外掛解決，試圖讓網站的負擔少一點。但也因為自己不是真正的網路工程師，也不是所謂的碼農，因此遇到許多小問題總要花費不少心力來解決。在這過程中我發現有些問題需要多方參照，有時候甚至找不到中文的解決指引，需要使用英文關鍵字找到外國網站的解法。因此有了開設一個專區來整理自己遇到的問題，並且附上自己的解方的想法，於是就有了這個專區。希望能夠幫助到跟洛伊一樣算是半吊子但又希望獨立解決網站問題的站長們。

中文字型瘦身攻略 – 前情提要

眾所周知，中文的字型檔案相比英文來說相當的龐大(動輒8-12mb)，因為不像英文只有26個字母與特殊符號；中文字型的內建字集高達一萬多個文字，不管是使用內崁字型檔案或是使用 Google Fonts 提供的黑體與宋體字型等，都會導致網站的載入速度被嚴重拖慢。

WordPress雖然有像是 Fonts Plugin | Google Fonts 排版樣式 這樣的google字體外掛，可以方便快速的調用設定喜歡的免費google字體，且google已經將字集拆散成好幾個字元集合檔案，需要時才從外部連結載入，試圖加快讀取速度。但有使用此類外掛的站長們只要透過pageSpeed insight檢查網頁後仍會發現跑分不盡理想，其中一項就是來自https://fonts.gstatic.com 或https://fonts.googleapis.com這幾個網址的CSS請求太多，而這些就是在調用google fonts的時候的必要之惡，尤其是字集龐大的中文字型。即使許多人覺得google的中文字型可以讓網站變得更美觀，更有個性化，但站在閱讀者的立場，網站的讀取速度才是王道，也因此讓中文架站的站長們往往考慮到網頁載入速度而放棄使用其他中文字型。

Lowie很喜歡宋體字型的美，所以對我來說，如何保留住網站使用google fonts的宋體字型(Noto Serif TC)又同時稍微提高網站的讀取速度，取得一個最佳閱讀體驗的平衡點是我的目標。

中文字型瘦身攻略 – 本機託管

一開始，我參考了網路上諸多厲害的前輩的教學，如 小犬網站的 「如何在 WordPress 本機託管 Google Fonts 字型？（手動操作）」或是WP JIAN的「2020年加速WordPress網站的28種方法（最終指南）」等，找到了我的第一步，將字體檔案交給本機託管。

因為Lowie第一次寫這種技術文章，所以也稱不上教學，更沒有記得把每一步驟都截圖，所以本機託管的原理跟我遇到的過程就暫且不贅述了，可以參照上面的文章看看前輩的教學與做法。原本我也只想要將字體本機託管就完成了，但後來發現Lowie所使用到的noto serif TC字型並非網站上可以下載到的 regular (標準)跟bold(粗體)，而是外掛所提供的多種字重(weight)的組合字型，又偏偏Lowie有使用到 400 ; 500 ; 600 跟700的字重，其中400 = regular = 標準; 而 700 = bold =粗體。所以如果依照網路教學把Google Fonts上面的宋體下載下來使用，我的網站字重只剩下 400 跟 700。少了一些很細微的變化。舉例來說：

400的字重效果 ; 500的字重效果 ; 600的字重效果 ; 700的字重效果

你們看得出差異嗎？
好啦，Lowie承認自己很龜毛。
我就是希望在同時使用到多種字重又可以完成託管。所以一開始不知道怎麼自己做出多個字重的字型檔案的情況下，又想節省時間找方法，於是只好求助於外掛。

中文字型瘦身攻略 – OMGF pro

在爬了一些文章後發現，OMGF 這個外掛可以完成本機託管字體的訴求。然後他的付費版 OMGF pro可以完成託管字體後的優化檢查。諸如檢查佈景主題、第三方編輯器如Elementor的內建Google fonts的語法並選擇刪除或合併語法。不然如果主要字體雖然託管給主機了，但是佈景主題跟編輯器依然會在後台執行雲端字體的下載，這樣不就失去託管字體讓網站加速的意義了嗎？

在OMGF Pro一年的年費為29歐元，大約台幣不到$1000的考量下，Lowie為了節省時間於是直接就衝動購買了付費版的OMGF pro?。在付費版可以選擇全部都自動化處理，並且將重複的Google Fonts直接remove的情況下，再跑一次PageSpeed Insight的跑分結果速度真的大大提升。看起來似乎一切都完美了。

然而，真的是這樣嗎？???

此時進入wordpress的網站控制台，發現有紅色的錯誤通知，顯示有Google字型(ROBOT)找不到，無法載入出現網站錯誤。

這就讓我頭大了，看來要花時間好好的除錯了。

中文字型瘦身攻略 – 放棄使用外掛惹

為了處理這個不知道是佈景主題還是哪個編輯器或外掛造成的原因，Lowie我花了一個晚上的時間在找出原因，不斷從網頁檢查元素中想要找出是哪裡有問題。最後發現惟有停掉OMGF外掛，或是把OMGF pro的檢查重複字體功能改為不刪除掉才可以解決。

讓我最終放棄掉使用OMGF pro的原因倒不是因為這個錯誤通知的問題，而是Lowie發現完成字體字集化，本機託管的Noto serif TC的字體檔，每一個都有2.5mb，加上我需要的400、500、600、700的四個字重，總共將近10mb的檔案需要在第一次進到網站的時候載入，所以跑分結果雖然CSS要求明顯下降了，但載入的資源量卻暴增了。結果用訪客模式瀏覽網站發現第一次進入網站的讀取反而變得比字型託管前還要更久，跟跑分測試的進步呈現明顯的反差。

所以Lowie最後放棄使用OMGF pro這個很好用的外掛，準備再嘗試下一個方法了。
不過這個階段我卻得到了一個很好的材料，那就是OMGF放在我Wordpress主機的資料夾內的字集化字體檔，而且他是依照我前面所述的字重來分別存成400~700共四個檔案，為我下一步的瘦身方法幫助非常大。Lowie會將字體檔案放在下一段，讓有需要跟我走一樣路的WP站長們可以自行取用喔。

中文字型瘦身攻略 – 製作屬於自己的字體字集化檔案

檢討上一階段的失策，Lowie在使用外掛的時候忽略了中文字型本身內部的字集有上萬字所以才會檔案肥大的問題核心，如果今天整個網站不用粗體斜體，只需要單一個Noto Serif TC的宋體字型的話，其實OMGF就可以完美搞定了，因為如果只需要一個字型檔大約2.5mb，對於網站的負擔還不算太大。

但像Lowie一樣，需要堅持使用到好幾個字重的站長們，可能就要採取製作屬於自己的字集化字型檔這個對策了。
說穿了，這個原理就是把中文字型中的破萬中文字縮減到只留下常用的4000多字即可，這樣才是如同文章標題般的中文字型「瘦身」，把幾乎用不到的中文字給剔除，還可以趁機塞入一些自己想要的文字如特殊符號或日文漢字等。

在這一步，Lowie基本是完全參考了Cyrians大大的文章「[WordPress]網頁中文字型瘦身」這一篇文章的教學步驟。
將上一段落透過OMGF外掛，Lowie已取得的四種字重的字體檔案分別瘦身。
終於達到本機託管字型、個人化字集、又兼顧多重字重的最適方案。

註：此方法會用到兩款日文的字集化製作軟體，在上面連結的教學文章中都有詳述。

你可能還會需要用到一個自己的字集清單，這邊Lowie提供自己的給有需要的朋友(包含常用繁體字約4500個、簡體字、日文漢字與特殊符號)，可以自行刪改。至於要怎麼放進去自己的字集，還請參照Cyrians大大的圖文教學。超厲害。

字集檔(excel格式，可以分別調用) | 字集檔(txt格式，可以直接在轉換軟體內貼上)

或是可以直接從下方下載洛伊已經製作完成的字體檔案，自己來的好處是，將來發現如果有缺字的話，可以再用軟體補上重新製作即可。

未瘦身前宋體字型(OTF格式，約2.5mb/個)
已瘦身後宋體字型(woff2格式，約1mb/個)

中文字型瘦身攻略 – 上傳、CSS套用、大功告成

上傳字體檔至自己的主機。在這個步驟依據每個站長的主機商不同，方法略有不同，相信看得到這篇文章的站長們這些都不是問題吧！

接下來就是透過CSS語法把字體檔套用在自己佈景主題>>自訂>>附加的CSS裡面套用字體檔案，可以根據每個站長的需求各別調整一下字重的套用規則
以下是Lowie使用的方式，歡迎取用修改

@font-face {
  font-family: 'NotoSerifTC';
  font-style: normal;
  font-weight: normal;
	font-display: swap;
  src: url('https://www.yoursite.com(自己的站點)/wp-content/uploads/fonts(自己設的資料夾)/noto-tc-400.woff2') format('woff2');
}

@font-face {
  font-family: 'NotoSerifTC';
  font-style: normal;
  font-weight: 500;
	font-display: swap;
  src: url('https://www.yoursite.com(自己的站點)/wp-content/uploads/fonts(自己設的資料夾)/noto-tc-500.woff2') format('woff2');
}

@font-face {
  font-family: 'NotoSerifTC';
  font-style: normal;
  font-weight: 600;
	font-display: swap;
  src: url('https://www.yoursite.com(自己的站點)/wp-content/uploads/fonts(自己設的資料夾)/noto-tc-600.woff2') format('woff2');
}

@font-face {
  font-family: 'NotoSerifTC';
  font-style: normal;
  font-weight: 700;
	font-display: swap;
  src: url('https://www.yoursite.com(自己的站點)/wp-content/uploads/fonts(自己設的資料夾)/noto-tc-700.woff2') format('woff2');
}

body, p {
  font-family: 'NotoSerifTC', Helvetica, Arial, sans-serif;
}

最後別忘了禁止一下佈景主題或第三方編輯器內的google fonts載入


add_filter('elementor/frontend/print_google_fonts', '__return_false');

如果這個語法無法完全禁止，不妨參考一下這個外掛-Disable and Remove Google Fonts

就醬，這是洛伊我這一整天處理下來的結果報告。希望能夠對遇到一樣困擾的站長們有幫助喔！

唯一記得的截圖只剩下最後的跑分結果

wordpress 中文字型瘦身

不盡理想，不過已經從原本的22分進步到52分了。
未來會再持續優化網站的。
也請期待後續的技術指南更新
有任何問題回應留言討論或是給洛伊一個鼓勵喔！
謝謝

歡迎一同參與討論唷