如何在 WordPress 本機託管 Google Fonts 字型?(手動)

如何在 WordPress 本機託管 Google Fonts 字型?(手動操作)

選擇優質的 WordPress 主機 和使用優質 速度優化外掛,是網站速度明顯提升的兩大關鍵。

但要優化網站速度,還是有許多細節需處理的,其中一點就是字體的優化。

這篇文章,會分享如何用手動方式在本機託管 Google Fonts,過程會有點繁瑣,會建議有些 WordPress 網站操作經驗的站長,再來使用。

如果想省事一點會推薦用 OMGF 外掛,也能用最短的時間完成 Google Fonts 本機託管,唯一缺點就是會多安裝一個外掛就是了(但這也是有經驗的站長,可能會想手動處理的原因XD)。

好,我們來看一下本文章節。

如何在本機託管 Google 字體,影片學習

如何在本機託管 Google 字體

1. 本機託管 Google Fonts 的優點?

在優化網站的過程,我們希望盡量降低向遠端請求資源的數量,這樣也代表能用更快的速度,把網頁呈現在訪客面前。

常用的速度測試工具,像是 PageSpeed InsightsGtmetrix ..,其中有幾項的優化建議,就是針對 Fonts(字體)的優化改良。

因為在網站上使用 Google Fonts(或是任一種第三方字體),都會向遠端發送下載字體的 DNS 請求。

所以當你用速度測試工具時,可能會看到 fonts.googleapis.comfonts.gstatic.com 這兩種的請求網域,而文字的下載數據成本其實很高(網站如果使用多種字體,體積更大)。

所以如果對網站速度有要求,就可以下載 Google Fonts 並放在本地主機託管,就不用每次都要去遠端請求數據。如此一來,就能優化網站字體的讀取速度啦!


2. 下載 Google 字體

Google Fonts 是 Google 的免費開源字體,裡面的字體都能免費使用,有關於中文字體部分,也有許多好看的類型,可以下載應用。

前往 Google Fonts,然後搜尋你想使用的字體並點擊,這裡我用 Noto Sans TC(思源黑體繁中版)進行示範。

前往 Google Fonts & 搜尋字體
前往 Google Fonts & 搜尋字體

進入後點選 Download family,開始下載字體。

下載 Noto Sans TC 思源黑體字體
下載 Noto Sans TC 思源黑體字體

備註:安裝多種字體等於更多的網站請求,建議只挑選真正會用到文字即可(像是小犬網站,目前幾乎只用一種字體)。

下載完成後是一個壓縮檔,可以先解壓縮下一章節會用到。


3. 使用工具轉換成 Web 字體

使用 transfonter 進行字體格式轉換
使用 transfonter 進行字體格式轉換

前往 Transfonter,這是一款線上字體轉化工具,可把 Google Fonts 的字體檔案,轉換成像是 WOFF、WOFF2、TTF、EOT 等 .. 格式。

點 Add Fonts 上傳剛從 Google Fonts 下載的字體,有關字體粗細部分,建議選擇會用到即可(像是我就只有把 Regular 400 / Bold 700 應用在網站上,可降低網站的請求次數)。

選擇要轉換格式的字體
選擇要轉換格式的字體

轉換格式確認是 WOFF、WOFF2 這兩種,因為這兩種就能支援大多數的瀏覽器,除非你有特別需求再勾選別的(同樣是為了降低網站的請求次數)。

其他的選項就用預設值即可,沒問題後點 Convert 開始轉換(參考上圖範例)。

轉換完成後,點選 Download 下載。

下載轉換完成的字體格式
下載轉換完成的字體格式

下載後的檔案可以先解壓縮,等下會用到。

文件夾裡面有 4 個等等會用到的檔案,分別是 Regular(一般)的 woff / woff2 格式和 Blod(粗體)的 woff / woff2 格式。

備註:如果用 PageSpeed Insights 測試後,出現本機端文字過大的狀況,可改用 fontsquirrel 進行格式轉換(文字體積可能會有效壓縮的比較小),操作流程跟上面差不多。


