修改 WordPress 網頁字型好 Easy！網頁質感 UP 大提升！

有些人看完做出高質感網站，必須知道的網頁字體應用後，跟我說，不知道該怎麼設定讓網頁呈現 Google 的思源黑體。我決定教大家幾個 WordPress 設定字型程式碼的方法！基本上所有主題都通用！

方法一、通用的 WordPress 的字體修改方式（推薦）

有些 WordPress 佈景主題支援加入程式碼，可以用來加入修改網站字型的程式碼。但每個人用的主題都不同，有些人有支援、有些沒有。

而也不是每個人都會到 Theme 原始檔案中去做程式修改，因此我教一個不管什麼主題，大家可以用的設定方式，只要跟著做，就可以設定成功。

下載「Code Snippets」外掛程式

首先為了要將程式碼加到網站之中，請先為你的 WordPress 下載安裝一個外掛：Code Snippets

這個外掛我自己也有下載，是 WordPress 上非常好用的一款外掛程式！「不用更改 WordPress 佈景主題，就能加入程式碼到網站之中」非常的實用。

下載並且啟用之後，會看到左邊選單多了一個「程式碼片段」，我們選擇「全部程式碼片段」。

接著你會看到，他已經幫你產生了各種程式的範例，因為我們要修改的是網站的 CSS 因此我們點擊 CSS 的範例進去。

加入思源黑體字型的設定語法

然後我們來回憶一下，如果要加入 Google 的思源黑體，語法是：

Noto Sans 思源黑體 (正式版)

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
body{
  font-family: 'Noto Sans TC',sans-serif !important;
}

我們複製這兩行 CSS 語法，將它們貼到插入程式的地方如下圖。

然後記得儲存+啟用，回到「全部程式碼片段」你會看到這個樣子，表示這段程式碼是有啟用的！如果不想用了也可以關閉。

基本上這樣的設定優先級應該是最高，到這邊就算完成，如果有裝快取外掛，記得清除網站快取之後再看效果。

方法二、WordPress 自訂附加 CSS 修改方式

使用方法一修改完成的，不用繼續再看方法二、三噢！

先到 WordPress 後台 -> 外觀 -> 自訂

選擇自訂選項最下方的「附加的 CSS」。（如果佈景主題沒提供此選項，請使用方法一、三）

然後將下方程式碼加入 CSS 設定之中，並按下發佈即可完成 WordPress 字型修改為「思源黑體」。
Noto Sans 思源黑體 (正式版)

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
body{
  font-family: 'Noto Sans TC',sans-serif !important;
}

方法三、WordPress 原始檔修改法、切版網站通用

將下方程式碼，貼在你的 Theme 資料夾中的 style.css 檔案中就可以了。

可到 WordPress 後台「外觀 -> 佈景主題編輯器」中，就能找到 style.css 檔案，並進行程式碼的添加。

Noto Sans 思源黑體 (正式版)

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
body{
  font-family: 'Noto Sans TC',sans-serif !important;
}

結論：舉一反三、剩下的就交給你的創意

教學以最常用的「思源黑體」為範例，知道怎麼設定後，可以用同樣方法去設定其他字體。

程式碼也可設計為一次性的設定多個字體，讓系統依照先後順序來抓取。如果不清楚我說什麼的，先回頭服用這篇吧！做出高質感網站，必須知道的網頁字體應用

如果改完後發現有些字體有變更到，有些沒變更到！那可能網站主題有優先級的鎖定問題，可以試試我這邊提供更強力一點的程式碼：

Noto Sans 思源黑體 CSS 設定程式碼

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
body, p, span, h1, h2, h3, h4, h5, h6{
  font-family: 'Noto Sans TC',sans-serif !important;
}