如何在本機託管字型，而不是使用 Google Fonts

為什麼要自行託管 Google Fonts？

Google Fonts 讓良好的排版變得容易。加入一個 stylesheet、選擇幾種字重，然後發布頁面。多年來，這一直是小型團隊合理的預設做法。

取捨在於，每位訪客的瀏覽器都會聯絡第三方服務，以取得字型 CSS 和字型檔。這會帶來兩個後果。

第一，它會為渲染增加外部依賴。如果字型 CSS 很慢、被封鎖，或在使用者所在地區或網路中無法使用，你的頁面就會等待或退回備援字型。

第二，它會形成隱私權問題。一次字型請求可能會向第三方揭露使用者的 IP 位址、user agent、referrer policy context，以及時間資訊。Google Fonts 表示它不會透過 Fonts API 設定 cookies，但「沒有 cookies」不等於「沒有個人資料」。在 GDPR 下，IP 位址在特定情境中仍可能是個人資料。

自行託管字型並不代表每個網站都自動需要這麼做，本文也不是法律建議。但對歐洲網站、公部門網站、醫療、教育、金融，或任何想減少不必要第三方請求的團隊來說，本機託管通常是更乾淨的選擇。

如果做得好，它也常常能帶來效能收益。關鍵在於「做得好」。把六個字型檔複製到 /assets/fonts/，然後在每個頁面全部載入，可能會比使用託管服務更糟。如果你想了解更廣泛的效能脈絡，我們先前關於為什麼 web fonts are still the easiest performance win on most sites 的文章涵蓋了常見的浪費模式。

自行託管後會改變什麼

當你以一般方式使用 Google Fonts 時，你的頁面會這樣做：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

瀏覽器會先從 fonts.googleapis.com 請求 CSS，接著從 fonts.gstatic.com 下載字型檔。

當你自行託管時，頁面應該從你自己的網域請求 CSS 和字型檔：

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

這會移除第三方字型請求。它也讓你必須負責選擇檔案格式、快取標頭、備援字型，以及更新。

這份責任值得認真看待。字型位在關鍵渲染路徑上。糟糕的字型設定可能導致文字不可見、版面位移，以及緩慢的首次渲染。

步驟 1：稽核你實際使用的內容

在下載任何東西之前，先列出網站真正需要的字型家族、字重、樣式和字元集。

一個典型的行銷網站可能需要：

• Regular 400 用於內文
• Semibold 600 或 bold 700 用於標題和按鈕
• Italic 400，僅在設計確實使用斜體時需要
• 僅 Latin 字元集，除非網站支援更多語言

對舊的設計系統預設值保持懷疑。許多網站載入 300、400、500、600、700、斜體和多種 script，只是因為曾有人在字型選擇器中勾選過它們。

在瀏覽器 DevTools 中，開啟 Network 面板，以「font」篩選，重新載入頁面，並檢查哪些檔案被請求。然後檢查你的 CSS 中 font-weight 的使用情況。如果你的 CSS 從未使用 300，就不要託管 300。

如果你稍後要檢視影響，Lighthouse 可以提供協助，但不要把它的分數視為全部。把它當成診斷工具，而不是裁判。我們另有一份關於 reading a Lighthouse report without panicking 的指南，在排定字型修正優先順序時很有用。

步驟 2：下載正確的字型檔

Google Fonts 提供開源字型。你可以從 Google Fonts 網站或相關字型專案 repository 下載它們。請檢查授權條款，但大多數 Google Fonts 都以 SIL Open Font License 或 Apache License 等開放授權發佈。

在網頁上，優先使用 WOFF2。它受到現代瀏覽器廣泛支援，且通常比 TTF 或 OTF 小很多。在 2026 年，直接向瀏覽器提供 TTF 對公開網站來說很少有充分理由。

合理的目錄結構如下：

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

使用具描述性的檔名。六個月後，font.woff2 會很惱人。inter-latin-600.woff2 雖然無趣，但很有用。

如果你的網站使用 build system，請把來源字型放在清楚的位置，並讓 build pipeline 將最佳化後的檔案複製到公開 assets 目錄。

步驟 3：在適當情況下子集化字型

子集化是指移除你不需要的字元。完整字型可能包含 Latin、Cyrillic、Greek、Vietnamese、符號，以及許多 OpenType 功能。如果你的純英文 landing page 只需要 Latin 字元，子集可以大幅縮小檔案。

常見做法有兩種：

1. 使用字型提供者或 repository 提供的預建子集。
2. 使用字型工具自行產生子集，例如 fonttools 的 pyftsubset。

對許多團隊來說，預建 Latin 子集已經足夠。自訂子集化適用於非常受限的頁面，例如文字有限的單一活動頁，或字元覆蓋範圍可預測的產品 UI。

多語網站要小心。缺少 glyph 會造成備援字型混用，看起來可能像壞掉，並影響可讀性。如果你支援多種語言，請將字型子集對應到語言路由，而不是在所有地方強制使用一個極小的子集。

步驟 4：撰寫你的 @font-face 規則

一個最小的本機設定如下：

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

這裡有幾個細節很重要。

多數內容型網站請使用 font-display: swap。它會告訴瀏覽器快速顯示備援文字，然後在 web font 抵達時替換。這能避免最糟糕版本的 FOIT：不可見文字閃現。

