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的Core Web Vitals直接衡量这一点：更小的字体能提升最大内容绘制（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+ 免费字体。