fbpx

【Google Fonts 應用】如何在 WordPress 網站上使用 Google 中文字體?【支援思源黑體和思源宋體】

隨著雲端中文字體的不斷發展,雖然先天上中文的字數遠遠高出歐文字體數百倍以上,要實現像歐文字體的多樣性實屬存在一些技術和硬體的樽頸。

但因為不少領導產業的公司,不斷投入資源在開發,免費開源和可以商業使用的字體,如我們這次介紹的【思源黑體和思源宋體】。

由兩大科技巨頭 Google 和 Adobe 聯手合作,解決了不少技術問題,但仍存在不少後續的最佳化和調用問題出現。

一般常見的使用雲端中文字體,方式是離不開引用外部來源,透過使用 CSS 可以輕鬆達成,但如果要在網站上為不同的功能性文字,套用不同的字重和樣式,加上中文字體的體積太大,對主機的負荷構成嚴重的問題。

Google Fonts for WordPress 外掛是什麼?

我們這次為大家介紹
一款輕鬆套用雲端中文字體的外掛
是 WordPress 字形外掛排行傍
持續獲得第一名的
Google Fonts for WordPress
顧名思義
就是替新手站長
輕鬆在網站的各個部分
套用不同的字體

教學操作影片:
如何在 WordPress 網站上使用 Google 中文字體?

影片長度:32 分鐘
語言:粵語(廣東話)
字幕:繁體中文(字幕後補)

如何安裝 Google Fonts for WordPress 外掛?

Google Fonts for WordPress 外掛
有分為兩個版本
免費版本和付費版本

免費版本和一般外掛的
安裝流程相同
在 WordPress 後台
【外掛】–>【安裝外掛】
搜尋關鍵字【Google Font】
正常在第一位就會看到
按下安裝和啟用外掛即可

了解更多外掛的資訊和利益申報

WordPress.org 外掛說明頁面
https://tw.wordpress.org/plugins/olympus-google-fonts

贊助開發團隊持續發展
https://fontsplugin.com

Google Fonts for WordPress 並不是 Google 團隊開發
簡單說明:

這款外掛並不是 Google 旗下的產品
是由獨立開發團隊負責

怎樣打開 Google Fonts for WordPress 的編輯介面

圖片:從後台進入編輯介面

在 WordPress 後台
【外觀】–>【自訂】
然後會打開新的一頁
分成左右兩邊
從左邊可以看到 Google Font 的選項?
然後可以開始編輯您的字形設定
相信這部分並不難去理解

如果遇到設定的困難
請前往社團發問
社團的成員都非常熱心
https://www.facebook.com/groups/wp.valley

開始試試體驗雲端中文字體的強大

圖片:開始體驗 Google Fonts for WordPress

在【內容】的調整介面
您可以看到非常清晰的設計
從上而下來說明
分別是【內文】字體是第一個選項
第二至第六分別是
Title 標題的設定
從【H1】至【H5】

這部分沒有硬性規定
字體的應用千變萬化
這裡可以發揮您的創意和小宇宙

每當您調整完後
右方網站的介面
會提供實時的預覽給您
如果您【確定】效果滿意
按下上方的【發佈】
套用雲端中文字體的步驟就完成
是不是非常簡單?

為什麼推薦【思源黑體和思源宋體】

圖片:英文名稱對照表格

思源黑體(Noto Sans)和思源宋體 (Noto Serif)
是一個由 Google 和 Adobe 投入
非常巨大開發成本和心力的項目
支援的字數非常龐大
您很少會出現【缺字】的情況
而且提供很多字重給您選擇
不要局限您的資訊層級架構
少數能夠免費商用的優秀字體家族

英文名稱對照表格

字形英文名稱 字形顯示語言
Noto Sans
思源黑體(英文)
Noto Sans JP 思源黑體(日文)
Noto Sans KR 思源黑體(韓國)
Noto Sans SC 思源黑體(簡體中文)
Noto Sans TC 思源黑體(繁體中文)
Noto Serif
思源宋體 (英文)
Noto Serif JP 思源宋體 (日文)
Noto Serif KR 思源宋體 (韓國)
Noto Serif SC 思源宋體 (簡體中文)
Noto Serif TC 思源宋體 (繁體中文)

Google Fonts for WordPress 效能調整的部分

Google Fonts for WordPress 免費版本和付費版本的差異是什麼?

