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

修改設定 WordPress 網站字型 字體

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

方法一、通用的 WordPress 的字體修改方式(推薦)

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

 

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

下載「Code Snippets」外掛程式

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

 

WordPress 網站字體設定 step1 下載 code snippets

 

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

 

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

 

WordPress 網站字體修改 step2

 

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

 

WordPress 網站字體修改 step3

 

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

然後我們來回憶一下,如果要加入 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 網站字體修改 step4 輸入字體程式碼
WordPress 各種主題通用的修改網頁字型方式,修改好的畫面如上

 

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

 

WordPress 網站字體修改 step5 noto sans

 

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

 

 

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

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

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

WordPress 後台佈景主題自訂附加 CSS 加入字型

 

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

WordPress 後台佈景主題自訂附加 CSS 加入字型 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 後台佈景主題自訂附加 CSS 加入字型 CSS 語法
上面本來的一堆英文不用理會,找個空白處把程式碼加進去即可

方法三、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;
}

 

WordPress 後台佈景主題編輯器
上面本來的一堆英文不用理會,找個空白處把程式碼加進去即可

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

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

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

 

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

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;
}

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇過去的官方網站們:從個人履歷網站到公司網站 下一篇網路行銷不是只有下廣告!行銷的力量從網站而起!

嗨!歡迎來到造九 😊 打聲招呼吧!