WordPress 之 Google Fonts 應用:外部字體的使用與禁用,加速網頁加載、提高瀏覽速度

?

?

?

?

,

?️

WordPress 之 Google Fonts 應用

  WordPress 目前是最多人使用的部落格、CMS 系統,早在 WordPress 3.8 版的時候則自動引入 Google Fonts 外部字型資源,但在此版本之前則無。

  Google Fonts 是由 Google 所提供的外部字型資源,能夠讓網站引入該字型,從而達到因使用 Google 主機所提供的外部資源的方式來提升網頁載入的速度。但是 Google 在中國大陸是被封鎖的,所以中國大陸的訪客瀏覽有引入 Google Fonts 的網頁時,會變得非常慢,這時反而把 Google Fonts 從 WordPress 中移除反而會讓頁載入速度加快。

  本篇文章將會介紹 WordPress 中 Google Fonts 的關聯及應用,包含如何使用、禁用、替換 Google Fonts 外部字型資源。

1 前言

1.1 撰寫緣由

  前陣子為了要優化及加速 WordPress 網站,在網路上研究了一番,無意間找到了由 Google Developers 提供的 PageSpeed Insights 工具,該款工具是 Google 提供的網頁效能工具,會分析網頁內容,並提供如何加快網頁載入速度的建議。

  在使用 PageSpeed Insights 分析了我的部落格網站之後,該工具在「可能的最佳化做法」中顯示了「清除前幾行內容中的禁止轉譯 JavaScript 和 CSS」,具體需要修改的部分顯示如下:

針對下列網址為 CSS 傳送進行最佳化處理: https://fonts.googleapis.com/…700italic,400,700&subset=latin,latin-ext

  上面顯示的內容中,出現的「fonts.googleapis.com」網址是由 Google Fonts 所提供的外部字型資源。由於 WordPress 運行的時候,會在網頁頁頭載入 WordPress 的 wp_head();  函數,而該函數內就有引入 Google Fonts 外部字型資源的程式碼。

  而在網頁載入的時候,碰到該函數會先把 Google Fonts 外部字型資源載入完成後,才會繼續往下載入網頁的其它主要內容部分。造成因為引入 Google Fonts 外部字型資源而花費一點點的時間,導致網頁下方主要的內容被延遲載入了。

  雖然說一般訪客在載入 Google Fonts 外部字型資源所花的時間並不多,有時大約只有 0.0x 至 0.x 秒而已,但對於網頁載入速度極端要求的人來說,可能是分秒都非常地在意,或者對於搜尋影情優化 (SEO) 來說一點點的差距多少都還是有影響的,所以是否啟用或禁用 WordPress 中的 Google Fonts 都是可以做考慮的因素,所以就研究了 Google Fonts 在 WordPress 的各項利弊。

1.2 背景、動機與目的

  有許多使用 WordPress 架設的網站,常常會因為引入外部連結元素,而導致網頁載入緩慢。載入的檔案當中,有一些是自行手動添加的檔案,而有一些是安裝外掛後所引入的元件,不過有一些則是 WordPress 程式碼內就預先裝好引入的元素,例如:Google Fonts。

  Google Fonts(中文或稱:Google 字體谷歌字體,前稱為:Google Web Fonts [1])是由 Google 所提供的外部字型資源,提供給網站調用。WordPress 3.8 版以後,會自動引入 Google Fonts 外部字型資源,用意是要把 WordPress 網站內的字型移轉交由 Google Fonts 外部字型提供,因為 Google 的所提供的伺服器會比一般網站本身的伺服器還要來的強大許多,同時也能夠減少網站主機本身的流量和負擔,讓網頁載入速度加快。

  而 WordPress 3.8 以前的老版本則需要自行修改程式碼,或者安裝外掛程式,才可以正常使用 Google Fonts。雖然 WordPress 3.8 版以後自動調用 Google Fonts 的用意是要減少本地端主機的負擔和提高網頁載入的速度,但是 Google 很多服務在中國大陸是被封鎖的,即使沒封鎖連結速度也非常的慢(包含 Google Fonts),所以若架設的 WordPress 大部分的瀏覽者都在中國內地,或者其它封鎖 Google 的地方,那麼把 Google Fonts 移除或者替換成其它資源反而會加快網頁的載入速度。

  本文將會針對如何檢查 WordPress 中是否有自動引入 Google Fonts 外部字型資源做教學,並提供網路上最全的使用、移除、替換 WordPress 中的 Google Fonts 程式碼,以及安裝相關功能的外掛程式,且在結論的地方探討 WordPress 是否真的需要引入 Google Fonts 或是選擇禁用,以及要使用哪種方法更動 WordPress 中的 Google Fonts 較適切。

