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.
Mengapa WOFF2?
WOFF2 (Web Open Font Format 2.0) menggunakan kompresi Brotli untuk mengurangi ukuran file font hingga sekitar 30% dibandingkan TTF, tanpa kehilangan kualitas. Glyph font, hinting, kerning, dan semua fitur tipografi dipertahankan identik. Saat browser memuat file WOFF2, ia mendekompresinya menjadi data yang sama seperti TTF asli.
Dampak kinerja nyata. Font adalah sumber daya yang menghambat render — browser tidak akan menampilkan teks hingga font selesai dimuat. TTF 120KB yang menjadi WOFF2 84KB berarti teks muncul lebih cepat, terutama pada koneksi seluler. Google Core Web Vitals secara langsung mengukur ini: font yang lebih kecil meningkatkan Largest Contentful Paint (LCP) dan mengurangi Cumulative Layout Shift (CLS) akibat pertukaran font.
Dukungan browser bersifat universal. Chrome, Firefox, Safari, dan Edge semua mendukung WOFF2. Hanya browser yang tidak mendukung adalah Internet Explorer dan browser Android lama — keduanya berada di bawah 1% lalu lintas global.
Cara mengonversi
Menggunakan WOFF2 dalam CSS
Setelah Anda memiliki file WOFF2, referensikan dalam stylesheet Anda. Daftarkan WOFF2 terlebih dahulu dengan fallback TTF untuk kompatibilitas maksimal:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}Petunjuk font-display: swap memberi tahu browser untuk menampilkan teks cadangan segera dan mengganti font kustom setelah dimuat, menghilangkan teks tidak terlihat selama pemuatan font.
Kepatuhan lisensi font
Banyak lisensi font komersial mencakup klausul yang membatasi pengunggahan file font ke layanan web pihak ketiga. Ini menimbulkan masalah: Anda perlu mengonversi ke WOFF2 untuk kinerja, tetapi sebagian besar alat konversi mengharuskan mengunggah font ke server.
Tentu saja, selalu periksa ketentuan lisensi font spesifik Anda. Namun, sifat lokal-only Morph menghilangkan kekhawatiran kepatuhan paling umum.
Konversi font lainnya
Morph juga mendukung OTF ke WOFF2, WOFF ke WOFF2, TTF ke OTF, dan setiap kombinasi lainnya dari TTF, OTF, WOFF, dan WOFF2. Butuh font gratis untuk memulai? Cari tahu 1.500+ font gratis di perpustakaan font Morph.