how to
Cara Melakukan "Font Subsetting" untuk Memotong Ukuran Font Web Hingga 80%
Website portofolio lambat? Simak panduan lengkap how to melakukan Font Subsetting untuk memotong ukuran font kustom hingga 80% demi performa SEO yang optimal.
Sensei Blog
24 May 2026, 10:30 · Dibaca 155 kali
Credit Image: UNSPLASH.COM
Ketika Anda mendesain website portofolio premium dengan estetika minimalis dan elegan, pemilihan tipografi kustom adalah hal yang mutlak. Namun, masalah besar sering terjadi setelah Anda mengunggah file font berformat .ttf atau .otf bawaan pabrik: kecepatan loading website Anda melambat secara drastis, dan Google PageSpeed Insights memberikan rapor merah pada indikator Largest Contentful Paint (LCP).
Mengapa ini terjadi? Karena satu file font standar biasanya berisi puluhan ribu karakter (glyphs) global, termasuk aksara Kiril, Yunani, Arab, hingga simbol matematika kuno yang tidak akan pernah Anda gunakan di website Anda.
Solusinya adalah melakukan Font Subsetting—sebuah trik membuang ribuan karakter tidak berguna tersebut dan hanya menyisakan huruf yang Anda butuhkan (seperti alfabet A-Z, angka 0-9, dan tanda baca standar). Proses ini bersih, instan, dan mampu memangkas ukuran file font dari 5MB menjadi hanya 200KB saja.
Bagaimana Cara Melakukan Font Subsetting secara Gratis?
Cara melakukan font subsetting secara gratis adalah dengan mengisolasi karakter font kustom menggunakan alat optimasi online (seperti Font Squirrel Webfont Generator) atau modul berbasis teks, memilih opsi kustomisasi karakter untuk membuang aksara asing yang tidak digunakan, lalu mengonversi hasil akhirnya ke dalam format kompresi modern .woff2.
Berikut adalah persiapan sederhana sebelum kita mulai:
File font kustom Anda (format .ttf atau .otf).
Koneksi internet untuk membuka alat enkripsi web.
Langkah demi Langkah (Step-by-Step) Optimasi Font Kustom
Berikut adalah panduan instruksional terlengkap untuk memangkas ukuran font secara mandiri demi performa SEO website yang maksimal:
Langkah 1: Buka Font Squirrel Webfont Generator
Akses situs gratis https://www.fontsquirrel.com/tools/webfont-generator melalui browser Anda. Alat ini adalah salah satu platform paling tepercaya untuk memanipulasi kode biner font secara bersih tanpa merusak estetika desain huruf.
Langkah 2: Unggah File Font Kustom Anda
Klik tombol Upload Fonts yang berwarna ungu di bagian atas halaman. Pilih file font .ttf atau .otf dari penyimpanan komputer Anda yang ingin dioptimasi.
Langkah 3: Aktifkan Mode Pengaturan "Expert"
Ini adalah langkah krusial yang jarang dibahas blog lain. Secara bawaan, situs akan memilih mode Recommended. Anda wajib mengubah centang ke mode Expert. Mode ini akan membuka seluruh panel kontrol tersembunyi untuk memotong isi bagian dalam font.
Langkah 4: Pilih Format Output WOFF2
Pada kolom Font Formats, pastikan Anda hanya mencentang pilihan WOFF2. Format .woff2 adalah teknologi kompresi font tercanggih untuk web saat ini yang memiliki ukuran jauh lebih ringan dibandingkan .woff lama atau .ttf, dan sudah didukung oleh 99% browser modern di tahun 2026.
Langkah 5: Masuk ke Menu "Subsetting" dan Pilih Custom
Gulir layar ke bawah hingga Anda menemukan bagian bernama Subsetting. Ubah pilihan dari Basic menjadi Custom.
Langkah 6: Pilih Karakter Bahasa yang Digunakan (Language Selection)
Pada daftar bahasa yang muncul, cukup centang English atau Western Latin jika website Anda hanya menggunakan alfabet standar. Pastikan kotak untuk aksara Cyrillic (Rusia), Greek (Yunani), dan Cherokee berada dalam kondisi tidak dicentang. Dengan langkah ini, Anda baru saja membuang sekitar 75% beban sampah digital di dalam file font Anda.
Langkah 7: Setujui Hak Cipta dan Unduh Hasil Akhir
Gulir ke bagian paling bawah, centang kotak pernyataan bahwa Anda memiliki hak legal atas penggunaan font tersebut (Agreement), lalu klik tombol Download Your Kit. Sistem akan memproses pemotongan karakter secara real-time dan mengunduh file .zip ke komputer Anda dalam hitungan detik.
Cara Menerapkan Font Hasil Potongan ke Dalam Website
Setelah Anda mengekstrak file .zip yang baru diunduh, Anda akan mendapatkan file font baru yang sangat ringan berakhiran .woff2. Terapkan kode CSS minimalis ini ke dalam lembar gaya website Anda agar font terpanggil dengan metode asynchronous yang cepat:
@font-face {font-family: 'NamaFontKustomAnda';
src: url('NamaFont-Subset.woff2') format('woff2');
font-display: swap; /* Trik wajib agar teks langsung muncul tanpa menunggu font selesai dimuat */
}
Banyak pemilik website terlalu fokus mengecilkan ukuran gambar, namun melupakan bahwa file font kustom yang tidak dioptimasi adalah "pembunuh senyap" bagi skor SEO dan kecepatan situs. Melalui trik font subsetting yang rapi dan elegan ini, Anda tidak hanya berhasil menyajikan visual tipografi yang premium bagi pengunjung, tetapi juga memberikan jalur hijau bagi robot Google untuk merayapi website Anda dengan kecepatan penuh.
