30 款英文字體推薦與下載：襯線、非襯線到手寫體

英文字體是網頁設計的一部分，會影響網站的辨識、閱讀與品牌感受，也帶來授權和載入成本。挑選時，把真實標題、正文與中英混排一起放入版面，再用目標裝置確認效果，比只看字體展示圖更實用。

這篇整理三十款 Google Fonts 字體候選，並比較 Adobe Fonts 與商業授權的使用方式。效能部分會檢查實際字體請求、備援字體與版面位移；Core Web Vitals 與搜尋表現相關，但字體選擇仍應先服務閱讀與操作。

選字重點

• 先依正文、介面、標題或品牌識別的用途篩選，再測試真實文字。
• 三十款候選都可從 Google Fonts 取得，授權文件與版本仍應隨專案保存。
• 中英混排要一起比較字級、字重、行距與標點。
• 只載入需要的字型資源，並測試載入失敗時的備援呈現。

英文字體如何影響載入與版面穩定

當最大內容元素是文字時，字體載入與顯示策略可能影響 LCP；替換備援字體也可能造成 CLS。先顯示可讀的備援文字是一種取捨，應搭配字體指標與實測評估。Google 的頁面體驗公告說明相關背景，現行做法則應以最新文件與實際頁面資料核對。

字體檔案大小會隨字元、字重、軸向與格式而異。先在 Network 面板確認實際下載量、時機與快取情況，再決定要減少哪些資源；web.dev 的速度與使用體驗說明可作為背景閱讀。

Statista 的全球行動流量資料能提供市場背景，本站的測試範圍仍應以自己的使用者與裝置資料為準。Google 主要使用手機版內容建立索引，見Google 官方說明；字體則應在目標手機和網路條件下實測。

先盤點效能預算和授權，再選擇字體清單，能較早排除無法部署或載入成本過高的候選。

調整前後以相近裝置、網路和頁面條件重複測試 LCP、CLS 與 FCP，搭配瀑布圖查看差異。單次 Lighthouse 分數有波動，不能直接把所有變化歸因於字體。

字體與圖片、腳本和樣式表都可能占用下載時間，但宣告一支字體不代表瀏覽器一定會下載：還要看頁面是否使用、快取和載入時機。先用 Network 瀑布圖確認首屏實際請求，再在目標手機與網路條件下比較。

選字體前的三個判斷

先用用途、語言與授權三項條件縮小候選範圍，再把字體放進實際版面比較。

判斷一：這套字主要用在哪裡

正文重視長段閱讀與字元辨識；介面需要清楚的標籤、數字與狀態；標題可以探索較強烈的字形；Logo 標準字則可能需要調整字距或輪廓。先確定用途，才能判斷哪些字重、語言與字元功能真正需要。

判斷二：要不要同時搭中文

如果網站有中英混排，兩種字體要放在同一段真實文字裡試排，觀察字面大小、筆畫密度、字重與標點；單看英文字樣不足以決定配對。中文字體的挑選可參考中文字體設計攻略。

判斷三：授權清不清楚

字體下載了不代表可以隨便用。免費不等於商用免費，Google Fonts 上的字體多採 SIL Open Font License（OFL），但仍要查看各家族授權。Adobe Fonts 的網頁字體透過訂閱與官方嵌入碼提供；停止符合資格的訂閱後，Adobe 不再向網站提供這些 web fonts，瀏覽器會退回備援字體。至於已輸出並嵌入字體的 PDF、圖片或影片，則依授權與檔案型態另行判斷。付費字型的 webfont 授權也可能依流量或網域計價。

三大字體家族速覽

進入正式清單前，先用一張表把三大家族的定位講清楚。這張表可以當成選字的起點，幫你快速把需求對應到正確的家族。

底下將三十款字體依家族整理，每一款都附上實戰上常用的場景與取得方式。需要先聲明：字體的好壞很主觀，這裡提供的是實戰取向的判斷，不是放諸四海的真理。同一款字體放在時尚網站很加分，放在科技儀表板可能就顯得做作。

