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

你也許曾遇過這種情況？精心挑了一套很有質感的英文字體放進網站，版面立刻有了高級感，但打開手機一測，網站卻變得卡頓，LCP 那一欄紅通通一片。問題常常不是字體本身難看，而是載入它的方式出了問題。

替網站做 SEO 健檢時，字型往往是最後才被想到的效能變數。版面、圖片、配色都磨到位了，woff2 卻沒壓縮、子集化也沒做，最大內容繪製可能因此變慢。英文字體不只是美感問題，也涉及效能與授權；Core Web Vitals 是 Google 眾多排名訊號中的一小部分，不能把字體選擇直接等同排名高低。這篇整理三十款可用字體與載入做法。

60 秒重點摘述

• 英文字體分三大家族：Serif（襯線）講究閱讀流暢與信任感、Sans-serif（非襯線）是網頁與 UI 的工作馬、Display 與 Script（展示與手寫）負責標題的情緒。
• 選字體前先問三件事：用在什麼場景、要不要同時支援中英文、商用授權清不清楚。
• 字體檔案是容易被忽略的效能成本。未經處理的字體若一次載入多個字重，會增加行動裝置的下載量。
• 本篇整理三十款實務上常放進工具箱的英文字體，從免費的 Google Fonts 到付費精品都涵蓋，再附上載入優化的實戰做法。

英文字體為什麼會拖垮你的 LCP

先講一個很多人沒意識到的事實：字型載入可能影響 Core Web Vitals 裡的 LCP（Largest Contentful Paint，最大內容繪製）。當你的主標題用的是一套還沒下載完的字體，瀏覽器要嘛把文字隱藏起來等字體（FOIT，Flash of Invisible Text），要嘛先秀預設字體再切換（FOUT，Flash of Unstyled Text），兩種都會讓使用者體驗打折。Google 會綜合評估頁面體驗；Core Web Vitals 是眾多排名訊號的一部分，不宜單獨解讀（見 Google 2020 年 5 月的 〈Evaluating page experience〉 一文）。

那為什麼字體特別容易出包？因為它跟圖片不一樣，圖片你會記得壓縮，字體你常常設計師給什麼就掛什麼。一支原始的英文字體 OTF 檔動輒一百到三百 KB，如果一次載入三四個字重（weight），等於在首屏塞了將近 1MB 的字型資源。web.dev 的文件（2026 年）講得很直白：當頁面載入時間從一秒拉長到三秒，跳出率會顯著上升。

再把場景拉到手機上。全球網頁流量有很高比例來自行動裝置（Statista 的統計，2026 年 4 月），Google 也已全面採用行動優先索引（Mobile-first Indexing），主要使用手機版內容進行檢索與索引；這不是額外的行動版排名加分（見 2023 年 10 月的 Google 官方說明）。手機的網路與運算資源可能較受限，載入多支字體會增加負擔，因此要在實機上測試。

於是，接下來先講效能，再進入字體清單。多數文章會先丟出幾十款字體讓你挑，挑完才發現網站變慢，再回頭刪字體、調載入。把順序倒過來，先理解字體的效能成本，你挑字的時候就會自動保守一點，不會無意識地把七八套字重全部掛上去。

實務上，建議在調整字體策略的前後各跑一次 PageSpeed Insights 或 Lighthouse，把 LCP、CLS、FCP 的數字記錄下來對比。有了前後數字，你才知道刪掉某支字體或加上 font-display 到底換到了多少效能，而不是憑感覺判斷。數字會說話，它也能在跟設計師溝通時派上用場，把抽象的「網站變慢」翻成具體的指標變化。

換個方式想：字體載入本質上是在跟圖片、腳本、樣式表搶同一條網路頻寬。你每多掛一支字體，等於從這條共享頻寬裡切走一塊給字體用。在桌機光纖環境下，多兩三支字體可能感覺不出差別，但場景換成 4G 甚至訊號不穩的行動網路，每一支字體的代價都會被放大。於是必須反覆強調，字體決策要從行動版的視角出發，別只看桌機預覽就下結論。

選字體前的三個判斷

