Google Fonts 外掛 – 如何在 WordPress 使用思源黑體?

你想要在你的網站上使用比較美觀好看的中文字型,像是思源黑體或是思源宋體嗎?本篇文章將會向你分享如何把 Google Fonts 的網頁字型添加到你的 WordPress 網站,讓你可以設計出更有質感的網頁。

使用外掛添加 Google 字體

最快添加 Google Fonts 到 WordPress 網站的方法是使用外掛,這代表你不需要自行添加任何程式碼或是修改任何檔案,這也是我推薦初學者使用的方式。

Google Fonts for WordPress

Google Fonts for WordPress」是最容易使用的 Google Fonts 外掛之一,並且已經被中文化了。它沒有複雜的設定頁面,只要輕鬆點擊幾下就可以變更網站上的字體,而且會立即反映在即時預覽當中。

Google Fonts for WordPress

安裝完外掛並啟動之後可以在網站前端的「自訂」頁面看到「Google Fonts」選項。

你可以在裏頭找到特定的網站部位(標題、內文、按鈕等)並且選擇你喜歡的 Google 字體來替換當前的字體。

Google Fonts for WordPress 經常更新,而且有超過 200 個五星評價,是款非常不錯的 Google Fonts 外掛,如果想要更多功能他們也有推出付費版本

Easy Google Fonts

另外一款外掛「Easy Google Fonts」的使用方法也很簡單,一樣在 WordPress 控制台當中的「安裝外掛」頁面搜尋安裝並且啟動。

安裝 Easy Google Fonts 外掛
安裝 Easy Google Fonts 外掛

啟動之後,你可以在網站前端的「自訂」裏頭看到「Typography」的選項。

然後你可以開始選擇為「內文」和不同大小的「標題」設定 Google Fonts 的網頁字體。

和「Google Fonts for WordPress」不同的地方是,你可以依據自己的喜好變更字體的顏色、尺寸、間距、行距和邊距等等。

根據不同的佈景主題,在這邊可以控制的選項也許會受到限制,有可能無法直接變更網站的所有字體。

要解決這個問題,你可以使用這個外掛所提供的「Edit Font Control」功能來強制變更字體。

首先,你需要為你的客製設定建立一個名稱,然後輸入要變更字體的 CSS 標籤,完成之後別忘了按下儲存按鈕。

回到「自訂」畫面後,就會發現可以開始編輯剛剛所指定的網站位置的字體。

什麼是網頁字型 ?

網頁字型(Web Fonts)指的是被使用在網頁上的字體。在剛開始我們在網頁上看到的字體是由瀏覽器所控制的,一直到 1996 年 CSS 才開始規範控制網頁字體的功能。

一般的電腦系統當中都會安裝「標準字體」,像是 「Arial」、「Times New Roman」 或是「微軟正黑體」等,在架設網站的時候,如果使用這些「標準字體」通常都不會有太大的問題,但是如果你使用了一個特殊的或是鮮為人知的字體在網頁上的時候,其他沒有安裝該字體的訪客將有可能看不見你精心設計和挑選的字體,大大的破壞網頁的美觀和使用性。

所以現在大部分的人在架設網站的時候,多半會使用「Web Fonts」,它是一種不用被安裝在電腦系統裏頭的字體,網站訪客可以透過訪問伺服器來獲取字體並正確的顯示在瀏覽器上。

跟許多科技技術一樣,多年來字體格式經歷了多次的最佳化和壓縮,目前有四種主要的 Web 字體格式,包括 TrueType 字體格式(TTF)、OpenType(OTF)和專為在網頁上使用而開發的 Web 開放字型格式(WOFF、WOFF2)。

不同的瀏覽器對字體格式的支援會有所不同,詳情可參閱「Browser Support for Font Formats」。

網頁字型的加載方式

網頁字型的加載方式可以分為兩種

  1. 從第三方伺服器加載 – 例如 Google Fonts 或是 Adobe 的 Typekit Fonts 都是從相對應的伺服器加載。
  2. 從網頁伺服器(虛擬主機)加載 – 把字體檔案放在網頁伺服器和其他網頁檔案一起加載。

