WOFF

WOFF 1.0 dikembangkan bersama oleh Mozilla, Opera, dan Microsoft sebagai format font pertama yang dibangun dari awal untuk web. Ini menjadi W3C Recommendation pada Desember 2012, menandai tonggak dalam tipografi web.

Pada intinya, WOFF adalah pembungkus di sekitar data font TrueType atau OpenType yang ada. Ini menerapkan kompresi zlib untuk mengurangi ukuran file dan menyertakan bidang metadata opsional untuk lisensi dan atribusi. Sebelum WOFF, pengembang web harus menyajikan file TTF atau OTF mentah — besar, tidak terkompresi, dan tidak memiliki cara standar untuk menyematkan informasi lisensi.

Inovasi kuncinya adalah menciptakan web font container yang bertujuan khusus yang memecahkan tiga masalah sekaligus: ukuran file lebih kecil melalui kompresi, blok metadata standar untuk lisensi font, dan format yang dapat dengan mudah divalidasi dan di-sandbox oleh browser untuk keamanan.

WOFF container membungkus tabel font yang ada (dari file sumber TTF atau OTF) dengan kompresi zlib per tabel. Setiap tabel dalam font asli — glyph outlines, kerning data, naming records — dikompresi secara independen, yang memungkinkan browser hanya mendekompresi tabel yang dibutuhkannya.

Header WOFF dimulai dengan tanda tangan empat byte (wOFF), diikuti oleh font flavor (menunjukkan apakah data yang dibungkus adalah TrueType atau CFF), total ukuran terkompresi, dan pointer ke blok metadata opsional. Browser membaca header ini, mendekompresi tabel individual kembali ke bentuk aslinya, dan menyerahkan data font yang direkonstruksi ke engine rendering teks.

Dari perspektif rendering engine, file WOFF yang didekompresi identik dengan TTF atau OTF asli — kompresi sepenuhnya transparan.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
}

Browser mencoba setiap entri src secara berurutan. Browser modern akan memuat file WOFF2 (lebih kecil, lebih cepat); browser lama yang tidak memahami WOFF2 akan beralih ke file WOFF. Pendekatan cascade ini memberikan performa optimal dengan kompatibilitas maksimum.

WOFF telah didukung oleh semua browser utama sejak awal 2010-an, menjadikannya format fallback paling aman untuk web fonts. Ini mencakup rentang browser yang lebih luas dari WOFF2 karena termasuk dukungan untuk versi Internet Explorer yang lebih lama.

Dengan cakupan browser global 98%+, WOFF dipahami oleh hampir setiap browser yang masih aktif digunakan. Satu-satunya celah yang perlu diperhatikan adalah IE 6-8, yang memerlukan EOT sebagai gantinya.

WOFF2 adalah penerus WOFF, dan dalam sebagian besar hal praktis, ini adalah peningkatan murni. Berikut perbandingannya:

WOFF2 menawarkan kompresi ~30% lebih baik dari WOFF berkat Brotli dan langkah preprocessing khusus yang membuat data glyph lebih dapat dikompres. Ini juga lebih cepat didekompresi. Dukungan browser modern untuk WOFF2 sama luasnya — satu-satunya celah adalah Internet Explorer 9-11, yang mendukung WOFF tetapi tidak WOFF2.

Untuk sebagian besar proyek yang menargetkan browser dari tahun 2024 ke depan, hanya WOFF2 sudah cukup. Satu-satunya keunggulan WOFF yang tersisa adalah cakupan IE 9-11.

Meskipun sudah digantikan oleh WOFF2, masih ada alasan valid untuk menyertakan WOFF dalam font stack Anda:

• Sebagai fallback bersama WOFF2 — daftarkan WOFF2 pertama dalam deklarasi @font-face dan WOFF kedua, memberikan browser modern file yang lebih kecil sambil memastikan browser lama masih mendapatkan font.
• Saat dukungan IE 11 diperlukan — IE 11 mendukung WOFF tetapi tidak WOFF2, jadi WOFF adalah format terkompresi terbaik yang tersedia untuk browser tersebut.
• Di lingkungan tanpa Brotli — beberapa alat build lama, proxy, atau CDN mungkin tidak menangani kompresi Brotli WOFF2 dengan benar; kompresi zlib WOFF didukung secara universal.

Jika tidak ada yang berlaku untuk proyek Anda, Anda dapat melewati WOFF dengan aman dan hanya mengirimkan WOFF2.