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.
Tại sao lại WOFF2?
WOFF2 (Web Open Font Format 2.0) sử dụng nén Brotli để giảm kích thước file font khoảng 30% so với TTF, mà không làm giảm chất lượng. Các ký tự font, hinting, kerning và tất cả các tính năng typographic được bảo tồn nguyên vẹn. Khi trình duyệt tải file WOFF2, nó sẽ giải nén thành dữ liệu giống hệt file TTF gốc.
Ảnh hưởng hiệu năng là thực tế. Các phông chữ là tài nguyên chặn việc render — trình duyệt sẽ không vẽ văn bản cho đến khi phông chữ hoàn tất tải. Một TTF 120KB trở thành WOFF2 84KB có nghĩa là văn bản xuất hiện nhanh hơn, đặc biệt trên kết nối di động. Các chỉ số Core Web Vitals của Google trực tiếp đo lường điều này: phông chữ nhỏ hơn cải thiện Largest Contentful Paint (LCP) và giảm Cumulative Layout Shift (CLS) từ việc chuyển đổi phông chữ.
Hỗ trợ trình duyệt là toàn diện. Chrome, Firefox, Safari và Edge đều hỗ trợ WOFF2. Các trình duyệt không hỗ trợ chỉ có Internet Explorer và các trình duyệt Android cũ kỹ — cả hai đều dưới 1% lưu lượng truy cập toàn cầu.
Cách chuyển đổi
Sử dụng WOFF2 trong CSS
Sau khi có tệp WOFF2 của bạn, tham chiếu nó trong stylesheet của bạn. Liệt kê WOFF2 đầu tiên với một fallback TTF để tối đa hóa tính tương thích:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}Hướng dẫn font-display: swap cho trình duyệt hiển thị văn bản thay thế ngay lập tức và thay thế bằng phông chữ tùy chỉnh khi nó tải xong, loại bỏ văn bản không hiển thị trong quá trình tải phông chữ.
Tuân thủ giấy phép phông chữ
Nhiều giấy phép font thương mại bao gồm điều khoản hạn chế việc tải lên file font lên dịch vụ web bên thứ ba. Điều này gây ra vấn đề: bạn cần chuyển đổi sang WOFF2 để hiệu suất, nhưng hầu hết công cụ chuyển đổi yêu cầu tải lên font lên máy chủ.
Tất nhiên, luôn kiểm tra điều khoản giấy phép font chữ cụ thể. Nhưng tính chất chỉ chạy cục bộ của Morph loại bỏ mối quan ngại tuân thủ phổ biến nhất.
Chuyển đổi phông chữ khác
Morph cũng hỗ trợ chuyển đổi OTF sang WOFF2, WOFF sang WOFF2, TTF sang OTF, và mọi kết hợp khác của TTF, OTF, WOFF, và WOFF2. Cần miễn phí font để bắt đầu? Duyệt qua 1.500+ font miễn phí trong thư viện font Morph.