最後更新：2026/10/15
一家甜點店的網站想用圓圓的字型配品牌，設計師從免費字型網站下載了一套，放上網站。半年後收到字型公司的存證信函：那套字型只能個人使用，商業網站要買授權。另一家店倒是用了可以商用的字型，但整套字型檔 12 MB 直接放上網站，手機打開首頁要先等字型下載，十秒才看到字。
中文字型在網站上有兩道關卡：授權和體積。授權關係到會不會侵權，體積關係到網站快不快。這篇把兩件事講清楚，最後實際示範把 12 MB 的字型切到 78 KB。
先搞懂：網站的字是客人電腦裡的字
網站的 CSS 寫 font-family: "微軟正黑體"，客人的電腦有這套字就用它顯示，沒有就換下一個。Windows 有微軟正黑體，Mac 和 iPhone 有蘋方，Android 有思源黑體，三個系統各不一樣，所以同一個網站在不同裝置上字長得不一樣，這是正常的。
要讓所有人看到同一套字，就要把字型檔放在網站上讓瀏覽器下載，這叫「網頁字型」或「自架字型」。英文字型一個檔幾十 KB，隨便放；中文字型有兩萬多個字，一個檔動輒十幾 MB，不能隨便放。所以中文網站的常見做法是：內文用系統字（不下載），只有標題或品牌名稱用自架字型，而且要切小。
授權：三種常見的情況
字型是軟體，有著作權。下載之前看清楚授權頁，常見的情況有三種。
第一種是開放字型授權（SIL Open Font License，簡稱 OFL）。可以免費用在個人和商業用途、可以放在網站上、可以修改，唯一的限制是不能把字型檔本身拿去賣。Google Fonts 上的中文字型都是這一種：思源黑體（Noto Sans TC）、思源宋體（Noto Serif TC）；台灣的 justfont 開源的「jf open 粉圓」也是 OFL；LINE 的「LINE Seed TW」也是 OFL，官網寫明可自由用於個人或商業用途，只有字型檔本身不能單獨販售。翰字鑄造的「台北黑體」是以思源黑體改作的免費字型，授權以它下載頁的說明為準。
第二種是「個人免費、商用付費」。很多日本和中國的免費字型站上的字型是這一種，網站是商業用途（有賣東西、有廣告、有公司名稱）就要買。字型站的「免費」常常只是「免費下載」，下載頁的小字才寫用途限制。
第三種是付費字型，例如華康、文鼎、蒙納的字型。買的時候要看是「桌面授權」（只能做圖、印刷）還是「網頁授權」（可以放上網站讓訪客下載），兩種是分開賣的，桌面授權的字型放上網站一樣是侵權。有些字型公司改成訂閱制，網站停止付費後就要拿掉。
一個簡單的判斷方法：找不到授權頁的字型，不要用。
自架字型的 CSS
字型檔準備好之後（下一節講怎麼切小），CSS 這樣寫：
/* 1. 自架字型：字型檔放在自己的網站，用 @font-face 載入 */
@font-face {
font-family: "MIMI Noto";
src: url("noto-sans-tc-subset.woff2") format("woff2");
font-weight: 100 900; /* 可變字型：一個檔案包含所有粗細 */
font-display: swap; /* 字型還沒載完先用系統字顯示，不要空白 */
}
/* 2. 整站的字型順序：自架字型 → 系統有的中文字 → 最後才是通用字體 */
body {
font-family: "MIMI Noto", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
line-height: 1.8;
}@font-face 給字型取一個名字、告訴瀏覽器檔案在哪。格式用 WOFF2，所有現代瀏覽器都支援，而且壓縮率最好。font-weight: 100 900 是可變字型的寫法，一個檔案就有細到粗所有粗細；不是可變字型的話，每種粗細各寫一個 @font-face。font-display: swap 很重要：字型還沒下載完，先用後面的系統字顯示，下載完再換，客人不會看到一片空白。
font-family 的順序是「自架字型、Mac 的蘋方、Windows 的微軟正黑體、Android 的思源黑體、最後才是通用的 sans-serif」。自架字型只切了部分的字，沒切到的字會自動用後面的系統字補上，所以順序要排對。
在 WordPress 裡放：傳統佈景主題把字型檔上傳到子主題的資料夾，CSS 寫在子主題的樣式表；區塊佈景主題從 WordPress 6.5 開始有「字型庫」，在網站編輯器的「樣式 > 字型」可以直接上傳字型檔，不用寫 CSS，自己切好的子集檔也能上傳。
子集化：只留用到的字
完整的中文字型有兩萬多個字，一個網站用到的字大概幾千個，品牌標題用到的可能只有幾十個。把沒用到的字從字型檔拿掉，叫做子集化。我們用思源黑體的可變字型實際切了一次：
| 字型檔 | 大小 |
|---|---|
| 思源黑體 TC 可變字型，原始 TTF | 11.6 MB |
| 同一個檔轉成 WOFF2（只壓縮，沒有拿掉字） | 5.3 MB |
| 只留中日韓統一表意文字的 WOFF2 | 4.2 MB |
| 只留這篇示範頁用到的 217 個字 | 78 KB |
切的工具是免費的 fontTools（Python 套件），一行指令：
pyftsubset NotoSansTC-VF.ttf --text-file=用到的字.txt --flavor=woff2 --output-file=noto-sans-tc-subset.woff2用到的字.txt 放你要保留的字，標題、品牌名稱、常用字都放進去。不會用指令的人，網路上也有線上子集化工具，上傳字型檔和文字就切好。
子集化的字型只能顯示有切進去的字，所以它適合用在內容固定的地方：品牌名稱、固定的標題、首頁的大字。文章內文每天在變，用子集化字型會缺字，缺的字會用系統字補，混在一起不好看，內文用系統字就好。
Google Fonts 的做法可以當參考：它不是給你一個 12 MB 的檔，而是把思源黑體切成兩百多個小檔，CSS 用 unicode-range 標每個檔包含哪些字，瀏覽器只下載頁面用到的那幾個。我們實際抓它的 CSS 來看，思源黑體 TC 一個粗細被切成 108 個檔。這是最省流量的方式，但要連到 Google 的伺服器；在意隱私或連線速度的網站，自己切子集放在自己主機上。
測試結果
我們做了一個示範頁，用上面的 CSS 載入 78 KB 的子集字型，在 Chrome 用電腦和手機寬度各開一次：字型狀態是「已載入」，標題和內文的字型都是「MIMI Noto」，手機寬度沒有橫向捲動。
字型是品牌的一部分，也是速度的一部分
標題用一套有個性的字，網站的氣質就不一樣；但字型檔太大，客人等不到看見它就離開了。授權看清楚、只在固定的地方用自架字型、切成子集、內文用系統字，四件事做到，字型就是加分而不是負擔。配色的選法可以看〈網站配色怎麼選〉，文字的動畫效果看〈CSS 文字動畫與按鈕效果〉。
如果你想要一個從字型、配色到版面都替品牌設計過，而且速度有顧到的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，會替你確認字型授權並處理子集化。MIMI 提供台灣網頁設計服務，全台灣的店家和創作者都可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
