Font Subsetting: Cara Mengurangi Ukuran Font pada Website

Font web membantu membangun identitas visual dan menjaga keterbacaan, tetapi berkas font yang besar dapat menambah data yang harus diunduh browser. Satu keluarga font mungkin mendukung banyak bahasa, simbol, bobot, dan gaya, padahal sebuah halaman hanya memakai sebagian karakter. Font subsetting adalah teknik membuat berkas font yang hanya memuat glyph yang dibutuhkan untuk cakupan konten tertentu.

Jika diterapkan dengan benar, subsetting dapat mengurangi ukuran aset tipografi dan membantu halaman dimuat lebih efisien. Namun, memangkas karakter secara berlebihan bisa menyebabkan huruf hilang, tanda baca berubah, atau teks dalam bahasa lain tidak tampil. Tujuannya bukan sekadar membuat file sekecil mungkin, melainkan menyeimbangkan performa, cakupan karakter, dan pengalaman membaca.

Apa yang sebenarnya dipangkas?

Font bukan hanya kumpulan huruf A sampai Z. Di dalamnya dapat terdapat glyph untuk karakter beraksen, tanda baca, simbol mata uang, karakter matematika, aksara non-Latin, serta tabel yang mengatur pemetaan karakter dan perilaku tipografi. Font multibahasa karena itu bisa memuat ribuan glyph.

Subsetting menghasilkan varian font yang hanya berisi subset tertentu. Situs berbahasa Indonesia mungkin tidak memerlukan seluruh glyph dalam font multibahasa, tetapi tetap harus mempertimbangkan nama orang, kutipan, simbol, dan konten kiriman pengguna. Jika situs menerima teks dalam berbagai bahasa, subset Latin dasar saja mungkin tidak mencukupi.

Manfaat untuk performa website

Manfaat paling langsung adalah berkurangnya ukuran berkas font yang dikirim lewat jaringan. Dampaknya pada kecepatan bergantung pada ukuran awal, jumlah varian, cache browser, koneksi pengguna, dan apakah font menunda tampilan teks. Mengurangi satu file besar dapat lebih berarti daripada mengoptimalkan beberapa file kecil yang jarang dipakai.

Subsetting juga membantu mengendalikan variasi aset. Situs dapat menyediakan hanya bobot font yang benar-benar digunakan dan subset karakter yang sesuai. Meski begitu, membagi font menjadi terlalu banyak potongan kecil dapat menambah permintaan jaringan dan membuat pengelolaan cache lebih rumit. Ukur hasil pada halaman nyata, bukan hanya berdasarkan ukuran file.

Rencanakan cakupan karakter terlebih dahulu

Sebelum membuat subset, inventarisasi bahasa dan jenis konten yang diterbitkan. Untuk situs berbahasa Indonesia, perhatikan huruf Latin, angka, tanda baca, simbol mata uang, dan karakter beraksen yang muncul pada nama atau kutipan. Jika pengguna dapat menulis komentar dalam bahasa lain, kebutuhan karakternya lebih luas daripada konten editorial biasa.

Hindari menyalin daftar karakter dari situs lain tanpa memahami kebutuhan sendiri. Periksa halaman artikel, navigasi, formulir, pesan kesalahan, dan elemen antarmuka. Jika subset dibuat hanya dari teks yang tersedia saat ini, konten baru bisa memperkenalkan karakter yang belum disertakan.

Langkah penerapan yang praktis

