WordPress 更改字體:使用 Google 字型

在過去,我們在設定網頁字型時,如果設定的字型在使用者端的電腦沒有安裝那款字型,就只會顯示使用者電腦預設的字型。導致設計師在自己的電腦製作網頁時,設定字型看得很開心,結果使用者端看到的只是細明體。

(幾乎)所有電腦都有的字體,如細明體、標楷體、微軟正黑體等。

然而現在我們可以藉由第三方提供的字型,來讓使用者由第三方位址(下載)顯示字型,這樣就可以確保使用者看到的字型就是我們宣告的字型。

提供字型比較有規模的單位有 Google 的 NOTO 字型,以及 Aaobe 的字型,但是 Adobe 字型有流量的限制,所以這邊只講 Google 的 NOTO 字型。

Google 其實提供非常多種線上字型(參考所有 Google 雲端字型),可是大部分都是英文字型,中文字型只有Noto Sans TC 思源黑體 和 Noto Serif TC 明體。

1以下的例子,當我們還沒設定字型時是細明體。

2 打開「外觀 > 自訂 > 附加的CSS」(不同佈景主題,選單名稱可能略有不同)

3在視窗的「最開頭」加上

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);

body{
font-family: 'Noto Sans TC',serif;
}
4我們可以看到字型已經變為思源黑體

5也可以自己再加上字體粗細和字體大小(數字可以自行調整),如下:

@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);

body{
font-family: 'Noto Sans TC',serif;
font-weight:800;/*字體粗細*/
font-size:20px;/*字體大小*/
}

 

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…