任何主題都適用 WordPress 網頁字體修改好容易

修改設定 WordPress 網站字型 字體

有些人看完做出高質感網站,必須知道的網頁字體應用後,跟我說,不知道該怎麼設定讓網頁呈現 Google 的思源黑體。我決定把設定的部分拿出來好好說明白。

任何主題都通用的 WordPress 的字體修改方式

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

 

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

 

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

 

這個外掛我自己也有使用,他讓你用打開 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 網站字體修改 step5 noto sans

 

基本上這樣的設定優先級應該是最高,到這邊就算完成。但如果遲遲字體修改沒有生效的話,可能是有些主題有鎖字體的優先級,導致我們的修改無效,那我們得這樣子寫,才能讓我們的設定生效:

 

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

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

 

基本上就是把程式碼,貼在你的 CSS 檔案中就可以了。如果沒生效的話,也可能是優先順序的問題,請將程式碼改成這樣。

 

Noto Sans 思源黑體 (正式版)

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

font-family: 'Noto Sans TC',sans-serif !important;

 

這樣就能覆蓋掉本來的優先順序,強制字體設定生效。

 

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

這邊只拿最常用的「思源黑體」做範例,知道怎麼設定後,你就可以依照你的需求,去設定需要的字體,或一次性的設定多個字體,讓系統依照先後順序來抓取。

如果不清楚我說什麼的,先回頭服用這篇吧!做出高質感網站,必須知道的網頁字體應用

上一篇過去的官方網站們:從個人履歷網站到公司網站 下一篇放棄開發「深色模式」網站功能的決策過程與分析

關於作者

黃裕二

黃裕二Perry Huang

財經媒體鉅亨網專案網站PM / 台北數位廣告AE / 巨匠電腦網站前端講師 / 高雄資訊培育協會Dreamaver教師 / 現職造九頑五,參與過網站從製作規劃到行銷的所有工作、融合全面的知識,創立造九頑五致力於帶給客戶更好的網站體驗。