4. 字體上傳到 WordPress 網站

這章節要開始把剛轉換好的 Google 字體,上傳到我們的 WordPress 網站啦!

上傳字體方式通常有兩種,第一種是使用主機商提供的檔案管理員工具(不一定每家都有),是圖形化的介面會比較容易上手。第二種是用 FTP 軟體工具,連線到主機後上傳字體檔案。

上傳路徑建議放在 wp-content/uploads 內,像是我有建立一個 fonts 資料夾,這裡面就是專門放網站文字的,比較不會和其他東西混在一起。

所以字體的完整路徑,通常會像是(可以先照我的路徑擺放,等下流程比較不會出錯):

  • https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff
  • https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff2
  • https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff
  • https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff2

記得把 yourdomain.com 換成自己的網域名稱,如果網域有開 SSL 憑證就輸入 https(沒有的話就輸入 http)。

如果字體的上傳路徑是正確的,此時訪問上面的網址應該可以直接把字體下載起來,那這就代表你的字體已經放置在網站中囉:)

接下來,我們需要做些 CSS 樣式設定,讓網站能夠順利吃到字體樣式。


5. 添加字體到 CSS 檔案&套用至網站

字體上傳到網站後,接著需要到自己使用的 WordPress 主題中,把剛剛上傳的字體用 CSS 方式給網站使用。

通常有兩種方法可以添加 CSS 程式碼,第一種是使用自訂 CSS,第二種是用主題的 style.css(下面我會分別示範,記得方法 2 選 1 使用即可唷)。

方法1:使用自訂 CSS

首先示範第一種方法,前往外觀 > 自訂。

前往 WordPress 外觀 > 自訂
前往 WordPress 外觀 > 自訂

進入後,點擊「 附加的 CSS 」,裡面就是貼上 CSS 程式碼的地方。

前往附加的 CSS
前往附加的 CSS

以下是用測試網站的程式碼分享,整段程式碼意思大概是,先讀取放置在本機的字體路徑,然後套用到網站內容&網站標題上。

看不懂也沒關係,記得把內容有「 yourdomain.com 」的文字,改為自己的網域名稱,然後確認讀取字體的 URL 連結是正確的,沒問題後就複製到欄位中,完成後記得儲存唷!

@font-face {
  font-family: 'NotoSansTC-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff2') format('woff2'),
       url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff') format('woff');
}

@font-face {
  font-family: 'NotoSansTC-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff2') format('woff2'),
       url('https://yourdomain.com/wp-content/uploads/fonts/NotoSansTC-Bold-Alphabetic.woff') format('woff');
}

body, p {
  font-family: 'NotoSansTC-Regular', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'NotoSansTC-Bold', Arial, sans-serif;
}

完成後大概會長下圖這樣。

添加字體的 CSS 程式碼
添加字體的 CSS 程式碼

這就是使用「 附加的 CSS 」貼上 CSS 程式碼的方式,這是 WordPress 預設的功能,應該每個網站都找得到。

方法2:在佈景主題內,添加 CSS 程式碼

第二種方法是,可以貼到主題的 style.css 檔案中(但有時候不同主題的 CSS 檔案命名不太一樣,所以可能要自己找一下)。

以我自己是用 Astra 主題 為例,我是套用 Astra 的子主題(以防未來更新主題,設定的程式被洗掉),就會在 WordPress 外觀 > 佈景主題編輯器 > style.css 加上字體的 CSS 程式碼。

這邊我擷取測試網站的畫面,完成後大概會長這樣子(我是用 Astra 主題,你的主題 CSS 檔案位置可能跟我不同)。

輸入字體相關的 CSS 程式碼,到網站中
輸入字體相關的 CSS 程式碼,到網站中

測試是否使用本機路徑,讀取 Google 字體

字體的 CSS 程式碼貼上完成後,前往 WordPress 網站前台刷新頁面(如果有網頁快取,記得清除才能讀取到最新的頁面)。