由於「網路延遲」和「DNS Lookup」的原因,理論上加載網頁的過程中應該要盡量減少依賴外部資源(減少 HTTP 請求),在這種情況下,從網頁伺服器加載字型會是一種選擇(反正一定要從網頁伺服器加載網頁檔案了)。但是實際上,除非你有比 Google 或 Adobe 更快、更安全的伺服器(CDN)來提供字體資源,否則從第三方伺服器加載字體可能是最有意義的。

什麼是 Google Fonts?

Google Fonts 是 Google 所提供的免費、開源字體庫,在以前被稱為「Google Web Fonts」目的是讓人們有更美觀、更快速的字體可以分享和使用,是目前全世界開發維護人員和使用人數最多的字體庫。

Google Fonts 是最多人使用的字體庫

如果你已經訪問過某個使用 Google 字體的網站,只要該字體還儲存在你的瀏覽器快取當中,你下一次訪問該網站或是其他使用該字體的網站,你可以直接從快取加載而不需要重新從 Google Fonts 的伺服器下載字體。

Google Fonts 會減慢我的網頁效能嗎?

Google Fonts 和其他第三方資源一樣,字體檔案必須先下載到網站訪問者的瀏覽器才能被正確顯示。Google 字體 API 提供的字體會自動壓縮,以便更快地下載,下載後會緩存在瀏覽器中,並由使用 Google 字體 API 的任何其他網頁重複使用。

一般情況下 Google 字體檔案有可能會被快取保存一年,累積起來可以更快地瀏覽各個使用 Google Fonts 的網站,當數百萬個網站都使用相同的字體時,使用者在訪問第一個網站後被快取的字體會立即出現在所有其他隨後訪問的網站上。

也就是說越多網站使用 Google Fonts ,訪客就會有越大的機率不需要重複下載 Google Fonts 的字型,因為字體檔案已經被儲存在他們的瀏覽器裏頭了。

效能的「快」和「慢」是相對的,要能互相比較或是有標準值可以比較才會有所謂的「快」或是「慢」;實際測試也很重要,沒有測試和數據的效能討論常常容易變成各執一詞。

所以我重新安裝了一個乾淨的 WordPress,添加了一篇 1000 中文字的文章,並且在文章當中使用各種不同的 font-weight,來測試 Google Fonts 到底會怎麼影響我們的網頁加載速度。

在沒有使用 Google Fonts 之前網頁大小只有 49.3 KB,HTTP 請求只有 8

由於我刻意使用了 300、400、500、700、900 等 5 種 font-weight,加載 Google Fonts 的「思源黑體」(Noto Sans TC)之後,網頁大小增加到 1.73 MB,HTTP 請求增加到 45

從 Google Chrome 的「開發者工具」當中可以看到在字體加載的過程當中,字體檔案被分割成數個檔案以便加速下載,每個檔案大約需要 20 ms – 30 ms 的時間下載,整個網頁總共花了 666 ms 加載。

但是拜快取所賜,如果重新訪問則不需要重新下載字體,網頁加載的時間只需要 292 ms

中文字體和英文字體比較起來雖然檔案龐大不少,但是需不需要為效能犧牲設計品質則因人而異,對於設計人員來說每一款字體可能都是獨特而不可取代的,並沒有哪個字體比較好或是哪個比較有利,這是個人偏好問題。

效能的影響對每個網站都有所不同,因為「每個網站的情況都不一樣」,很難概括而論,上面的測試也只是給各位一個參考,如果真的想知道加載中文字體對你網站效能的影響,我會建議你親自測試看看。

New York Times(nytimes.com)的 CSS 中一口氣加載了 25 個字體

Google Fonts 目前收錄了超過 135 種語言、900 多個不同的字體,比較流行的字體有 Open Sans、Roboto、Lato、Oswald 和 Lobster。Google Fonts 中也包含了兩款繁體中文字體「思源黑體」(Noto Sans TC)和「思源宋體」(Noto Serif TC)。