1. Inventarisasi berkas font. Catat keluarga, format, bobot, gaya, dan halaman yang menggunakannya. Hapus varian yang tidak terpakai sebelum melakukan subsetting.
2. Periksa lisensi. Pastikan lisensi font mengizinkan modifikasi dan distribusi berkas hasil subset. Simpan informasi lisensi bersama aset agar mudah diaudit.
3. Pilih alat yang sesuai. Gunakan alat pengolahan font yang mendukung format dan kebutuhan proyek. Simpan berkas sumber serta parameter yang dipakai supaya proses dapat diulang.
4. Pertahankan fitur tipografi. Pastikan pemetaan karakter, ligatur, tanda diakritik, dan fitur font variabel tetap bekerja jika digunakan. Jangan menganggap ukuran yang lebih kecil otomatis berarti hasilnya benar.
5. Konfigurasikan CSS. Hubungkan berkas subset dengan aturan @font-face yang sesuai. Gunakan deklarasi rentang Unicode hanya jika rentang tersebut benar-benar cocok dengan isi file dan strategi pemuatan.
6. Uji sebelum diterapkan. Periksa judul, paragraf, angka, simbol, nama beraksen, dan konten multibahasa. Bandingkan tampilan, ukuran berkas, dan metrik performa sebelum serta sesudah perubahan.

Unicode range dan pemuatan bertahap

CSS menyediakan descriptor unicode-range pada aturan @font-face. Dengan rentang yang tepat, browser dapat memilih sumber font untuk karakter yang sesuai. Teknik ini bisa membantu memisahkan subset Latin dari subset aksara lain. Namun, descriptor tersebut tidak menghapus karakter dari berkas font; ia membantu browser menentukan kapan sumber tertentu relevan. Penghematan ukuran file terjadi ketika berkas font memang sudah dibuat sebagai subset.

Untuk situs dengan beberapa bahasa, pemuatan bertahap dapat menghindari pengunduhan subset yang tidak dibutuhkan pada halaman tertentu. Pastikan rentang tidak tumpang tindih secara keliru dan setiap karakter penting tersedia pada salah satu sumber. Sertakan fallback sistem agar teks tetap terbaca jika font khusus gagal dimuat.

Kesalahan yang perlu dihindari

Kesalahan umum adalah memangkas karakter hanya berdasarkan beranda, lalu menganggap semua halaman memiliki kebutuhan sama. Artikel dengan nama asing, halaman kebijakan, pencarian, atau komentar bisa membutuhkan karakter tambahan. Kesalahan lain adalah membuat banyak varian bobot yang sebenarnya tidak digunakan, atau menghapus fitur tipografi yang diperlukan oleh bahasa tertentu.

Periksa juga format dan pengiriman font. WOFF2 biasanya cocok untuk browser modern, tetapi keputusan format perlu mengikuti dukungan browser yang ditargetkan. Gunakan cache yang masuk akal, hindari mengunduh font yang tidak diperlukan, dan pertimbangkan font-display agar teks tetap dapat dibaca saat font khusus sedang dimuat.

Cara mengukur hasil

Bandingkan ukuran transfer font sebelum dan sesudah, jumlah berkas yang diminta, serta pengalaman visual pada perangkat dan koneksi yang berbeda. Gunakan alat pengembang browser untuk memeriksa permintaan jaringan dan konsol, lalu uji halaman yang mewakili variasi konten. Catat hasil agar optimasi berikutnya berdasarkan data, bukan perkiraan.

Jika penghematan ukuran sangat kecil atau implementasi membuat permintaan jaringan bertambah tajam, pertimbangkan kembali strategi subset. Kadang-kadang menghapus bobot yang tidak dipakai atau memilih keluarga font yang lebih ringkas sudah cukup. Subsetting adalah salah satu alat optimasi, bukan kewajiban untuk setiap website.

Kesimpulan

Font subsetting dapat mengurangi ukuran aset tipografi dan membantu performa website jika kebutuhan karakter dipetakan dengan cermat. Mulailah dari inventaris font, cakupan bahasa, dan lisensi; buat subset yang terukur; lalu uji tampilan serta metrik jaringan pada halaman nyata. Pastikan karakter penting, fallback, dan fitur tipografi tetap berfungsi. Dengan pendekatan tersebut, situs dapat memperoleh manfaat performa tanpa mengorbankan keterbacaan atau aksesibilitas.