然後開啟瀏覽器的開發者工具(使用 Chome 的話,對著網頁按右鍵 > 檢查,就會出現了)。

備註:記得要在有使用標題(例如 h1、h2 標籤)& 內文(例如 p 標籤)的網站頁面,開啟開發者工具唷。

然後切換到 Network > All > 搜尋 font,就會看到字體的相關請求,如果剛上面的流程都執行順利的話,這裡就會看到本機字體的請求結果。

使用開發者工具,查看是否正確從本機讀取字體
使用開發者工具,查看是否正確從本機讀取字體

點擊項目會顯示請求的相關訊息,可確認是否從本機路徑讀取字體,如果路徑一致,就恭喜你已經完成本機託管 Google Fonts 字體啦!

確認是否從本機路徑,讀取字體
確認是否從本機路徑,讀取字體

備註:如果還是讀取到遠端的 Google字體,有時候可能是沒清快取(不論是瀏覽器 or 伺服器),所以還是讀到舊的程式。記得清一下快取再回來測試,看是否有成功:)


6. 禁止主題或外掛的 Google Fonts 載入

經過上面的教學流程,我們已經大幅減少了從遠端下載 Google Fonts 的請求次數。

但有些佈景主題或網站外掛,預設會抓取遠端的 Google Fonts,所以當用開發者工具檢查時,可能還會發現還是有一些資源,是從遠端抓取的。

備註:所以如果你還是有發現,有字體資源是向遠端請求的,就能參考這章節繼續學習,否則的話就直接略過即可。

因為 WordPress 主題&外掛非常多種,每一種禁止載入字體的方法也不太一樣。

是有種方法可用函數的方式處理,但就是要先找到主題 or 外掛的字體 ID,但想說每個軟體的放置位置又不同 ..,就不多提了怕造成大家的混亂。

所以呢,我只能就我知道的進行分享了(Astra 主題+Elementor 頁面編輯器)。

Astra 的 Google Fonts 字體禁用

add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});

Elementor 的 Google Fonts 字體禁用

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

當然啦 ..,我也不會這麼狠的,如果你們有需求還是得想辦法幫助你們,目前查到的解決方法是可用 Disable and Remove Google Fonts,但不一定有支援所有的主題 or 外掛就是了。

但是可以試看看,看能否對你有幫助。


7. 重新測試網站

如果有順利跟著本文學習,我們學會了在本機託管+應用 Google Fonts,然後也禁止了部分主題 or 外掛預設的 Google Fonts 遠端請求。

通常再度測試 PageSpeed InsightsGtmetrix,有關字體優化的相關提醒,應該也會減少許多。

但字體優化事項不一定全部都會消失,因為有時需配合 WordPress 快取外掛,像是 WP Rocket 外掛 等 ..,才能達到完美效果(比如說預先載入功能等)。

使用 PageSpeed Insights 重新測試
使用 PageSpeed Insights 重新測試

好囉!這篇文章的教學就到這裡啦~如果有相關的操作問題,或是想詢問的,也歡迎在下面留言給我,有空我也會回覆大家的!


常見問題

本機託管 Google Fonts 字體,有什麼好處嗎?

本機託管 Google 字體可以減少網站向外部發送的數據請求,進而加快網站讀取速度。

因為每多一個遠端數據請求,則是代表更多的網頁讀取時間。

而且大多數的網頁速度測試軟體,像是 PageSpeed Insights、Gtmetrix,都有對字體的載入速度,進行優缺點評分。

簡單來說,本機託管 Google Fonts 字體,能提升網站速度。

除了用手動託管 Google Fonts,還有其他方法嗎?

手動託管 Google Fonts 的流程會比較繁瑣一點,會比較適合有經驗一點的站長。

如果看完這篇教學,但還是不太會操作的話,可以直接使用 OMGF 外掛處理,也能達到本機託管 Google Fonts。

唯一缺點就是會再多安裝一個外掛,但這個外掛是很輕量的外掛,所以應該也不用過於擔心。

