Jika Anda menyajikan font TTF di situs web Anda, Anda mengirimkan sekitar 30% data lebih banyak daripada yang diperlukan. WOFF2 mengirimkan jenis huruf yang sama persis dalam file yang jauh lebih kecil, dan setiap peramban modern mendukungnya. Berikut cara mengonversi — dan mengapa hal ini penting untuk kinerja situs Anda.
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.