在丟出三十款字體清單之前，先把判斷框架建立起來。直接抄清單是最危險的事，因為脫離場景談字體好壞，等於脫離體質談藥效。下面從三個維度來篩字體。

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

正文閱讀、介面文字、大標題、Logo 標準字，這四種用途對字體的要求完全不同。正文要的是小字號下的清晰度與行距舒適；介面要的是窄字距與多字重的完整度；標題要的是辨識度與個性；Logo 標準字則往往需要能夠手動微調字距與筆畫。你可以把這想成挑衣服：上班、運動、宴會、睡覺，不會是同一件。把用途先講清楚，字體的候選名單立刻會縮小一半。

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

多數台灣網站是中英混排。英文字體選得再漂亮，如果沒有對應的中文字體搭配，視覺就會斷層。中文筆畫密度高、結構複雜，跟英文字體的視覺重量需要互相平衡。一個常見的失衡是英文用了細緻的襯線體，中文卻配了厚重的黑體，結果英文看起來飄、中文看起來悶。如果你還沒決定中文字體，這部分我們另外拆解在中文字體設計攻略，把中英文視為一組配對來思考，分開挑很容易在組合那一刻翻車。

判斷三：授權清不清楚

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

三大字體家族速覽

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

家族	視覺特徵	最適合	經典代表
Serif（襯線）	字元筆畫末端有裝飾線，筆畫粗細對比明顯	長文閱讀、編輯內容、講究信任感的品牌	Playfair Display、Merriweather
Sans-serif（非襯線）	無襯線，筆畫粗細較一致，結構簡潔	介面、網頁正文、現代感品牌	Inter、Roboto、Montserrat
Display／Script（展示與手寫）	個性強烈，適合大字號展示	標題、海報、Logo、情緒營造	Bebas Neue、Pacifico

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

還有一個觀念要先打預防針：一個網站不需要，也不應該同時用上好幾個家族。三十款是給你挑選的候選名單，不是要你全部裝上去。成熟的網頁字體策略，通常是兩套字體配對就撐起全站，最多再加一套展示體用在特定專題或活動頁。家族越多，一致性越難維護，載入成本也越高，這是一條越精簡越有力量的路。

襯線體 Serif：閱讀流暢度與信任感的來源

襯線體有一種很有意思的雙重性格：它既是幾百年來書籍與報紙的閱讀標準，又是當代時尚與編輯品牌的最愛。關鍵在於你選的是哪一種襯線。過渡型（transitional）與舊風格（old style）襯線適合正文，展示型（display）襯線適合標題。底下列出的九款，一併標註它們各自擅長的位置。

字體	性格	最適合	取得方式
Playfair Display	高對比、優雅、編輯感強	時尚與雜誌風標題、婚禮品牌	Google Fonts（OFL）
Merriweather	專為螢幕閱讀設計，字腳扎實	網頁長文正文	Google Fonts（OFL）
Lora	溫潤均衡，介於正式與文學之間	部落格正文、說故事型內容	Google Fonts（OFL）
EB Garamond	古典 Garamond 復刻，人文氣息濃	文學、藝文、古典品牌	Google Fonts（OFL）
Cormorant	極高對比、纖細、時裝秀感	奢華精品、時尚標題	Google Fonts（OFL）
PT Serif	人文襯線，寬度寬鬆好讀	中英混排正文、新聞	Google Fonts（OFL）
Crimson Pro	書籍排版風，字距舒適	出版、學術、長文	Google Fonts（OFL）
Libre Baskerville	針對網頁正文優化的 Baskerville	網頁正文、文件型頁面	Google Fonts（OFL）
Source Serif 4	Adobe 出品，中性、結構清晰	介面搭配、技術文件	Google Fonts／Adobe Fonts（OFL）

這九款裡，如果只能挑兩支放進工具箱，實務上會選 Merriweather 顧正文、Playfair Display 顧標題。一個解決閱讀，一個解決顏值，兩支就涵蓋了八成場景。如果你做的是精品或時尚，Cormorant 值得認真考慮，但它只在大字號才好看，縮小就會糊，所以千萬別拿它當正文。EB Garamond 則是那種「看起來不搶眼，但放上去整個網站氣質就對了」的字體，適合藝文與內容深度高的網站。

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

