Fontsource：開源自託管字型最佳選擇，Google Fonts 替代方案

說到雲端網頁字型，大部分使用者會想到 Google Fonts，不得不說它確實是非常棒的免費資源，為網站擁有者提供一系列免費、免版稅字型選擇，只要選定字型、樣式再將產生的 HTML 原始碼加入網站後就完成整合，不過 Google Fonts 為人詬病的是對網站性能帶來負面影響，更好的選擇是自行託管字型檔案或使用像是 Bunny Fonts 這類隱私友善的替代方案。

本文要推薦的「Fontsource」是一個開源字型集合，同時也是開放原始碼專案，網站將免費字型打包到單獨的 NPM（套件管理工具）中，以便在網頁應用服務中自行託管、載入需要的字型。

Fontsource 更像是 Google Fonts 自行託管版本的替代方案，當你需要某些字型時可以在網站上搜尋、調整不同的字體大小和樣式進行測試，最終將字型檔案下載使用。除此之外，Fontsource 也和開放式 CDN 服務 jsDelivr 合作，無法自行託管字型檔時也有 CDN 鏈結可直接使用。

Fontsource 收錄超過 1800 種字型（寫這篇文章時是 1825 個字型，幾乎和 Google Fonts 一樣），使用者可以透過網頁進行搜尋、調整預覽測試內容，同時修改字型大小、樣式、行高、字元間距、顏色和透明度等選項。

相較於 Google Fonts 或其他同類服務，自託管字型可以減少額外 DNS 解析、建立 TCP 連線導致的額外延遲，進而顯著提高網站效能，更重要的是沒有隱私問題（Google 會追蹤字型使用情形）。如果要保持字型版本固定的話自託管也是更好的選擇，Google 經常會在沒有通知的情況下推送字型更新。

使用教學

操作步驟

開啟網站，搜尋與篩選字型

開啟 Fontsource 網站後會看到一些熱門字型，介面設計和 Google Fonts、Bunny Fonts 很像，從上方的工具列可以輸入關鍵字搜尋、瀏覽特定類型或語言字型，也可以輸入預覽文字（Fontsource 已內建一些範例）和調整字體大小。

從字型列表右上角切換不同的顯示方式，預設會以熱門字型排序，也能設定為以最近更新、名稱或亂數隨機顯示，點選字型後開啟字型頁面。

瀏覽字型詳情，調整參數

從字型頁面會看到不同字重的即時預覽，在右側可以調整字體大小、行高、字元間距、顏色和透明度等參數，如果是可變字型（Variable Fonts）還會有「Variable Axes」參數可以調整。

點選預覽文字還能輸入各種內容，快速預覽在該字型下的顯示效果。

安裝與下載字型

從右上角可以找到：安裝、下載字型和 CDN 三個選項，在安裝頁面會有各種指令說明，例如 npm、yarn、pnpm、bun ，以程式碼或是 CSS 來導入並使用字型。

點選下載的話就會取得字型檔，如果要自行託管字型的話可以上傳後使用 HTML、CSS 載入（不過這裡就沒有提供範例，可能要自行去搜尋一下稍作修改）。

使用 CDN 快速載入字型（jsDelivr）

若是自行託管字型檔會耗費過多流量，Fontsource 的 CDN 功能是和 jsDelivr 合作，會提供相關程式碼讓使用者快速複製、使用，例如下圖就是顯示的 CSS 範例，看得到字型檔案都會從 CDN 路徑載入。