WordPress Font Issue – 中英文字型解決方案

WordPress Font Issue 讓網站的內容，中英文字都有各自的字型，這樣可以增加網站內容的閱讀性，同時提升網站的質感。

如何在 WordPress 網站套用中文字型，我分享過非常多的方法。對於多數中文內容的網站來說，這是可以提升網站質感最快也是最容易的方法。不過對於網站內容大量英文出現的網站來說，這樣的規劃又讓版面太單調了一些。所以，今天要跟大家分享一下如何讓中文呈現繁體中文字型，英文則呈現我們想要的英文字型，有興趣的朋友不要錯過了接下來的內容。

 

WordPress Font Issue

• 今天示範的內容，佈景主題使用的是很受歡迎的 Astra。
• 跟往常的示範文章一樣，整個修改的過程，我們需要透過子佈景主題來建置，如果還不曉得或是沒有使用子佈景主題的朋友，可以參考之前的文章。
• Astra 佈景主題之所以受到這麼多人喜愛，就是在於它的相關設定非常方便使用，免費版本就提供字型的設定，當然也包括繁體文字型 Google Noto Sans TC 與 Noto Serif TC 繁體中文字型。如果是中文為主的網站，可以直接設定網站字型為 Noto Sans TC 或是 Noto Serif TC 繁體中文字型。
• 不過我們今天示範的是中英文都很需要的網站內容，所以字型設定這裡不要變動，採用網站預設的 Default System Font 就好。

 

• 接下來我們就到 Google Fonts 選擇我們需要的英文字型與中文字型。
• 以今天示範的文章來說，我們選擇了 Noto Serif TC、Noto Sans TC 繁體中文字型與 Lobster 英文字型。

 

• 複製佈景主題資料夾下的 header.php 檔案到子佈景主題資料夾。這個步驟可以透過 Child Theme Configurator 子佈景主題外掛程式來建置，也可以手動透過 FTP 自己上傳，兩種方法擇一使用就可以。
• 接著編輯這個 header.php 檔案，在 </head> 之前插入以下字型語法。

• 再來就是設定字型的式樣（CSS）語法，我們可以編輯子佈景主題資料夾下的 style.css 檔案，也可以在外觀的自訂/附加的式樣檔案，同樣的兩種方法擇一使用就可以。請填入以下式樣（CSS）語法：

• 編輯完成以後存檔，就可以看見中英文各自呈現的效果了。

 

結論

中英文字型適用的方法不難，每一位網站設計人員都可以依照這個方式，設計出更多字型組合來套用。希望今天的文章大家會喜歡，或是還有什麼其他的意見，也歡迎大家一起來討論。