2 檢查:是否有引用 Google Fonts 外部字體資源

  WordPress 自從 3.8 版本以後,程式就內置自動引用 Google Fonts,但如果不確定自己使用的 WordPress 是哪一個版本,或者想要確實地確認是否有引用 Google Fonts 資源,那麼還是可以靠一些方法來明確檢查並得知自身架設的 WordPress 是否有自動引用 Google Fonts 資源。

2.1 網頁原始碼

  檢查 WordPress 是否有引用 Google Fonts 最簡單的辦法就是察看網頁原始碼,打開 WordPress 前台的任何頁面或隨便一篇文章,在網頁頁面點右鍵查看網頁原始碼(不同瀏覽器查看網頁原始碼的方法可能會稍微有些不同),就可以查看網頁原始碼中是否有引入外部字體了。

  接著在網頁原始碼頁面中, Windows 作業系統下則可以直接同時按下鍵盤的  Ctrl 鍵和  F 鍵,會跳出瀏覽器的搜尋框(Google Chrome 瀏覽器在右上角,FireFox 則是在左下角),輸入  fonts.googleapis.com  搜尋,假如搜尋的到該網址,代表 WordPress 有引入 Google Fonts,若搜尋不到則無。

2.2 Google Chrome 瀏覽器的開發者工具

  除了使用查看網頁原始碼的方式可以知道 WordPress 是否有引用 Google Fonts 資源外,在 Google Chrome 瀏覽器底下還可以使用該瀏覽器的開發者工具來查找是否有引入外部字體。

  使用 Windows 作業系統的使用者,可以在 Google Chrome 瀏覽器開啟的網頁頁面之下,同時按下鍵盤的  Ctrl 鍵、 Shift  鍵及  I  鍵,或者直接按  F12  鍵,網頁右方就會跳出開發者工具的頁面了,接著在搜尋框中打上  fonts.googleapis.com  (鍵盤按 Ctrl 鍵和  F 鍵鼠標也會自動跑到搜尋框當中),若有查詢到該網址代表有引用 Google Fonts,若找不到則無。

3 控制:啟用及禁用 WordPress 中 Google Fonts 的方法

  WordPress 在 3.8 之後的版本,佈景主題會自動調用  wp_head();  的函數,以引入 Google Fonts 外部字型的資源。可以用許多方法來使 WordPress 3.8 以前的老版本引入 Google Fonts,或 WordPress 3.8 以後的新版本禁用 Google Fonts。

3.1 禁用

3.1.1 修改程式碼

3.1.1.1 移除程式碼

  修改 WordPress 程式碼來禁用 Google Fonts 功能的最快、最直接的方法就是把該功能的運行程式碼屏蔽或刪除,只要找到 WordPress 內的「wp-include/script-loader.php」檔案,就可以修改了 [7]

  在 WordPress 程式目錄下找到「wp-include」的子目錄,並使用編輯軟體打開開子目錄下的「script-loader.php」檔案,找到載入 Google Font 的程式代碼,並把它刪除即可,程式碼如下(WordPress 4.x 版的程式碼大約位在 952 行左右):

  若想要保留程式碼,也可以使用注釋的方式來屏蔽該段程式碼的運行,PHP 程式只要加上「//」來注釋掉就可以了,改成下方的程式碼:

  修改完 script-loader.php 檔後,若是在線上編輯則直接存檔,如果把是檔案下載下來編輯,就在編輯後存檔並上傳至原來的位置,保存至伺服器當中。

