網頁字體是什麼？從挑選到安裝，設計個人品牌網站必讀

最後更新時間：2026-05-30，由 Dean 更新

要換字體卻不知道怎麼做，或是根本不確定自己的網站現在用的是什麼字體，是很多人自己架站過程中才遇到的問題。

這篇文章帶你從頭搞清楚：

1. 網頁字體有哪些選擇？
2. 怎麼挑適合自己品牌的字體？
3. 如何在 WordPress 裡完成安裝和設定？

網頁字體是什麼？如何影響品牌感受？

「網頁字體」是瀏覽器在渲染網頁時用來顯示文字的字型，可以是裝置本身安裝的系統字體，也可以是從外部伺服器下載的 Webfont。

字體不只是把文字「顯示出來」這麼簡單，它所傳遞的「感覺」也很重要。同樣一句話，用無襯線體（Sans-serif）寫出來感覺現代、乾淨；換成有襯線體（Serif）就帶有一種歷史感和重量。

品牌經營者在選字體時，選的其實是品牌給人的第一印象。

字體對網站的影響分 3 個層次：

• 閱讀體驗：字體大小、行距、字重影響用戶能不能順暢讀完你的文章。閱讀不順，跳出率就高。
• 品牌感受：字體傳遞個性。圓潤的字體讓品牌顯得親切，瘦長的字體顯得精緻，粗黑字體則有力量感。
• SEO 間接影響：字體直接影響閱讀體驗，閱讀體驗影響停留時間和跳出率，這些行為訊號是 Google 評估內容品質的依據之一。過大的字體檔案也會拖慢網站載入速度，降低 Core Web Vitals 分數。

網頁字體有哪些類型？

網頁字體大致分 3 種。選哪種取決於你的預算、品牌需求和對效能的要求。

系統字體

系統字體是裝置本身已安裝的字型，瀏覽器直接調用，不需要另外下載字體檔案。

• 優點：完全不影響載入速度，零成本。
• 缺點：不同作業系統的系統字體不同，Mac 預設顯示蘋方，Windows 預設顯示微軟正黑體，視覺效果有差。

CSS 的寫法是用 Font Stack，讓瀏覽器依序嘗試可用字體：

font-family: -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;

這種寫法在 Mac 上顯示 SF Pro，在 Windows 上顯示微軟正黑體，都是品質不差的無襯線體。

適合情境：注重效能、品牌風格要求不高，或網站主要面向台灣用戶。

免費 Webfont：Google Fonts

Google Fonts 是目前最普及的免費 Webfont 服務，提供超過 1,000 款字體。中文字體也有：Noto Sans TC（黑體）和 Noto Serif TC（明體），是目前最常用的 2 款。

只要把 Google Fonts 的連結加到網站裡，使用者開啟網頁時，瀏覽器就會到 Google 那邊抓取字體並顯示在頁面上。

• 優點：免費，設定簡單，字體品質有一定水準。
• 缺點：中文字庫龐大，Google Fonts 雖然有做分批載入優化，仍會對網站效能造成影響。每次載入頁面都需要向 Google 發出對外請求，在某些網路環境下可能拖慢速度。WordPress 有外掛（如 OMGF）可以把字體存到你自己的伺服器，避免這個問題，是目前比較推薦的用法。

適合情境：預算有限、網站以英文或中英混排為主，願意做基本效能優化。

付費 Webfont：Adobe Fonts、Justfont、文鼎、華康

付費 Webfont 是將字體檔案放在伺服器上（自己的或字體廠商的），讓瀏覽器下載。字體的品質和選擇通常比免費服務高出不少，對想建立個人品牌質感特別有幫助。

服務	費用	特色	適合誰
Adobe Fonts	含在 Creative Cloud 訂閱內	中英文字體豐富，設計師常用	已有 CC 訂閱的使用者
Justfont	月費制，約 NT$99 起	台灣品牌，繁體中文品質高	重視品牌質感的個人品牌
文鼎 / 華康	依授權計費	老牌中文字體廠商，字庫最完整	需要完整中文字庫的商業用途

• 優點：字體品質更高、選擇更多，台灣在地中文字體支援也更完整。
• 缺點：需要費用，Justfont 等服務需要定期訂閱；自架的話還需要自行管理字體版本和授權。