非襯線體是網頁設計的主力。它在小字號下更清晰、在低解析度螢幕上更銳利，而且多數現代非襯線體都提供了完整的字重家族（從一百的細體到九百的黑體），讓你靠一套字體就能撐起整個視覺層次。底下這十三款，以下將它們分成介面工作馬與個性幾何兩類，方便你對號入座。

介面工作馬：放進正文與 UI 不會出錯

字體	性格	最適合	取得方式
Inter	為螢幕 UI 而生，字距特徵明確	介面、儀表板、SaaS 後台	Google Fonts（OFL）
Roboto	Google 的系統字，中性均衡	通用網頁、Android 介面	Google Fonts（OFL）
Open Sans	人文無襯線，友善親切	政府、教育、非營利	Google Fonts（OFL）
Source Sans 3	Adobe 出品，中性俐落	技術文件、企業內網	Google Fonts／Adobe Fonts（OFL）
Work Sans	怪誕體（grotesque），乾淨有個性	編輯型網站、新媒體	Google Fonts（OFL）
DM Sans	Google 設計團隊出品，留白多、現代	科技品牌、極簡網頁	Google Fonts（OFL）
Karla	怪誕體，帶點小俏皮	設計師作品集、獨立品牌	Google Fonts（OFL）

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

字體	性格	最適合	取得方式
Montserrat	幾何無襯線，源自布宜諾斯艾利斯招牌字	標題、品牌、海報	Google Fonts（OFL）
Poppins	圓潤幾何，友善正向	兒童、教育、生活風格	Google Fonts（OFL）
Manrope	現代幾何，帶圓角，質感高	科技新創、現代品牌	Google Fonts（OFL）
Raleway	纖細優雅，細字重極美	時尚、精品、時裝	Google Fonts（OFL）
Nunito	圓體，柔和沒有距離感	健康、教育、親子	Google Fonts（OFL）
Lato	溫暖人文，波蘭設計師作品	個人品牌、內容站	Google Fonts（OFL）

十三款聽起來很多，其實工作邏輯很單純：介面與正文交給 Inter（或 Roboto），品牌標題交給 Montserrat 或 Manrope，想走圓潤親切路線就用 Poppins。把這個組合記起來，等於掌握了非襯線體八成的實戰需求。Inter 是實務上最常預設的選擇，它的字距與 x-height（小寫字母高度）經過特別調校，在十幾 px 的小字號下依然清晰，這對介面設計是決定性的優勢。

選非襯線體時，實務上會特別看一個指標：字重的完整度。一支只有 Regular 和 Bold 兩個字重的字體，能建立的視覺層次很有限；如果有從一百到九百的完整字重家族，你就能靠同一套字體做出標題、副標題、正文、註解的多層結構，這在維護一致性上非常有價值。上面這十三款，多數都提供五個以上的字重，Inter 和 Roboto 甚至有完整的可變字體版本，等於一支檔案就能覆蓋所有字重需求。

如果你正在用 Divi 這類主題架站，多數都支援直接上傳自訂字體，可以參考我們的Divi 自訂字體上傳教學把這些字體掛上去。重點是把字體格式準備齊全（至少 woff2 與 woff 各一份），並在上傳後到主題的排版設定裡，把標題與正文分別綁定對應的字體與字重，這樣視覺層次才會真正落地，免得掛了字體卻沒套用到對的位置，白忙一場。

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

這個家族的字體情緒濃度最高，但也最容易用過頭。一個鐵則請記住：展示體與手寫體只用在標題、短句、裝飾位置，絕對不要放進正文。它們只在大字號才好看，縮小就會糊成一團，而且手寫體的連筆在小字號會嚴重干擾閱讀。