設定明確的備援字型堆疊。如果自訂字型失敗，使用者仍應取得可讀的文字。備援字型不是事後才補上的東西；它們是設計的一部分。如果你需要重新檢視尺寸、行長和內文選擇，請從 a practical guide to readable type on the modern web 開始。

正確對應字重。如果你的 CSS 要求 font-weight: 500，但你只定義了 400 和 700，瀏覽器可能會合成中間字重。這不一定總是糟糕，但可能看起來不一致。

步驟 5：移除外部 Google Fonts 呼叫

加入本機字型 CSS 後，請從 templates 中移除舊的遠端呼叫。

尋找：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

也請檢查：

• CMS 平台中的 theme settings
• Page-builder typography panels
• 第三方 widgets
• Tag managers
• 舊的 CSS imports，例如 @import url('https://fonts.googleapis.com/...')

最後一項很常見。字型使用 CSS @import 通常對效能更差，因為它會延遲探索。如果你自行託管，請直接在主要 CSS 或較早載入的字型 CSS 檔中定義字型。

隱私權工作常失敗，是因為團隊修正了顯而易見的 template，卻漏掉 scripts、widgets 和 legacy embeds。同樣的模式也會出現在 consent 工作中；如果你正在更廣泛地減少第三方接觸面，我們的 what changed for cookies in 2026 指南會是實用的搭配閱讀。

步驟 6：設定快取標頭

字型檔是靜態 assets。如果其檔名已版本化或包含內容雜湊，就應積極快取。

良好的 production header 是：

Cache-Control: public, max-age=31536000, immutable

只有在檔案變更時 URL 也會變更的情況下，才使用長效 immutable caching。例如：

inter-latin-400.a8f3c2.woff2

或版本化路徑：

/fonts/v2/inter-latin-400.woff2

如果你覆寫 /fonts/inter-latin-400.woff2 卻不變更 URL，有些使用者可能會保留舊檔很長一段時間。通常沒問題，直到它變成問題。版本化可避免這個問題。

也請用正確的 MIME type 提供字型：

Content-Type: font/woff2

多數現代 hosting platforms 會自動處理這件事，但仍值得確認。

步驟 7：只考慮預載關鍵字型

預載可以幫助瀏覽器更早發現重要字型：

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

請謹慎使用。預載首屏主要文字字型，而不是每一種字重。過度預載會與 CSS、圖片和 JavaScript 競爭。

即使是 same-origin fonts，也請在字型預載上加入 crossorigin。字型擷取使用 CORS mode，省略它在某些設定中可能造成重複下載。

如果不確定，就測試。不要因為檢查清單這麼說，就盲目套用 preloads。

步驟 8：測試隱私權和效能

測試很直接。

開啟 DevTools，在停用快取的情況下重新載入頁面，並在 Network 面板篩選：

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

你應該看到字型檔由你自己的網域提供，且沒有 Google Fonts 請求。

接著以 cold cache 和 warm cache 測試。第一次造訪時，字型應該只下載一次。之後造訪時，視瀏覽器而定，它們應來自記憶體或磁碟快取。

檢查字型替換時是否產生版面位移。如果標題跳動，代表你的備援字型 metrics 與 web font 差異太大。你可以選擇更接近的備援字型，或使用較新的 CSS font metric overrides，例如 size-adjust、ascent-override、descent-override 和 line-gap-override，來減少可見位移。這些較進階，但對精緻介面很有用。

最後，請在 private browsing 或啟用 content blockers 的情況下測試頁面。自行託管的一個好處是，隱私工具較不容易意外封鎖你的排版。

應避免的常見錯誤

託管太多字重

這是最常見的失敗。兩種字重通常足夠。三種通常已經很多。除非你有很強的理由，五種字重通常是設計系統異味。

忘記斜體

如果你的內容使用真正的強調，請載入真正的斜體檔。合成斜體可能看起來很差，尤其是在長篇 editorial content 中。

保留舊的 Google CSS link

這會讓目的落空。遷移後，除非另一個元件正在注入，否則不應有任何字型請求送往 Google。

提供字型但沒有長期快取

自行託管讓你擁有控制權。請善用它。字型是長快取生命週期的理想候選。

忽略法律和文件工作

如果你的 privacy policy 先前提到 Google Fonts 或第三方字型載入，請在遷移後更新它。如果你維護 data-processing inventory，也請一併更新。技術變更與合規紀錄應保持一致。

<!-- tool-cta:start -->

💡 試試這個： 使用 Webfont Generator 將你從 Google Fonts 下載的 TTF 檔案轉換為可自行託管的 WOFF2 以及 CSS。

<!-- tool-cta:end -->

簡單的遷移檢查清單

1. 列出你實際使用的字型家族、字重、樣式和 scripts。
2. 下載 WOFF2 檔案並確認授權。
3. 如果網站的語言需求有限，請子集化字型。
4. 加入本機 @font-face 規則並使用 font-display: swap。
5. 移除所有 Google Fonts link、preconnect 和 @import references。
6. 從你自己的網域提供字型，並使用長效快取標頭。
7. 只有在測試支持時，才預載最重要的首屏字型。
8. 在 DevTools 中確認沒有 Google Fonts 請求殘留。
9. 如有需要，更新隱私權文件。

自行託管字型不是光鮮亮麗的工作。它是一種小型基礎設施清理，可降低依賴風險、改善隱私權狀態，並提供更可預測的渲染。這通常值得花上一兩個小時。