先從少數家族建立一致的排版；一個家族也能用字級、字重和間距兼顧正文與標題。確有品牌、語言或內容需要時再增加家族，並檢查下載成本。

襯線體 Serif：正文與展示用途要分開測試

襯線體的筆畫對比、字面大小與細節差異很大。以下九款涵蓋正文與展示方向，表內用途是挑選起點，仍需在實際字級與裝置上比較。

可先用 Merriweather 比較正文閱讀、Playfair Display 比較標題，再依品牌需要試 Cormorant 或 EB Garamond。高對比的細筆畫在小尺寸時尤其值得檢查，應以實際呈現決定用途。

非襯線體 Sans-serif：網頁與 UI 的工作馬

非襯線體常用於介面與正文，但是否清楚仍取決於字形、字級、字距與顯示環境。下面十三款分成介面與幾何風格兩組，供你選取候選；字重與語言支援以下載版本為準。

介面候選：用實際標籤、數字與正文比較

個性幾何：適合標題與品牌識別

介面可以先比較 Inter、Roboto，標題可試 Montserrat、Manrope 或 Poppins。把易混淆字元、數字、長標籤和中英混排一起測試，比只看英文字母展示更能判斷適用性。

字重選擇由內容層級決定，Regular 與 Bold 也能搭配尺寸和間距建立清楚版面。可變字體能提供連續範圍，但仍要確認實際軸向、字重上限和傳輸大小。

Divi 的官方自訂字體上傳教學列出 TTF 與 OTF 格式；不同版本、WordPress 權限與上傳流程可能有其他限制。可先參考Divi 自訂字體上傳教學，上傳後確認字體和字重確實套用到預期元素。若另以 CSS 自行託管 WOFF2，需另行確認部署與授權條件。

手寫與展示體 Display／Script：標題與品牌的情緒引擎

展示體和連筆手寫體可先用於標題、短句或識別，再測試小尺寸與長段文字。不同字款的可讀性差異很大，若筆畫過細、字元難辨或連筆擁擠，就應縮小用途或另選正文候選。

Bebas Neue、Oswald 與 Anton 可用來探索較窄或較強烈的標題，但實際換行仍取決於內容與字級。Pacifico、Lobster 等手寫方向可先試短句，再比較是否符合品牌語氣；製作標準字時可參考Logo 標準字設計技巧，並確認輪廓修改的授權。

下載與授權的地雷區

選完字體，接下來是很多人忽略、卻最可能讓你賠錢的環節：授權。底下把幾個常見來源的授權邏輯說清楚，讓你下載的時候心裡有底。

一個常見誤解是「在 Google Fonts 下載的字體，所以怎麼用都可以」。OFL 通常允許使用、修改與嵌入，也禁止單獨販售字體檔；若授權文件列有 Reserved Font Name，修改版重新發布時還要遵守名稱限制。最穩妥的做法，是保留授權文件並查看該字體家族的實際條款。

Google Fonts：免費但不是完全沒規則

Google Fonts 上的字體多採 SIL Open Font License（OFL），也有其他開放授權。OFL 通常允許商用、修改與再散布，但不能單獨販售字體檔；修改版名稱是否受限，要看授權文件有沒有列 Reserved Font Name。使用前確認個別字體的授權欄位與附帶文件。若想本機託管，可讀WordPress 本機託管 Google Fonts 教學，並一併評估快取、更新與隱私需求。

Adobe Fonts：確認方案、嵌入方式與交接帳號

Adobe Fonts 的字庫與使用範圍依帳號方案而異。網頁字體須使用官方嵌入碼，客戶網站應由客戶自己的有效訂閱供應；取消訂閱後，網站會改顯示備援字體。已依授權輸出的圖像、轉外框文字或嵌入文件，則和持續載入的網頁字體分開判斷。

付費精品字型：逐授權購買

