If you're serving TTF fonts on your website, you're sending roughly 30% more data than you need to. WOFF2 delivers the exact same typeface in a significantly smaller file, and every modern browser supports it. Here's how to convert — and why it matters for your site's performance.
為什麼使用WOFF2？
WOFF2（Web Open Font Format 2.0）使用 Brotli 壓縮將字型檔案縮小約 30% 相較於 TTF，且無品質損失。字型字形、提示、字距調整及所有排版功能均完整保留。當瀏覽器載入 WOFF2 檔案時，會解壓縮為與原始 TTF 相同的資料。
效能影響是真實的。字型是渲染阻塞資源 — 瀏覽器會在字型載入完成前不會繪製文字。120KB 的 TTF 轉換為 84KB 的 WOFF2，可讓文字更快顯示，特別是在行動網路連線下。Google 的核心網頁體驗指標直接衡量此點：較小的字型能改善最大內容繪製時間（LCP）並減少字型切換造成的累積佈局偏移（CLS）。
瀏覽器支援普遍。Chrome、Firefox、Safari 和 Edge 均支援 WOFF2。唯一不支援的瀏覽器是 Internet Explorer 和非常舊的 Android 瀏覽器——兩者全球流量均低於 1%。
如何轉換
在 CSS 中使用 WOFF2
一旦您擁有 WOFF2 檔案，請在樣式表中引用它。首先列出 WOFF2，並提供 TTF 回退以確保最大相容性：
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}font-display: swap 指令告訴瀏覽器立即顯示預設文字，並在自訂字型載入完成後替換，消除字型載入期間的不可見文字。
字型授權合規性
許多商業字型授權包含限制將字型檔案上傳至第三方網路服務的條款。這造成一個問題：您需要將字型轉換為 WOFF2 以提升效能，但大多數轉換工具要求上傳字型至伺服器。
當然，始終檢查您字型授權的具體條款。但Morph的本地運作性質消除了最常見的合規性問題。
其他字型轉換
Morph 還支援 OTF 轉 WOFF2、WOFF 轉 WOFF2、TTF 轉 OTF，以及 TTF、OTF、WOFF 和 WOFF2 之間的其他所有組合。需要 免費 字型開始？瀏覽 Morph 字型庫中的 1,500+ 種免費字型。