有推薦的 WordPress 主機,可幫助我加快網站速度嗎?

使用優質的 WordPress 主機 是提升速度的關鍵之一。

如果新手預算有限,打算使用共享主機當作起步,可以參考 Bluehost 主機(建議新手使用)。

如果你是因為原來的主機太慢打算搬家,或是有比較多流量的網站,打算尋求更穩定的主機,那可以參考 Cloudways 主機(建議有經驗的站長使用)。

可參考 共享主機 & VPS 主機差別,學習更多。

除了字體優化以外,還有什麼方法能提升網站速度嗎?

優質的 WordPress 快取外掛 是優化網站速度必備項目之一,WordPress 有許多免費版&付費版的快取外掛,可供你使用。

而小犬網站是使用 WP Rocket,它是一款付費版外掛,但速度效果非常好且上手簡單。詳細可參考 WP Rocket 教學


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈如何在 WordPress 本機託管 Google Fonts 字型?(手動操作)〉中有 12 則留言

  1. 你好,非常謝謝這篇文章分享!不過我有一個問題想請教,程式碼貼上後,在網站上按右鍵檢查,輸入font後並沒有出現相關請求耶~是在程式碼上輸入的網址有誤嗎?https://d-t.com.tw/wp-content/uploads/fonts/NotoSansTC-Regular-Alphabetic.woff2′) format(‘woff2’) 我是到cPanel的檔案管理員→public_html→wp-content→uploads→fonts,上傳woff和woff2檔案,主機是Bluehost,主題是Astra。

    1. 嗨!剛訪問了一下連結,是有把文字下載下來,代表你是確實有放到主機端的。

      程式碼的部分,網域 URL 記得改成你自己的網域,因為文章的程式碼是寫我自己的網域。

      然後瀏覽器的快取清一下,如果有開 CDN 也要清一下,再次刷新網頁再檢查一下。

      還有記得要到有文字的地方做測試的動作,沒有文字代表沒有請求。

      希望有幫助到你唷:)

  2. 您好,我是依照”如何架設 WordPress 購物網站+網路商店(Flatsome 主題)”這篇架設了woocommerce,非常棒的教學,請問使用Flatsome也是依照這篇的方式讓本機託管google字型嗎?

    1. 犬哥網站

      嗨,Chen:

      關於託管字型,除了參考我們的教學文章,我還發現一個更輕鬆的方法,你可以參考一下。

      使用相關外掛: OMGF 也可以完成託管。

      希望我的回答有幫助到你唷:)

    1. 犬哥網站

      嗨,john lin

      因為字體禁用代碼可能需要不定期進行更新,若是沒有程式基礎,建議你可以直接使用 OMGF 外掛協助你處理唷!

      這是款很輕量的外掛,可以不用擔心會佔用太多主機資源:)

  3. 您好,如果我想託管同一個字體,有3-4個不同的css,例如:400/500/600,這樣的話,以下這個代碼有建議怎麼調整嗎?就是是否可以在 font-family把所有字型都塞進去?(我試過似乎是失敗的///)

    body, p {
    font-family: ‘NotoSansTC-Regular’, Arial, sans-serif;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: ‘NotoSansTC-Bold’, Arial, sans-serif;
    }

    1. 犬哥網站

      嗨,amber,

      因為使用程式碼會需要跟隨 WordPress、主題隨時調整,

      建議你使用文章中推薦的 OMGF 外掛 處理,也能達到本機託管 Google Fonts 效果唷。

  4. 犬哥老師
    想請教您
    我目前已經可以使用對外網址順利下載字體檔案,但匯入css之後,網頁檢查會出現cors錯誤的訊息
    請問該如何解決呢?
    謝謝您了

    1. 犬哥網站

      嗨,Erwin,

      使用程式碼可能會遇到你提到的疑問,並跟著時間隨時做調整。

      建議你使用文章中推薦的 OMGF 外掛 處理,也能達到本機託管 Google Fonts 效果唷。

發佈留言

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

返回頂端