購買商業字體時，要分別核對桌面製作、網頁載入、App 嵌入及客戶交付的權利。MyFonts 與 Fontspring 的條款可能涉及不同的期限、頁面瀏覽量、網域及授權主體；直接閱讀該家族的 EULA 與購物車條件，再保存訂單和授權文件。

讓字體不拖慢網站的載入手法

下面五項是可檢查的載入策略。先用實際請求與效能資料找出瓶頸，再選適合的調整項目。

手法一：用 font-display 控制渲染行為

在 @font-face 裡加上 font-display: swap，瀏覽器會先用備援字體顯示文字，字體下載完成再替換，可縮短文字不可見的時間，但替換時也可能造成版面位移。可搭配 size-adjust、ascent-override、descent-override 與 line-gap-override 校準備援字體指標，再用實測確認 CLS。

手法二：子集化，只留用得到的字元

子集化可減少不需要的字元資料，但要先確認授權允許修改與自行託管。SIL 的 OFL FAQ 將移除字形視為修改；若家族有 Reserved Font Name，散布子集時還需檢查命名限制。規劃範圍時，除了現有內容，也要涵蓋表單、動態資料、多語文字和未來更新；產出後檢查缺字、連字與標點。

手法三：壓成 woff2

WOFF2 是現代網頁常用的壓縮字體格式，可先採用供應商提供的版本。若自行轉檔，應確認授權允許，再比較實際傳輸大小；舊瀏覽器需求、CMS 上傳限制與備援字體也要納入部署。

手法四：預載關鍵字體

用 <link rel="preload"> 可讓首屏確定會用到的字體提早發出請求，但預載會占用資源，而且不遵從 CSS 的 unicode-range 篩選；不要把多個分段字型一律預載。先從實際使用的一支關鍵檔案測試，檢查瀑布圖與 LCP，再搭配 font-display 與備援字體評估文字顯示和版面位移。

手法五：評估自架與 CDN 的取捨

Google Fonts 透過 CDN 提供，設定簡單，但會增加外部連線；現代瀏覽器的快取分區也讓跨網站共用快取的效益有限。自架（self-host）可控制快取與子集化，也減少對第三方字體請求的依賴，代價是要自行處理授權、更新、快取標頭與格式。哪一種更快要用實際瀑布圖與 Core Web Vitals 測試，並非自架必然勝出。更多觀念可搭配網頁字體 Webfont 完全指南一起看。

可變字體 Variable Fonts：用軸向管理連續變化

可變字體把設計者提供的變化軸放在同一字型檔中。若包含 wght 軸，可用 CSS font-weight 選擇支援範圍內的字重，並在 @font-face 宣告對應範圍；實際軸向依字體而異。

可變字體能用單一檔案涵蓋支援範圍內的連續字重，但不保證比少數經過子集化的靜態檔更小。若只用 Regular 與 Bold，可同時量測兩支靜態檔和可變檔的總傳輸量；若要使用較多字重或其他軸向，也要確認該檔案實際提供的範圍，再比較檔案大小與快取條件。

Inter、Roboto、Source Sans 3、Manrope、Work Sans 與 DM Sans 都有可變版本，下載時應核對檔名、軸向與範圍。550、850 這類中間字重，只要落在支援範圍內，就是可變字體正常的使用方式。寬度、斜體與光學尺寸等軸向則要逐款確認，不能假設每個檔案都具備。

可變字體很適合做連續、細緻的響應式字重調整，而且不需為每個中間值載入額外檔案。傳統靜態字體也能用 media query 切換已載入的字重，只是可選級距較少，並非完全做不到裝置適應。

為不同網站類型配一組字體

講了這麼多，落到實務還是要能做決策。底下這張配對矩陣，是依不同網站類型整理的起手組合，你可以當成預設值，再依品牌調性微調。

表中的配對是設計提案，適合拿真實內容比較，再依品牌、語言和裝置調整。若要連同版面層級一起規劃，可以接著看排版設計實戰技巧。

