5-4 網頁字型導入 – Webfont

最後更新日期: 2023 年 2 月 21 日

一般來說，使用者看的網頁中的字型，會因為作業系統或是瀏覽器預設而不同。比如說微軟正黑體或者是 Apple 蘋方體，就是電腦跟手機常見的預設字型。

所以我們可能會在網站設計稿上，使用了某些字型，但是使用者在瀏覽這個網頁的時候，看不到效果，因為他們的電腦不一定有安裝這套字型。所以在這個單元會來分享，要怎麼將網頁上導入字型讓使用者可以看到。

Webfont

如果你有跟深入的去使用佈景主題的話，可能會發現有些佈景主題，可以在編輯器裡，看到有許多字型選項。問題來了！很多字型按了之後沒有反應，這是為什麼呢？因為大多數的 WordPress 佈景主題，預設給的都是英文字型，套用在中文上就會無效。

因此我們在剛開始架站的時候，容易碰到明明套了版型，卻整個網頁都長歪掉，很大原因就是出在字型不支援中文的緣故。那麽要怎麼在網站上使用中文字型呢？我們會需要利用 網頁字體 Webfont 來達成。這是一個基於網路雲端的字型嵌入技術，可以讓使用者瀏覽網頁的時候，在有連網的狀態下，直接將網頁中的文字置換成指定字型。

安裝字型

在這之前，我們會建議安裝 Header Footer Code Manager 這個外掛。

我們這邊以 justfont 提供的網頁字型服務舉例。justfont 提供了有一個月的試用額度，並且有部分網頁字型可以體驗看看，而就算是之後要用年授權，費用也不算太貴。

👉 justfont 連結

登入之後我們就可以在字型列表中，找我們想要使用在網頁上的字型。

找到之後就點選加入 Webfont ，接著在右上角有個新增專案。

填寫上我們要授權網站的基本資訊。

確定網頁字體有加入之後，點選導出 JS 的程式碼，並將Production 這段 code，複製起來。

我們回到剛剛安裝的外掛新增程式碼片段。將剛剛複製的貼到最下面的文字欄位後，按儲存。

程式碼片段類型記得選 JavaScript 。加入之後，我們就可以將要換字型的地方做替換了。

那除了 justfont 以外，相關的網頁字型服務都是類似這樣的做法，比如說 Adobe Fonts 或 Google Fonts，都可以找到一些中文的網頁字型，透過這樣的方法來安裝。

順帶一提，一個網站可以套用多個網頁字型，不過不建議這樣做，太多字型也會影響網頁瀏覽速度。

以上就是這個單元對於網頁字型的介紹與中文字型的使用方法。字體會影響排版、易讀性和你整個網頁的風格，所以選擇一個好的字型也是一個重要的一環，別忘了考慮進去囉！