在 WordPress 中加入 Google 中文字型

使用 WordPress 的好處之一，就是有很多佈景主題可以讓我們套用，只是這些主題多半都是外國人所設計，對於中文字體的支援沒有那麼理想。

在網路上搜尋免費中文字體字型，可以查到一些解決方案，例如採用線上字型服務 Justfont、Typekit，不過這些服務通常都有流量限制，超過額度就需要付費。

如果不想要那麼麻煩，也可以直接使用「微軟正黑體」，我個人認為還滿漂亮的拉，不過對於沒有該字體的裝置，就發揮不出效果。因此，跟大家分享 Google Web Fonts，他沒有流量或次數限制，只要加幾行程式碼就完成設定了，非常簡單！

設定步驟

由於「思源黑體」目前算是測試版本，所以我們進入 Google Fonts Early Access 頁面

Google Fonts: Early Access：https://www.google.com/fonts/earlyaccess

在 Google Fonts 的頁面中，搜尋中文的字體 (Chinese Traditional)，會看到有提供 6 種中文字體，分別為：

• 仿宋體 cwTeXFangSong (Chinese Traditional)
• 黑體 cwTeXHei (Chinese-traditional)
• 楷體 cwTeXKai (Chinese Traditional)
• 明體 cwTeXMing (Chinese Traditional)
• 圓體 cwTeXYen (Chinese Traditional)
• 思源黑體 Noto Sans TC (Chinese Traditional)

網頁上就有安裝步驟了，加入一行 CSS import，接著在標籤中加入 font-family。

這裡我使用 Jetpack 的 CSS 樣式編輯器，將思源黑體加進佈景主題中！ 編輯 CSS 檔案很多方式，可以直接修改原始碼，或是安裝修改 CSS 的外掛 (例如我用的 Jetpack CSS 樣式編輯器)。

建議還是透過外掛做全局的修改比較好，因為通常佈景主題釋出更新後，舊的 CSS 檔案會被覆寫，如果更動的地方很多，那每次都要做修改會很麻煩。

可以依據想要更換字型的標籤做添加，如果要將所有都換掉，可以參考原本的 CSS 檔案，將 h1,h2,h3… 等等一拖拉庫的標籤都加上新的 font-family，就可以覆寫過去囉。

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

不過 Jetpack 目前似乎有個小問題，將 import 貼進去後，他會轉為 String，但當你再更新一次時，又會在 String 兩邊加個雙引號，因此每次更新都要做修改，以免設定無效。

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import 'http://fonts.googleapis.com/earlyaccess/notosanstc.css';
@import ""http://fonts.googleapis.com/earlyaccess/notosanstc.css"";

原先應該是第一行，設定完成會變第二行，如果再更新一次會變成第三行。

參考資料

• GOOGLE FONTS – 如何為佈景主題新增中文字型
• Google Fonts 推出「思源黑體」中文網頁字型，改善網頁文字顯示效果