字體配對的三個實用原則

同一家族或跨家族配對都能建立排版。下面三項可以幫助你檢查各自角色，而不是要求每頁都使用兩套字體。

原則一：確認各自用途。若標題採用較強烈的展示字，正文可先搭配易讀的候選；也可以沿用同一家族，以尺寸、字重和留白區分層級。

原則二：讓差異有目的。兩套字體可以形成對比，也可以服務不同語言或字元需求。先說清楚新增家族解決什麼問題，再比較它的載入成本。

原則三：先確認中文搭不搭。英文字體配得再完美，如果搭配的中文字體視覺重量失衡，整體還是會怪。例如英文細襯線配中文粗黑體，常常出現英文偏輕、中文偏重的失衡感。把中英文放在一起試，比單看英文準。中文字體的選擇本身也是一門學問，中文筆畫密度高，放大縮小的視覺重量變化跟英文完全不同，這點在實作時務必實際預覽，不要憑想像。

字重、行距與字距：把選好的字體用對

選對字體只是上半場，怎麼用它才是決定質感的關鍵。同一套 Inter，有人排起來像頂尖科技品牌，有人排起來像沒整理過的 Word 文件，差距常常出在字重階層、行距與字距這三個變數有沒有調好，跟字體本身的關係其實沒有想像中那麼大。

字重階層。可以先試標題 700、副標題 500、正文 400，再依字形與內容調整。層級也能靠尺寸、位置和留白建立；每個角色都應在實際裝置上檢查清晰度。

行距。英文正文可從約 1.4 到 1.6 倍字級開始比較，再依字形、行長與內容密度調整。標題也要測試換行與多語情況，並確認使用者增加文字間距時，內容不會裁切或重疊。

字距。字距調整應配合字型原有的 kerning、字級和大小寫。可比較大寫標籤或大標題的不同間距，但不要套用到連筆字而破壞連接；最終用實際文字檢查辨識和換行。

看到喜歡的字體，怎麼知道叫什麼

遇到喜歡的網站字體，可先參考Fonts Ninja 字體辨識教學，或用瀏覽器開發者工具查看文字的樣式與實際渲染字型。工具適合協助辨識可選取的網頁文字；圖片或轉外框圖形通常需要另外查找來源，取得名稱後仍要核對授權。

培養字體辨識的直覺，是字體素養的基本功。一開始你可以靠工具輔助，看久了就會發現自己能憑筆畫特徵猜出家族：襯線的粗細對比、無襯線的終端造型（開口或閉口）、字母 a 與 g 的單層或雙層結構，這些都是辨識線索。這個能力一旦建立起來，你看競品網站、參考範本、甚至路邊招牌時，都會自動在腦中拆解它的字體構成，挑字的速度與精準度都會跟著提升。

字體使用的五個常見地雷

以下表格用來整理可觀察的問題與下一步檢查，不以字體數量直接判定頁面好壞。

把授權、閱讀與載入資料放在同一份檢查中，能讓設計與開發更容易討論取捨。每次改動後，記錄實際改善與尚待處理的問題。

你的下一步行動清單

下面六步可用於新網站，也可作為既有網站的字體盤點流程。

1. 盤點請求。在 Network 面板查看字體來源、大小、下載時機和快取。
2. 測試中英混排。比較真實標題、正文、數字與標點的字級和視覺重量。
3. 確認家族用途。保留有明確用途的家族、字重與軸向。
4. 檢查授權。確認商用、網頁載入、修改、子集與交付條件，保存文件。
5. 調整載入。依授權與平台能力比較 WOFF2、子集、font-display 和必要預載。
6. 重新驗證。檢查缺字、備援呈現、LCP、CLS，以及不同裝置的閱讀。

完成盤點後，把字體來源、授權、用途和測試結果記在交付文件，方便日後更新。若要延伸到整體識別，可搭配品牌色彩挑選與版面層級一起比較，讓文字、顏色和內容形成一致的閱讀體驗。