3.1.1.2 加入禁用程式碼

  若不想刪除或屏蔽 WordPress 內原本的程式碼,那麼可以另外增加程式碼來禁止 Google Fonts 的引用,只要找到目前 WordPress 所使用的佈景主題,並在「functions.php」檔裡面增加以下的程式碼就可以了 [10]

程式碼一:

程式碼二:

程式碼三:

  以上三種程式碼只要選擇其中一個加入至 functions.php 裡面就可以了。

3.1.1.3 修改語言檔

    wpcontent\languages  底下的語言檔  zh_XX.mo (XX 請自行對應 WordPress 所使用的語言),修改成禁止使用 Google Fonts 即可。先將  zh_XX.po 檔打開編輯,並找到  msgctxt “Open Sans font: on or off” 此行,將此行下面的  msgstr “on” 改成  msgstr “off” 存檔,並將存檔後的  zh_XX.po 編譯成  zh_XX.mo 檔並替換原來的檔案即可 [9]

3.1.2 外掛

3.1.2.1 Remove Google Fonts References

  Remove Google Fonts References 外掛能夠將 WordPress 中的 Google Fonts 移除掉。使用方式只需要安裝後啟動即可 3

3.1.2.2 Disable Google Fonts
  • 外掛名稱:Disable Google Fonts
  • 外掛網址:https://wordpress.org/plugins/disable-google-fonts/
  • 外掛性質:免費

  Disable Google Fonts 外掛能夠禁止 WordPress 中的 Google Fonts 的使用。使用方式也只需要安裝後啟動即可。

3.2 替換

  與直接禁用相較起來,替換 Google Fonts 能夠讓 WordPress 繼續使用字體而不必禁用,同時又可以避免 WordPress 默認使用 Google Fonts 的引用,而改成其它資源的調用。除了調用其它資源的字體外,也可以直接把字體下載到網站主機本地端來使用,而不再引用外部字體的資源。

3.2.1 修改程式碼內的引用資源

  要把 WordPress 中引用 Google Fonts 的資源替換成別的資源,只要在 WordPress 中找到相關的程式碼,並把程式碼內引用的 Google Fonts 的部分替換成別的資源的位置就可以了。找到「wp-include/script-loader.php」檔案,並修改以下的程式碼:

  把程式碼內的「https://fonts.googleapis.com/」替換成其它資源的網址,就可以引用 Google Fonts 之外的資源了,例如由 360 所提供的 DNS 公用庫就可以改成  fonts.useso.com ,不過現在 360 已經停止提供公用庫資源了 [2],請自行搜尋其它替代方案資源。

3.2.2 本地字體:把字體存放在本地端

3.2.2.1 google-font-download
  • 資源名稱:google-font-download
  • 資源網址:https://github.com/neverpanic/google-font-download
  • 使用性質:免費

  在網路上有使用者在 GitHub 放上 Google Fonts 以供下載:「google-font-download」,不過由於 google-fonts-download 是屬於 bash script,所以必須要在 Unix 及類 Unix(英語:Unix-like,包含所有的 Linux 發行版:Debian、Ubuntu、Fedora、CentOS 和 openSUSE……,以及 FreeBSD、OpenBSD 等等)環境下的作業系統才可以正常運行 [6]

  google-fonts-download 的使用方法只要在後方加上要下載的字型即可,例如想要下載 Google Fonts: Open Sans 及 Ubuntu 字型,只要把 google-fonts-download 所提供的 bash script 檔改成以下的的內容:

  若是要查看 google-fonts-download 有提供哪一些字體可以下載,可至 Google Fonts 官方網站查詢。

  在下載完 google-fonts-download 字體後,除了原本要下載的字型外,還會有一個 font.css 的檔案,只需要三個步驟就可以正常的使用:

  1. 需要在目前所使用 WordPress 網站的佈景主題底下,另外再新增一個 fonts 的資料夾。
  2. 再剛剛從 google-fonts-download 下載下來的字型檔案 (*.eot, *.svg, *.ttf, *.woff, *.woff2) 和 font.css 檔案上傳到剛剛所新建立的 fonts 資料夾當中。
  3. 編輯該 WordPress 佈景主題的 sytle.css 檔案,打開該檔案並在內容開頭的部分加上  @import “fonts/font.css”;  即可。

  完成以上三個步驟後,就可以成功地讓自己的 WordPress 自動引用你自己剛剛安裝在本地的字型了。若是有安裝 WordPress 快取(暫存、緩存)外掛,記得要更新緩存,才可以正常顯示更改過後的網頁。

