[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。

Screenshot_022216_040543_PM

禁用 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 的部份

Screenshot_022316_041841_PM

將 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 圓體

 

[WordPress] WordPress 與 Google Web Fonts 有 “ 1 則迴響 ”

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *