修改 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")
font-family: 'Noto Sans TC',sans-serif;

 

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

 

WordPress 網站字體修改 step4 輸入字體程式碼
WordPress 各種主題通用的修改網頁字型方式,修改好的畫面如上

 

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

 

WordPress 網站字體修改 step5 noto sans

 

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

將語法改成最高優先級

字型修改遲遲沒有生效的話,可能是有些主題有鎖字體的優先級,導致我們的修改無效,那我們得如下再做點修改,才能讓我們的設定生效:

WordPress 網站字體修改 step6 字體強制套用

方法二、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")
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")
font-family: 'Noto Sans TC',sans-serif !important;

 

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

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

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

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

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