3.2.2.2 Early Access

  Google Fonts 雖然提供好幾百種的字型樣式供下載,但是絕大多數都是英文或符號,並沒有提供中文的字型,而是要在 Google Fonts 中的 Early Access(中文又稱早鳥網)項目中才有提供中文的字型。Early Access 是提供還在測試中,而並還沒有正式發表的字型項目,但還是可以自行下載下來至本地端來使用。不過由於這些字型還處於測試期當中,所以不保證能夠完整顯示無任何問題 [6]

  目前 Google Fonts: Early Access 中只有五款中文的字型,分別為下列五種 [4]

  1. cwTeXKai (Chinese Traditional) 楷體字體
  2. cwTeXYen (Chinese Traditional) 圓體字體
  3. cwTeXFangSong (Chinese Traditional) 仿宋體字體
  4. Noto Sans TC (Chinese Traditional) 黑體字體(思源黑體)
  5. cwTeXMing (Chinese Traditional) 明體字體

  Early Access 的字體與上一段一樣,可以下載到網站本地端使用,不需要外部調用字型,以下將簡單說明如何使用。

  例如要使用 Early Access 中的楷體字型,可以在 Early Access 網頁中找到 cwTeXKai (Chinese Traditional) 的 Link 的部分: @import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css); ,並從網址  //fonts.googleapis.com/earlyaccess/cwtexkai.css 中下載  cwtexkai.css 檔案,並打開修改檔案內容:

  檔案內容中的 .eot 、 .woff2 、 .woff 、 .ttf 為字型的四種格式,把這四種格式下載下來後,放到已經下載好的 cwtexkai.css 當中,只需要把原本的網址改成本地端的網址(在同一個資料夾底下只需要改成檔名即可),修改範例如下:

  全部修改完成後,把 cwtexkai.css 檔和四個字體格式的檔案都上傳至 fonts 的資料夾,並編輯 WordPress 佈景主題的  sytle.css 檔案,在該檔案的開頭加上  @import “fonts/cwtexyen.css”; 來引入本地的字型檔,就可以使用網站自身所提供的字型。

3.2.3 使用外掛

3.2.3.1 Useso take over Google
  • 外掛名稱:Useso take over Google
  • 外掛網址:https://wordpress.org/plugins/useso-take-over-google/
  • 外掛官網:http://www.brunoxu.com/useso-take-over-google.html
  • 使用性質:免費

  Useso take over Google 是一款能夠把 WordPress 內的 Google Fonts 的引用 [8],替換成 useso 引用的插件程式。不過自從 2016 年 9 月 18 日 360 宣布停止 360 前端庫的服務 [2],該插件自從 1.7 版之後已經把 useso 改成用 geekzu 資源來替代了。

  該外掛程式除了能夠用 geekzu 資源替換掉 Google Fonts 外,還能夠自動把 Google JS 公用庫、Gravatar頭像等同樣替換成 geekzu 資源。讓 Google、Gravatar 等原先在中國大陸被封鎖掉的資源,能夠正常訪問、引用 geekzu 的資源。

  該外掛程式的使用方式很簡單,只需要安裝好並啟動外掛就可以馬上生效了,並不需要做其它額外的設定步驟。

3.3 緩存

  利用緩存的方式,可以讓 Google Fonts 緩存下來,不必每次都連上 Google Fonts ,以提升網頁加載的速度。 

3.3.1 使用外掛