「思源黑體」(Noto Sans TC)和「思源宋體」(Noto Serif TC)
「思源黑體」(Noto Sans TC)和「思源宋體」(Noto Serif TC)

手動添加 Google 字體

如果你有什麼特殊的原因不想要使用外掛的方式來添加 Google Fonts,那麼你也可以使用手動的方式把 Google Fonts 的程式碼加入 WordPress 網站的檔案裏頭。

前進到 Google Fonts 網站,使用右上角的搜尋列搜尋你喜歡的字體(這邊用「思源黑體」做示範),然後按下該字體的「+」號表示選取,接著打開已選取的字體,點擊「CUSTOMIZE」來選擇想要加載的字體粗細(font-weight),選擇越多將增加加載時間導致網頁效能降低。

然後把生成的程式碼加到<head></head>標記之間。

你可以使用 cPanel 的「File Manager」或是在 WordPress 控制台的「佈景主題編輯器」當中找到含有<head>標記的檔案,根據佈景主題的不同也許會有不一樣的情況,但是通常是在header.php這個檔案裡。貼上程式碼之後,別忘了按下底下的儲存按鈕。

最後,我們來到「自訂」裏頭的「附加的 CSS」選項,把想要變更字體的部分,像是 h1h2h3 等標題或是 body 用 CSS 來做修改。

body, p, h1, h2, h3, h4 { 
 font-family: 'Noto Sans TC', Arial, sans-serif;
}

添加「標準字體」在 Google 字體後面可以預防字體加載失敗時有替代的方案。

從虛擬主機加載 Google 字體

不管是用外掛或是手動加載 Google Fonts,剛剛提到的加載方式都是從 Google 伺服器加載,如果你想要將字體本地化(Host Fonts Locally)從虛擬主機加載字體的話,請參考接下來的段落。

字體本地化的優點

字體本地化的最大優點就是不必依賴第三方服務,使用 Google Fonts,你的網頁需要額外的 DNS Lookup 來向 fonts.googleapis.com 或是 fonts.gstatic.com 請求下載字體檔案。

雖然 Google 或是 Adobe(Typekit)的伺服器通常都運作得很好,但是如果該伺服器暫時停擺或是網路傳輸遇到問題的話,你將會沒有辦法順利的獲取字體資源。

字體本地化的缺點

  1. 必須要搭配 CDN 或是高效能的虛擬主機才能真正縮短字體加載時間
  2. 自己放置字體檔案在主機上,必須要留意瀏覽器對字體格式的支援性
  3. 和使用外掛或是手動加載相比,字體本地化的步驟比較多

用外掛將字體本地化

使用「Host Google Fonts Locally」這個同樣由「Google Fonts for WordPress」的開發商「Fonts Plugin」所設計的外掛可以輕鬆的將 Google Fonts 從 Google 伺服器加載轉變成由你的虛擬主機加載,這樣可以避免向 Google 伺服器發出請求。

你必須先安裝「Google Fonts for WordPress」然後再安裝「Host Google Fonts Locally」,該外掛就會自行運作了。

這是還沒有啟動從虛擬主機加載字體的 GTmetrix 分數。可以看到由於向 Google 發出字體的請求,所以被扣了一些分數。

啟動「Host Google Fonts Locally」之後,果然分數上升了,錯誤的提示也消失了,但是網頁大小和整體加載時間也跟著增加,這是因為 Google 字體已經開始從虛擬主機加載。

如果要縮短整體網頁加載的時間,必須使用像是 CDN 快取的服務從 CDN 的數據中心取代直接從虛擬主機加載。

用手動的方式將 Google Fonts 本地化

你可以從 Google Fonts 下載你想要的字體,或是我會建議你到 Google Webfonts Helper 下載,因為他們不但把 CSS 碼準備好了而且下載的字體也都是轉好檔的格式。

先搜尋你要的字體,然後勾選繁體中文,選擇你要的字體粗細(font-weight),別忘記選擇越多粗細字體檔案就越多、越大。