字體	性格	最適合	取得方式
Bebas Neue	高瘦濃縮全大寫，海報感強	海報、運動、音樂標題	Google Fonts（OFL）
Oswald	濃縮無襯線，窄而有力	新聞標題、側欄、標籤	Google Fonts（OFL）
Anton	超粗濃縮，衝擊力強	活動、促銷、Banner	Google Fonts（OFL）
Abril Fatface	高對比展示襯線，復古華麗	雜誌封面、時尚標題	Google Fonts（OFL）
Pacifico	毛筆手寫，休閒隨性	衝浪、咖啡、生活品牌	Google Fonts（OFL）
Dancing Script	優雅連筆手寫	邀請卡、婚禮、優雅品牌	Google Fonts（OFL）
Lobster	粗筆手寫，復古招牌感	餐飲、復古品牌	Google Fonts（OFL）
Caveat	像真人手寫筆記	個人筆記風、插畫標註	Google Fonts（OFL）

這八款裡，Bebas Neue 跟 Oswald 是實務上最常拿來做標題的兩支，因為它們在窄版面（像手機直幅）特別好用，能在有限寬度塞進更多字而不換行。Anton 則是當你需要純粹的視覺衝擊時才出場，它超粗的筆畫在促銷 Banner 與活動頁很有力量，但用太多會讓網站看起來像大聲公，節制是關鍵。如果你做的是 Logo 標準字，展示體可以當起點，但最終通常需要手動調整字距與筆畫，這部分可以參考我們的Logo 標準字設計技巧。手寫體則要特別小心版權與過時感，Pacifico 與 Lobster 這類字體因為太常見，已經帶有一點套版感，用之前先想想它有沒有真的幫你的品牌加分，還是只是看起來熱鬧。

下載與授權的地雷區

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

一個常見誤解是「在 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（前身是 Typekit）收錄了大量精品字型，授權邏輯是訂閱制。只要你的 Adobe Creative Cloud 訂閱有效，就能在網頁與印刷上商用，而且一個帳號能同時啟用數千款字體，對設計師來說很方便。問題在於：一旦停止訂閱，你已經上線的網站如果還掛著 Adobe Fonts 的字體，會直接失效，文字退回預設字體。對長期經營的網站來說，這是一個隱性的依賴風險，等於把字體的命運綁在一個每月續費的服務上。

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

像 MyFonts、Fontspring 這類平台上的獨立鑄字廠（type foundry），是採逐授權購買。桌機授權、網頁授權、App 嵌入授權是分開計價的。網頁授權通常依每月頁面瀏覽量（pageview）分級，例如五十萬 PV 一個級距、一百萬 PV 一個級距。買之前先估好流量，否則網站紅了反而觸發超量，要回頭補授權費。老實說，對多數中小網站來說，Google Fonts 的 OFL 字體已經夠用，付費精品字型的價值在於獨特性與完整字重家族，當你品牌走到需要差異化識別的階段，再投資也不遲。

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

這一節是整篇文章技術含量最高的部分，也是將字體當成效能變數的核心論點。不管你選的字體多好看，如果載入方式錯了，等於把美感建築在糟糕的使用者體驗上。底下五個手法，依照影響力排序，從最能立竿見影的開始。

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

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

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

英文字體不像中文動輒上萬字，但完整的英文字體仍包含大小寫、數字、標點、連字（ligature）與多國語言字元。多數網站不一定用得到整套。透過子集化（subsetting），只保留站內需要的字元，通常能縮小檔案；縮減幅度會隨字型與字元集而異。glyphhanger、subfont 等工具可掃描既有頁面並產生子集，但動態內容、表單輸入與日後新增文字也要納入字元範圍，避免缺字。

手法三：壓成 woff2

woff2 是目前壓縮率最高的網頁字體格式，比 woff 小約三成，比原始 TTF 或 OTF 小更多。現代瀏覽器全面支援，沒有理由不用。多數字體來源都會提供 woff2，沒有的話用 Python 的 fonttools 套件轉檔也很快。一個簡單的原則：上線的字體如果是 ttf 或 otf，就等於在免費送效能給對手。

手法四：預載關鍵字體

用 <link rel="preload"> 提前下載首屏一定會用到的關鍵字體，可讓瀏覽器提早發出請求。但預載不是越多越好，過度預載會搶佔其他資源的頻寬，反而拖慢整體。原則是只預載首屏確定會使用的字體檔，並用瀑布圖確認是否真的改善載入；也可搭配 font-display: swap 控制文字顯示行為。

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

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