從主目錄進入【字形載入控制】的調整
上方的例子
我分別為網站套用兩套字體
但 Google Fonts for WordPress 的
免費版本存在一個明顯的缺點
就是不允許免費的用戶
取消【勾選】不適用的選項
這會導致網站載入時間大幅增加
單單是載入中文字體的部分
就佔掉不少效能和時間

免費版本的用戶,被強迫安裝用不到的樣式

Noto Sans TC
思源黑體
Noto Serif TC
思源宋體

超細體
特細體
細體 細體
標準 標準
中等 中等
粗體 半粗體
特粗體 粗體
超細體 Italic 特粗體
細體 Italic 特細體 Italic
標準 Italic 細體 Italic
中等 Italic 標準 Italic
粗體 Italic 中等 Italic
特粗體 Italic 半粗體 Italic
粗體 Italic
特粗體 Italic

備注
Italic 是等於【斜體】
一般中文字的應用上
不建議大家使用斜體
這和歐文字體的斜體
有本質上的區別

從 GTmetrix 數據上研討這課題

圖片:從 GTmetrix 數據觀察,有多達 166 個請求

每一個中文字形的【請求 Requests】
都對網站主機構成壓力
最佳化主機效能的其中一項指標
就是用盡方法
減少【請求 Requests】 的數目

例如常見的合拼所有 CSS 樣式
成為一個 Style.css 等技術
還有逐漸流行的
WordPress 網站靜態化技術

查詢 GTmetrix 數據的 Waterfall 列表

圖片:GTmetrix 的 Waterfall 列表提供詳盡網站的數據

fonts.gstatic.com 是中文字形的存放位置
Google Fonts for WordPress 外掛產生很多
不必要的中文字形請求
每個請求都佔約 50 kb 左右
當中有多少是【必須】的?
有多少是可以節省的?

從右方的載入時間進度條
可以看到網站的載入時間
被中文字形拖延不少

由於中文字形相比歐文字體
檔案大少上就擁擠和龐大不少
也間接讓網站頁面的檔案大少增加

新手疑問:上面零零碎碎的是【字形檔案】?

100% 是字形,由於中文字形檔案太巨大
早期要一次載入一個 5MB – 10MB 的檔案
可能需要數秒時間
現在 Google 的中文字形
會把整個巨大的中文字體包
按照 Google 的演算法和分析
分拆成約 100 個小封包
您使用的【文字】
才會被下載和載入網站
這樣設計的好處很顯然而見
就是您可以只需要下載約 1MB 就足夠
不用下載 10MB 的中文字形

Google Fonts for WordPress 付費版本推薦嗎?

圖片:應否升級成【付費專業版本】?

如果新手要面對這個決擇
以我的經驗來說
我會不推薦您升級成【付費專業版本】
以單一網站授權來說
需要美金 $49
性價比並不高

我會建議您把錢花費在
更值得投資的外掛身上
例如專業級 SEO 和快取外掛
也可以試試升級網站主機
這樣帶來的效能提升
是非常顯著和明顯的
而不是【外觀】的昇華
加上少許的效能提升

如果您對【美感】和我相同
無法接受太醜的字形
也希望可以更方便控制
整個網站的字形
減少學習 CSS 語法的成本
也是可以試試看

我們下方有提供
優惠價代碼(30% Off)
如有需要可以取用

部分功能只適用在【付費專業版本

Google Fonts for WordPress 免費版本和付費版本的差異是什麼?

例如調整字體的【行高】和【顏色】
而且字形的載入速度也會提升不少
我認為最重要的改善
是可以把不必要的中文字重刪除掉
這些太影響主機的效能

提供容易負擔的授權費用

圖片:付費版本最低的入門價格是美金 $49

由於想試用看看
只購買了單一用戶版
對於我這種注重美感的設計師
我還是認為值得投資
每個人的價值觀不同

不少人認為【新細明體】和
【標階體】也很美
沒有正確與錯誤

購買的流程很簡單

圖片:非常簡潔的購買流程

這是正常的結帳頁面
沒有什麼特別的地方要注意
記得在優惠碼輸入【UPGRADE

可享有 30% 節扣優惠
不要像我忘記了
就得付原價

購買成功和下載付費外掛【Google Fonts PRO

Google Fonts for WordPress 免費版本和付費版本的差異是什麼?