複製 CSS 程式碼,可以選擇最廣泛的瀏覽器支援或是只支援現代瀏覽器,會影響字體格式的數量。

把下載下來的字體解壓縮後用 cPanel 的「File Manager」上傳到虛擬主機上,你可以在根目錄底下創建一個字體資料夾,或是放置在任何你喜歡的位置。

最後把複製下來的 CSS 碼,貼到 style.css 檔案(可能會依佈景主題不同而有不同的檔案名稱)裏頭,或是「自訂」頁面裏頭的「附加的 CSS」選項也可以。記得修改 CSS 碼當中的字體路徑,要符合你放置在主機上的位置。

完成後可以用 GTmetrix 測試網站大小有沒有改變,並且可以開始使用 CSS 更改標題或是內文的字體。

其他網頁字型最佳化的加載方式

網頁字型最佳化是一個複雜的主題,有很多種不同的方式來最佳化字體的傳輸,最適合你網站的選項取決於多種不同因素,包括伺服器和網絡的速度、是否使用 CDN、CSS 檔案的大小還有你的技術能力。

國外有一些網頁字型的愛好者特別沉溺於研究網頁字型,除了我上面所提到的幾種加載方式之外,他們還有許多其他的方式,像是

  • CSS 內聯(CSS Inlining)- 把字體檔案用 base64 編碼後內嵌到 CSS 檔案當中。
  • HTML 內聯(HTML Inlining)- 把字體檔案用 base64 編碼後內嵌到 HTML 檔案當中。

這兩種做法可以解決 FOIT(Flash of Invisible Text)和 FOUT(Flash of Unstyled Text)的問題,也可以減少從第三方請求資源,但是作法比較複雜就不再這邊細說了,有興趣的朋友可以到以下網站看看

FOIT 和 FOUT

FOIT(Flash of Invisible Text)和 FOUT(Flash of Unstyled Text)這兩個問題是目前使用網頁字型的主要困擾,由於網頁字型需要花費額外的時間加載,所以通常會造成相當時間的延遲。

FOIT(Flash of Invisible Text)

FOIT 是指在等待字型加載的過程當中,不顯示任何字體在畫面上直到字體加載完畢才顯示的一個 flash,如果期間網路的傳輸出了問題,字體將有可能永遠顯示不出來。

FOUT(Flash of Unstyled Text)

FOUT 是指在等待字型加載的過程當中,先顯示系統的標準字體(Helvetica、Arial、Times 或是 Times New Roman 等)在畫面上直到字體加載完畢後替換時造成的一個 flash,在替換後常常會造成頁面的顯示位置變動。

實際的範例可以到 FOIT vs. FOUT 觀看。

結論

網頁字型是現在許多人設計網頁不可或缺的項目之一,網頁字型不但可以改變一個網站的風格,也顯示出設計者的態度,同時它也會影響整個網站的效能進而影響搜索排名或是使用者拜訪的意願,不能太掉以輕心。

希望這篇文章能夠幫助到想要使用 Google Fonts 卻不知道怎麼安裝的朋友。

如果你喜歡這篇文章,請記得用電子郵件訂閱本網站,有新文章發佈時,我會在第一時間通知你,也別忘了到我的粉絲專頁幫我按個讚。

如果你對本篇文章有任何問題,歡迎你在下方留言,我會盡快回覆你。

Last Updated on:

Subscribe.

讓最新文章的通知直接送達你的郵件信箱

還有 WordPress 佈景主題和外掛折扣優惠 🤑

3 thoughts on “Google Fonts 外掛 – 如何在 WordPress 使用思源黑體?”

  1. 您好
    請問為什麼這篇文章在電腦上看是思源黑體,但在手機上看卻不是思源黑體?若蒙回覆,感謝

  2. 大大大感謝
    我在CSS改了半天
    !important半天
    結果看到你用個外掛解決XD

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Share via

用電子郵件訂閱

獲取新文章發佈通知

感謝您的訂閱

Something went wrong.

Send this to a friend