可變字體 Variable Fonts：一支檔案搞定所有字重

傳統字體是一個字重一支檔案，想要 Regular、Medium、Bold 三個字重，就要載入三個檔案。可變字體（Variable Fonts）把整個字重軸（weight axis）壓縮進同一支檔案，你只要透過 CSS 的 font-weight 指定數值，瀏覽器就會即時算出對應的字重樣貌。這對效能與設計彈性都是大利多。

可變字體能用單一檔案涵蓋連續字重，但不保證一定比少數幾支經過子集化的靜態字體更小。若設計只用 Regular 與 Bold，靜態檔案可能更精簡；若需要多個字重或額外軸向，可變字體通常更有優勢。應比較實際傳輸大小與使用範圍後再選。

前面推薦的清單裡，Inter、Roboto、Source Sans 3、Manrope、Work Sans、DM Sans 都有完整的可變字體版本，在 Google Fonts 下載時勾選 Variable 選項即可取得。使用上要注意兩件事：第一，指定字重時盡量落在設計師定義的範圍內，過度的數值（例如 550、850 這種非標準值）雖然技術上可行，但未必經過設計師最佳化，視覺可能失衡；第二，可變字體也支援寬度（width）、斜體（italic）、光學尺寸（optical size）等額外軸向，這些是進階玩法，等基本字重用熟了再探索也不遲。

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

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

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

網站類型	標題字體	正文字體	為什麼這樣配
電商與零售	Montserrat	Inter	標題俐落有現代感，正文清晰耐讀，轉換導向
內容與媒體	Playfair Display	Merriweather	編輯感強，兼顧標題顏值與長文閱讀
科技與 SaaS	Manrope	Inter	幾何現代，介面友善，傳遞創新感
時尚與精品	Cormorant	Lora	高對比優雅，襯線營造奢華氣質
餐飲與生活	Lobster 或 Pacifico	Open Sans	手寫體帶溫度，正文親切好讀
教育與親子	Poppins	Nunito	圓潤友善，降低距離感
作品集與設計師	Bebas Neue	Karla	標題強烈有個性，正文留白現代

這張表不是死規矩。同一種網站類型，換一個品牌人格就可能換一組字體。但它給你一個不會出大錯的起點，至少不會把餐廳網站配成科技公司的冷調。如果你連整體版面的層次都想一起規劃，更詳細的寫在排版設計實戰技巧，把字體選擇放進更大的視覺系統裡整體思考，別孤立地挑字。

字體配對的三個實用原則

單一字體很難同時撐起標題與正文，多數好網站都是兩套字體配對的結果。配對有它的內在邏輯，底下三個原則能幫你避開八成的災難。

原則一：一靜一動。標題字體選有個性的（展示型或高對比襯線），正文字體選安靜中性的（人文或幾何無襯線）。兩個都搶戲，視覺就會打架，讀者的注意力會在兩套字體之間游移，反而讀不進內容。

原則二：對比要夠。標題與正文的字體差異要大到一眼能分辨。可以是家族差異（襯線配非襯線），也可以是字重差異（粗體標題配細體正文）。差異不夠，配對就失去意義，等於用了兩套看起來差不多的字，白白的多了載入成本。

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

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

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

字重階層。一個頁面至少要能看出三層視覺重量：標題最重、副標題中等、正文最輕。對應到字重，可以是標題用 700（Bold）、副標題用 500（Medium）、正文用 400（Regular）。很多人會把整個網站統一用 400，結果所有文字看起來一樣重，讀者抓不到重點，等於把視覺層次這個免費的導覽系統浪費掉了。建立階層不需要換字體，光靠字重差異就能做到，這也是可變字體特別有用的原因。

行距（line-height）。英文正文的行距一般建議落在字號的 1.4 到 1.6 倍之間。行距太窄，眼睛換行時容易跳錯行，閱讀疲勞上升；行距太寬，段落鬆散，看起來像在讀投影片而不是文章。標題的行距則要收緊，大字號如果還用 1.5 倍行距，兩行標題之間會出現尷尬的空隙，看起來不夠扎實。一個實用原則是：字號越大，行距倍數越小。

