在 WordPress 中加入 Google 中文字型

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

在網路上搜尋免費中文字體字型,可以查到一些解決方案,例如採用線上字型服務 JustfontTypekit,不過通常會有流量的限制,超過額度就需要付費。如果不想要那麼麻煩,也可以直接使用「微軟正黑體」,我個人認為還滿漂亮的拉,不過對於沒有該字體的裝置,就發揮不出效果。因此,跟大家分享 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

請支持《傑瑞窩在這》原創文章。原文標題:在 WordPress 中加入 Google 中文字型,原文網址:https://jerrynest.io/wordpress-google-fonts-chinese/

這裡我使用 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"";

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


參考資料

樂於分享、盡情玩耍的全端工程師。長期關注資訊安全、雲端運算與網路行銷等議題,曾獲得玉山黑客松金牌,擔任過軟體測試實習生、技術文案寫手。

6 個回應

  1. 不好意思我是自學剛從痞客邦將文章放到WP,我想請問我想要新增圓體改變我的所有文章字體,我是否只需要按照您說的下載jetpack的plug in然後在末端增加google font提供的語法,不需要動到wordpress 的原本style.css就可以了? 謝謝!網站: http://www.wandertalks.com

    • 您好
      不需要更動到wordpress原本的style.css唷
      祝你修改順利~~

  2. Warren Huang Reply

    謝謝分享經驗, 由於我不熟悉CSS.只好把font-family都改掉了, 已經能顯示正黑體了!

發表迴響