[WordPress] WordPress 與 Google Web Fonts

WordPress 控制台與某些佈景主題會使用 Google Fonts，如果因為某些特殊原因不想使用 online web fonts 可以將其禁用或將 web fonts 下載下來，由自己的 WordPress 網站提供。

所謂的 online web fonts 是指：當你的網站使用了 google web fonts 時，使用者瀏覽你的網站時瀏覽器會自動連線到 google web fonts 伺服器自動下載需要的字型來使用。

好處是字型不會因為作業系統不同而造成顯示的畫面不一樣，而缺點則是因為要下載字型所以網路流量會大一點。

而大陸地區因為 google 服務被完全封鎖封的關係，那會造成在瀏覽有使用 google web fonts 的網站時，速度非常慢。

如何檢查 WordPress 是否使用 google web fonts ?

使用 chrome 瀏覽器的開發者工具 (Developer Tools) 可以很簡單的檢查是否有使用 google web fonts。執行 chrome 進入你的 WordPress 網站與控制台，按下 Ctrl-Shift-I 或 F12 即可啟動開發者工具。

點選 Source 欄位，可以看到下方有 fonts.googleapis.com (web fonts 網站網址)，font family 則為 Open Sans。

禁用 Google WEB fonts

可以在佈景主題的 functions.php 最下方加入下面這段 code：
( ‘open-sans’ 為 google web font 的字型名稱)

 
// Remove Open Sans that WP adds from frontend
if (!function_exists('remove_open_sans')) :
 function remove_open_sans() {
 wp_deregister_style('open-sans');
 wp_register_style('open-sans', false);
 wp_enqueue_style('open-sans', '');
 }
 add_action('init', 'remove_open_sans');
endif; 

加入後使用開發者工具再檢查一次，你會發現 fonts.googleapis.com 不見了，由此可以確認禁用 google web fonts 的這段 code 確實有作用。

下載 Google WEB fonts，改成由自己的網站提供字型

網路有人提供了一個 GitHub project : google-font-download  可以下載 google fonts， google-font-download 是一個 bash script 必需在類 linux 環境執行。

使用方法很簡單， google-font-download 後面加上要 download 的字型名稱即可。要查看有那些字型可下載，可至 Google Fonts 網站查詢。

範例：dl_font.sh script 會從 Google Fonts 網站下載  Open Sans 與 Ubuntu 字型 (300=細體，400=標準，700=粗體，italic=斜體)：字型下載 script：google-font-download

#/bin/bash

# Font in light (300), normal (400), normal italic (400italic), bold (700), and bold italic (700italic),

./google-font-download \
"Open Sans:300" "Open Sans:300italic" \
"Open Sans:400" "Open Sans:400italic" \
"Open Sans:700" "Open Sans:700italic" \
"Ubuntu:300" "Ubuntu:300italic" \
"Ubuntu:400" "Ubuntu:400italic" \
"Ubuntu:500" "Ubuntu:500italic" \
"Ubuntu:700" "Ubuntu:700italic"

下載完成後除了字型之外還會有一個 font.css。

要在 wordpress 中使用下載的字型只需三步驟：

1. 在你的 wordpress 佈景主題資料夾中，新建一個資料夾 fonts 
2. 將下載的字型 (*.eot, *.svg, *.ttf, *.woff, *.woff2) 與 font.css 上傳到新建立 fonts 資料夾
3. 編輯佈景主題的 sytle.css 檔案，在檔案開頭加入 @import "fonts/font.css"; 

完成後就可達到由你自己的 wordpress 網站提供字型的功能。

Google 早鳥網頁的中文字型

Google Fonts 網站雖然提供了數百種字型，但可惜只有英文字型與符號。 中文字型目前只有在 Google 早鳥網頁 有提供仿宋、黑體、楷書、明體、圓體等五種中文字型，目前這些字型都還在測試中，不保證所有字型顯示都沒問題。

早鳥網頁的中文字型一樣可以下載，改由自己的網站提供字型，這裏說明手動下載的方法，舉例以圓體來說明：在 Google 早鳥網頁 最下面找到圓體 Link 的部份

將 Link 網址的 cwtexyen.css 檔下載，並編輯該檔案，其內容如下：

 
/*
 * cwTeXYen (Chinese Traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'cwTeXYen';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}

上面 .eot / .woff2 / .woff / .ttf 就是圓體字型 (四種字型格式)，下載後跟 cwtexyen.css 放在一起，並修改 cwtexyen.css 中字型的網址 ( 刪除 //fonts.gstatic.com/ea/cwtexyen/v3/ 字串，只留下檔名)，改成  ：

 
/*
 * cwTeXYen (Chinese Traditional 圓體) http://www.google.com/fonts/earlyaccess
 */
@font-face {
 font-family: 'cwTeXYen';
 font-style: normal;
 font-weight: 500;
 src: url(cwTeXYen-zhonly.eot);
 src: url(cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
      url(cwTeXYen-zhonly.woff2) format('woff2'),
      url(cwTeXYen-zhonly.woff) format('woff'),
      url(cwTeXYen-zhonly.ttf) format('truetype');
} 

然後將圓體的4個字型檔與 cwtexyen.css 上傳到 WordPress 佈景主題的 fonts 資料夾。編輯佈景主題的 sytle.css 檔案，在檔案開頭加入 @import "fonts/cwtexyen.css"; 

如此就可以由我們自己的網站提供圓體字型。

這是已經下載的 Google 早鳥中文字型與 css 檔：cwtexfangsong 仿宋 、cwtexhei 黑體 、cwtexkai 楷書、cwtexming 明體、cwtexyen 圓體。