這裡有購物的詳細記錄和授權碼
正常來說外掛授權碼
已經內置在【Google Fonts PRO】裡
您並不需要輸入授權碼這個動作
也沒有地方或頁面讓您輸入 ……

把【Google Fonts PRO】 上傳至 WordPress 網站

Google Fonts for WordPress 免費版本和付費版本的差異是什麼?

這個操作應該難不到大家吧
不過要注意
不要把 Google Fonts For WordPress 外掛移除
這個是一定要保留的
已經測驗過移除後無法運作
啟用【Google Fonts PRO】就完成
沒有多餘的動作

現在可以【解除】封印

圖片:現在可以自由選擇使用那種字重

如之前所言
這款免費外掛會載入很多
不必要的中文字形字重
導致網站變慢
現在可以輕鬆移除了

免費和付費版本的效能表現?

Google Fonts for WordPress 免費版本和付費版本的差異是什麼?

使用相同的頁面測試
兩者在效能上的分別

當然付費版本必定佔優
但沒有很明顯的優勢
載入時間快約 1 秒左右
頁面檔案大小減少約 1 倍
最明顯是查詢次數大幅減低
因為移除很多不必要的【字重】

免費版本的效能表現

圖片: 免費版本的效能表現

這邊無法放大圖
大家自行去下載大尺寸的圖片
讓數據說話吧
不多解釋
看到那塊【紫色區域】
就已經很震驚

請下載高清的評分報告
http://bit.ly/google-fonts-for-wordpress-review

付費版本的效能表現

圖片:付費版本的效能表現

【紫色區域】 明顯變少了不少
進度條的長度也收窄
代表網站的載入變得順暢
因為把不必要的東西移除掉

評測和總結

圖片:希望大家可以開心使用這外掛

這篇 Google Fonts for WordPress 心得
花了不少時間測試和撰寫
如果認同我們的努力
可以分享給您的朋友
無言感激
也可以驅使我撰寫更多
長篇的評測報告

忠告:
沒有什麼特別的地方要注意
記得在優惠碼處輸入【UPGRADE
可享有 30% 節扣優惠


可以追蹤我們的 WordPress 社團和交流
https://www.facebook.com/groups/wp.valley/

引用資訊數據和參考文獻:

思源黑體 – 維基百科,自由的百科全書 – Wikipedia
https://zh.wikipedia.org/zh-hk/思源黑體

思源宋體- 維基百科,自由的百科全書 – Wikipedia
https://zh.wikipedia.org/zh-hk/思源宋体

Google Fonts 服務是 Google 公司擁有的資產
https://fonts.google.com

Google Fonts for WordPress 外掛
並不是 Google 團隊開發

外掛開發團隊是 Fonts Plugin
https://fontsplugin.com

在〈【Google Fonts 應用】如何在 WordPress 網站上使用 Google 中文字體?【支援思源黑體和思源宋體】〉中有 5 則留言

  1. 您好,
    感謝您的查詢
    中國內地封鎖他們認為不適合的內容
    有他們一套標準
    這方面我們不作評論

    不過最壞的情況
    由於 Google Font 只是雲端字形
    只會影響網站的文字【外觀】表現

    舉例:
    如果【思源黑體】無法表現
    瀏覽器會自動套用其他系統字形
    例如【微軟雅黑體】

    抱歉無法確切回覆您的問題重點
    我們無法改變一個國家的法例和
    如何去執法
    現在有效的方法
    也不保證明天仍然有效
    希望解答到您的疑慮

    回覆
    • 請問我按照這方法試
      發布後右邊顯示有變成思源字體
      但是回到網頁時
      還是顯示原來字體
      這樣要怎麼處理?

      回覆
      • Bruce 您好,

        這個問題有數個可能性如下;

        【01】快取(Cache)問題
        您可能需要清除快取,或者使用瀏覽器的【無痕模式】試試看。

        【02】CSS 權重問題
        如果佈景主題對【樣式 Style】的語法寫下太高權重,這可能對您有點複習,但一般比較少情況發生。

        【03】佈景主題的原設定
        這取決您使用什麼佈景主題 Theme,一般可以在網站後台 –>【外觀】–>【自訂】–>【字體 Font】裡,看看可否選擇【Noto Sans TC 思源黑體(繁體中文)】

        回覆

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術