3.3.1.1 Cache Google Web Font
  • 外掛名稱:Cache Google Web Font
  • 外掛網址:https://wordpress.org/plugins/cache-google-font/
  • 使用性質:免費

  Cache Google Web Font 外掛程式能夠把 Google Fonts 緩存到本地端,不用每次開啟網頁就引用 Google Fonts 了。

  使用方式很簡單,只需要在後台安裝好,並啟動外掛程式就可以生效了。

3.4 啟用

  通常在 WordPress 3.8 版以後都會自動引入 Google Fonts 外部字型資源,但是有些佈景可能沒有引入 Google Fonts 的程式碼,或者 WordPress 版本低於 3.8 版時,這時就要手動去引入字型資源了。

  例如如果要引入 Google Fonts: Early Access 的圓體字型,那麼只需要找到 WordPress 佈景主題的  style.css 檔案,並插入以下的語法即可 [5]

3.5 使用

3.5.1 外掛

3.5.1.1 TK Google Fonts PRO
  • 外掛名稱:TK Google Fonts PRO
  • 外掛官網:https://themekraft.com/products/tk-google-fonts/
  • 使用性質:付費,每個月 4.99 美元

  TK Google Fonts PRO 外掛插件可以很輕鬆、容易的添加、管理 WordPress 內的 Google Font,包含字體、顏色、大小等功能。

4 結論

  上面介紹了各種修改 WordPress 中 Google Fonts 的修改應用,到底是否需要做修改,若要做修改又要用什麼樣的方式去修改,以下將會詳述各利弊。

4.1 是否需要修改

  通常一般使用虛擬主機的一般網頁空間,性能可能沒有那麼的好,若能把一些內部的資源(例如:圖片、影片、字型等靜態網頁檔案)外連到其它效能較好的平台空間(反向代理伺服器、CDN 等也是這個原理),就能夠加速度網頁載入的速度。所以如果是用一般性能較沒那麼好的主機空間,那麼把 WordPress 中的字型外連至 Google Fonts 是很好的選擇,WordPress 3.8 版本以後都會動外連字型,而 3.8 以前的版本則是需要另外設定。

  但 Google 所提供的多項服務很多在中國大陸都是被封鎖的,即使能夠連上 Goolge 所提供的服務,也會因為中國網路防火牆過濾的關係而變得很慢,所以在中國境內瀏覽有引入 Google Fonts 的 WordPress 網站時反而會變得很慢,這時把 Gooogle Fonts 移除或替代反而能減低網頁載入的時間,同時也能減少引用外部資源的請求量。

  另外,Google Fonts 正式的字體裡面只有英文字型,並沒有中文的字型,所以從 WordPress 引入的 Google Fonts 外部字型資源大都是英文的字型,若用 WordPress 所架設的網站、部落格是中文站點,或者網站內根本用不太到那些英文字型,那麼在 WordPress 引入 Google Fonts 就沒那麼大的效用了。若真的需要中文,可以使用由 Google Fonts 所提供的 Early Access 方案,來把字型放置在本地端使用,但目前只是測試的字型版本,並不能確保所有字型都能夠正常顯示,而且只能使用在 Linux 等主機環境。

  所以 WordPress 內是否要引用 Google Fonts 字型,要看網站瀏覽的客群是否能夠正常的瀏覽 Google Fonts 等服務,以及網頁自身大部分的語言字型是否適用於 Google Fonts 所提供的字型而定,才能夠找出最適合的方案,以降低網頁加載的時間,提升瀏覽的速度。

4.2 選擇修改的模式

  若是決定好要禁用 WordPress 中的 Google Fonts 外部字型資源,可以選擇是要把 Google Fonts 從 WordPress 中移除,或者是要把 Google Fonts 替換成其它的外部字型資源,或者直接下載到本地端來使用。

4.2.1 移除的方式

  若是 WordPress 網站內沒有需要用到 Google Fonts 外部字型資源所提供的英文字型,或是不想要讓網站多花時間連結外部資源,引入 Gooogle Fonts 感覺起來反而比較慢,同時又不想要使用本地端浪費主機空間資源,亦或者覺得根本不需要 Google Fonts,那麼可以選擇直接移除。