字距（letter-spacing）。大標題的字距可以稍微收緊（負值），讓字母彼此靠近，視覺更凝聚、更有氣勢；小字號的輔助文字（標籤、按鈕、面包屑）則可以稍微放寬字距（正值），提升辨識度。全大寫的標題尤其需要放寬字距，否則字母黏在一起會很難讀。這些微調看似瑣碎，但累積起來就是業餘與專業的界線。如果你想把這些細節放進完整的版面系統，前面提過的排版設計觀念會給你更完整的脈絡。

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

補一個很實用的情境：你在某個網站看到一套好看的英文字體，想用在自家網站，卻不知道名字。這時與其瞎猜，不如用工具直接辨識。我們寫過一份Fonts Ninja 字體辨識教學，它能讓你在瀏覽任何網站時即時抓出對方用的字體名稱、字重與級距，是設計師與行銷人必備的逆向工程工具。另一個常見做法是 WhatFont 這類瀏覽器擴充功能，hover 上去就能看到字體資訊，操作更輕量，適合快速取樣。

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

字體使用的五個常見地雷

看完這麼多原則，這裡將它濃縮成一張地雷表。這些是實務上在各類網站反覆出現的錯誤，每一個都會直接傷害使用者體驗或效能，挑字體的時候請對照著避開。

地雷	後果	怎麼修
一次掛五六個字重	首屏載入爆量，行動版 LCP 卡紅	只留實際用到的兩到三個字重，其餘刪除
標題與正文用同一支字體同字重	視覺層次扁平，讀者分不清主從	至少靠字重或家族做出對比
把展示體或手寫體放進正文	小字號糊成一團，完讀率崩跌	展示體只留給標題與短句
忘記設 font-display	文字在字體下載前隱形，空白空窗	統一加上 font-display: swap
沒做子集化直接上原始 ttf	檔案體積虛胖三到五倍	子集化並輸出 woff2

這張表的本質只有一句話：字體的每一個決定，都要同時過「美感」與「效能」兩關。只過美感關的網站好看但慢，只過效能關的網站快但無聊，兩者都過，才是現代網頁設計的及格線。當你養成這個雙關檢查的習慣，上面這些地雷自然就不會踩。

你的下一步行動清單

字體選擇是一個會持續影響網站體驗與效能的決策，值得你花時間一次做對。底下是建議的行動順序，照著走一遍，你的字體策略會比八成的網站更扎實。

1. 盤點現況。打開你網站的開發者工具，到 Network 面板篩選 Font，看看現在到底載了幾支字體、各多大。很多人這一步做完就會嚇一跳，發現自己不知不覺掛了十幾個字重。
2. 決定中英配對。先定中文，再依中文的視覺重量挑對應的英文家族，確認兩者放在一起不會失衡。這一步不要急，因為它決定了整個網站的氣質。
3. 挑兩支就夠。一支標題、一支正文。把「通通都要」的衝動壓下來，字體越多，效能與一致性越難顧，維護成本也越高。
4. 做子集化與 woff2。把選定的字體壓到只留用得到的字元，輸出 woff2，這一步往往能省下七成以上的檔案體積。
5. 設 font-display 與預載。加上 swap、預載首屏關鍵字體，把 CLS 與 LCP 一起顧好，讓字體載入不犧牲使用者體驗。
6. 確認授權。商用前花一分鐘看授權條款，免費的確認是 OFL，付費的確認流量級距涵蓋你的網站，避免日後被追溯侵權。

把這六步走完，你的字體策略會比八成的網站更扎實，而且這套流程是可重複的，未來每次改版都能套用同樣的檢查邏輯。當你能同時駕馭美感與效能，字體就不再是隱形的地雷，而是真正為品牌加分的資產。如果你想把字體放進更完整的視覺系統裡思考，品牌色彩挑選、版面層次、整體網頁設計的觀念都值得一起看，把每一個變數都顧到位，網站的質感才會從細節裡長出來。字體是讀者第一眼接收到的訊號，把這個訊號做對，你的內容才有機會被好好讀完。