初學者最推薦的做法：先從系統字體起步，確認品牌方向後再考慮加入 Google Fonts 的 Noto Sans TC。等到品牌定位更清晰、預算允許時，再升級到 Justfont 或 Adobe Fonts。

網頁字體如何挑選？

字體不是選「好看的」就好。對個人品牌網站來說，有 5 個指標需要依序評估：

指標	評估重點
1. 品牌風格一致性	字體傳遞的個性和你的品牌定位一不一致？
2. 免費或付費	預算允許多少？長期使用的成本怎麼算？
3. 網站效能影響	字體檔案大不大？是否放在外部伺服器？
4. 掉字問題	字庫完不完整？冷僻字或特殊符號會不會顯示不出來？
5. 字重完整度	有沒有你需要的字重（Regular、Medium、Bold、Light）？

1. 「品牌風格一致性」為優先考量

字體是品牌感受的一部分，如果你的品牌走現代極簡風，卻用了帶有復古感的明體，視覺上就會有衝突。字體跟配色一樣，都是品牌視覺識別裡最基本的決策。

2.「掉字」是中文網站的常見問題

中文字庫的數量動輒超過 5,000 個字，許多免費字體只收錄最常用的 2,000 至 3,000 字，如果你的文章裡有罕見用字，那個位置就會「掉字」，顯示成小方塊。如果你的文章主題涉及較冷僻的詞彙，字庫完整度要特別注意。

3.「字重完整度」容易被忽略

如果一款字體只有 Regular 和 Bold，沒有 Medium 或 Light，你在排版時的彈性就會受限。建議至少確認有 4 個以上的字重可以使用。

如何在 WordPress 上使用網頁字體？

如何安裝字體？

WordPress 安裝字體有 3 種方式，依複雜程度排序：

方式一：使用外掛（最簡單）

針對 Google Fonts，推薦使用 OMGF（Optimize My Google Fonts） 外掛。

它可以把 Google Fonts 的字體存到你自己的伺服器上，這樣你的網站就不需要每次都去向 Google 要字體，速度更快，也更穩定。

安裝後進入設定頁面，儲存一次會自動偵測並下載。

---

方式二：手動加入程式碼（中階）

如果你使用子佈景主題或有 functions.php 的存取權，可以直接加入字體的 <link> 標籤：

function enqueue_google_fonts() {
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap'
    );
}
add_action('wp_enqueue_scripts', 'enqueue_google_fonts');

---

方式三：自架字體（進階）

適合使用付費字體或要求最高效能的情境。把字體檔案上傳到伺服器，再用 CSS @font-face 宣告：

@font-face {
    font-family: 'CustomFont';
    src: url('/wp-content/fonts/custom-font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

font-display: swap 這行很重要，它告訴瀏覽器在字體還沒下載完之前，先用系統字體顯示文字，避免頁面出現空白的等待期。

如何設定字體？

字體安裝完之後，要在 WordPress 裡指定它的使用位置。

1. 使用有字體設定的主題（如 Kadence、Astra、GeneratePress）

這些主題的 Customizer（外觀 → 自訂）有字體設定介面，可以直接從下拉選單選擇已安裝的字體，分別為標題、內文、選單等元素套用不同字體，不需要寫任何程式碼。

如果還沒選好主題，可以參考 WordPress 佈景主題推薦。

---

2. 使用 Elementor 等頁面建構器

Elementor 有內建字體管理系統，可以直接連接 Google Fonts 或上傳自訂字體，套用在個別元素上。設定的地方在「Elementor → Editor → Custom Elements → Fonts」。

---

3. 用 CSS 手動設定

進入外觀 → 自訂 → 附加的 CSS，輸入：

body {
    font-family: 'Noto Sans TC', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3 {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
}

這是針對標題與內文字體，最基本的設定，先把這個搞定，再根據需求調整細節。

關於網頁字體的常見問題

結語

字體選好、裝好之後，你的網站在視覺細節上已經比大多數人做得更仔細了。

網頁設計這塊還有排版、配色、主題選擇，每個細節都會影響訪客留下來的意願。如果你想系統性地把網站視覺整個做好，可以從網頁設計教學繼續往後看。

已經有網站、想確認整體方向是否正確、或是想有人陪你一起把這些細節落實，可以到 DR.DEAN 形象所 了解服務。