4.2.2 替換的方式

  如果覺得 WordPress 引入 Google Fonts 會讓網頁載入的速度變慢,但同時又想要使用 Google Fonts 所提供的字型,那麼可以使用替換的方式而免除移除字型,可以選擇替換成其它提供外部字型資源的網站,或者直接把 Google Fonts 下載到本地端使用。

4.3 修改方式的選擇

  在決定好是要把 Google Fonts 完整移除或者是替換掉其它資源後,可以依照自己較方便的方式來做相對應的更改。如果懂得如何修改 WordPress 程式碼,那麼可以選擇直接修改程式碼;如果不太方便更改 WordPress 的程式碼,那麼可以選擇安裝 WordPress 外掛程式,使用外掛來幫助 Google Fonts 的管理。

  不過不論是修改 WordPress 程式碼還是安裝外掛程式,都各有利弊,以下將說明個個的優缺點,可以自行選擇適合的方式。

4.3.1 修改程式碼

優點

  除非不知道如何修改檔案,否則直接修改 WordPress 程式碼可能是最快的方式,因為不需要安裝任何的外掛程式,省去掉安裝外掛程式的步驟,當然也不必到外掛後台去開啟或關閉 Google Fonts 的功能。

  再者,安裝 WordPress 外掛程式多少都會增加程式碼的運行、功能變數的引用,所以會降低運行 WordPress 網站的效率,可能會降低速度,不過會降低多少就要看外掛程式的品質、功能和安裝的數量而定了。

  所以直接修改程式檔可以免除安裝外掛程式的步驟,也是網站運行最有效率的方式,同時也是最直接修改功能的方法。

缺點

  雖然從 WordPress 中刪除 Google Fonts 程式碼的步驟很簡單和快速,但是只要在 WordPress 自動或手動升級更新後,程式碼又會自動恢復成修改前的樣子,除非此後不再更新 WordPress 程式,否則只要在每次更新升級後就要再重新修改一次程式碼,不然在更新過後 WordPress 又會自動載入 Google Fonts 了。

4.3.2 使用外掛程式

優點

  語修改程式碼比起來,對於初學者或不擅長修改程式碼的使用者來說,使用外掛無疑是較簡單的方式,只要在 WordPress 後臺線上安裝好外掛程式並啟用就可以正常使用了,非常的方便,而且只要沒有把外掛關掉,可以一直持續保有該功效。

缺點

  但由於安裝外掛程式,多少都會消耗到網站資源,引起一些效能的問題,而且禁用 Google Fonts 是一個小小的功能而已,會占用外掛後台的顯示空間。

參考文獻

  1. Wikipedia contributors (2017), “Google Fonts“, Wikipedia.
  2. 360网站卫士团队 (2016),〈网站卫士前端公共库停止运行公告〉,360网站卫士。
  3. Bruno (2014),〈WordPress去除Google字体插件:Remove Google Fonts References〉,Bruno电商技术博客。
  4. Flycan (2017),〈Google Fonts – 中文網路字型推出 5 款免費的中文網頁字體〉,【飛肯設計學苑】教學。
  5. max (2016),〈GOOGLE FONTS – 如何為佈景主題新增中文字型〉,麥克斯與沃普雷司。
  6. RAYKUO (2016),〈WordPress 與 Google Web Fonts〉,RAYKUO’S BLOG。
  7. 小名开开作者 (2014),〈去掉 google font 引用,提高 wordpress 打开速度〉,小名开开。
  8. 知乎用户,〈WordPress如何去除google字体?〉,知乎。
  9. 歪脖骇客 (2014),〈禁止WordPress使用谷歌字体的方法〉,WEB 骇客。
  10. 欲思 (2014),〈wordpress后台禁用Google Open Sans字体提高加载速度〉,欲思博客。

更新紀錄

  1. 2022/05/13,新增多語言版本。



繁體中文