WOFF2

WOFF2 dikembangkan oleh Google dan menjadi W3C Recommendation pada Maret 2018. Ini dibangun di atas konsep WOFF asli tetapi mengganti kompresi zlib dengan Brotli — algoritma kompresi yang juga dikembangkan oleh Google — yang mencapai rasio kompresi yang jauh lebih baik.

Tetapi WOFF2 bukan hanya "WOFF dengan kompresi lebih baik". Ini memperkenalkan transformasi preprocessing yang merestrukturisasi data font sebelum kompresi, membuatnya jauh lebih dapat dikompres. Untuk TrueType outlines, ini berarti menerapkan predictive coding pada koordinat glyph — mengkodekan setiap titik sebagai delta dari nilai yang diprediksi daripada sebagai koordinat absolut. Hasilnya adalah aliran byte yang jauh lebih redundan yang dapat dikompres secara agresif oleh Brotli.

Pendekatan dua langkah ini — preprocessing spesifik domain diikuti oleh kompresi tujuan umum — adalah mengapa WOFF2 secara konsisten menghasilkan file font terkecil dari format manapun.

WOFF2 menerapkan pipeline kompresi dua fase pada data font sumber:

• Fase 1: Transformasi preprocessing — transformasi spesifik font merestrukturisasi data untuk memaksimalkan kemampuan kompresi. Untuk TrueType glyph outlines, ini menggunakan predictive coding koordinat — setiap titik dikodekan sebagai perbedaan dari posisi yang diprediksi, yang menghasilkan angka yang jauh lebih kecil. Transformasi serupa diterapkan ke tabel font lainnya.
• Fase 2: Kompresi Brotli — data yang telah dipreprocess kemudian dikompres dengan Brotli, yang menggabungkan kompresi jendela geser LZ77 dengan pengkodean Huffman dan kamus statis bawaan. Brotli mencapai kompresi 20-30% lebih baik dari zlib pada data font tipikal.

Di sisi browser, prosesnya berbalik: dekompresi Brotli diikuti oleh transformasi terbalik untuk merekonstruksi tabel font asli. Meskipun ada langkah tambahan, dekompresi WOFF2 sebenarnya lebih cepat dari WOFF1 — Brotli dirancang untuk kecepatan dekode yang cepat, dan file yang lebih kecil ditransfer lebih cepat melalui jaringan.

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

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Perhatikan bahwa kita hanya mencantumkan satu src — hanya WOFF2. Dengan cakupan browser 97%+, banyak proyek modern tidak lagi memerlukan format fallback. Direktif font-display: swap memberitahu browser untuk segera menampilkan teks menggunakan font cadangan saat icon font sedang dimuat, mencegah teks yang tidak terlihat.

WOFF2 mendapat dukungan luas di semua browser modern. Satu-satunya celah signifikan adalah Internet Explorer, yang secara resmi dihentikan oleh Microsoft pada Juni 2022.

Cakupan global gabungan berada di sekitar 97%. ~3% yang tersisa hampir seluruhnya terdiri dari instalasi IE lama dan browser mobile yang sangat tua.

Untuk mengilustrasikan keunggulan kompresi WOFF2, berikut ukuran file tipikal untuk icon font yang berisi 200 glyph:

Penghematan bertambah seiring set ikon yang lebih besar. Font 500 glyph mungkin berukuran 200 KB sebagai TTF, 120 KB sebagai WOFF, dan hanya 82 KB sebagai WOFF2. Melalui ribuan pemuatan halaman, kilobyte-kilobyte ini langsung diterjemahkan menjadi waktu tampil yang lebih cepat dan biaya bandwidth yang lebih rendah.

Selalu. WOFF2 seharusnya menjadi format default untuk penerapan icon font berbasis web manapun. Ini menghasilkan file terkecil, dekompresi tercepat, dan dukungan browser yang hampir universal.

Satu-satunya skenario di mana Anda tidak menggunakan WOFF2 adalah jika Anda menargetkan Internet Explorer — dalam hal itu, pasangkan dengan WOFF sebagai fallback:

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

Browser modern akan mengambil file WOFF2; IE 11 akan beralih ke WOFF. Semua orang mendapatkan font, semua orang mendapatkan kompresi.