FlowingDev

Web Fonts, dijelaskan: merampingkan tipografi untuk web yang lebih ngebut

Pelajari fundamental format web font seperti WOFF2 dan bagaimana subsetting membuang karakter yang nggak kepakai buat ningkatin kecepatan loading website secara drastis.

Coba tool-nya: Font Converter & Subsetter

Dalam satu kalimat

Subsetting dan konversi font itu ibarat packing buat liburan akhir pekan: daripada geret koper berisi 6.000 karakter penuh aksara Cyrillic dan dingbat yang nggak bakal kalian pakai, kalian cuma masukin huruf-huruf yang emang dibutuhin ke dalam ransel super padat yang siap tempur di web.

Masalah yang dipecahkan

Kalau kalian bikin website di tahun 2005, pilihan tipografi kalian pada dasarnya kayak lagi disandera. Cuma ada Arial, Times New Roman, Georgia, Verdana, dan mungkin Comic Sans kalau kalian pengen lihat dunia hancur. Ini yang disebut font "web-safe"—yang artinya kita cuma bisa berdoa semoga font tersebut udah ke-install di OS-nya user.

Lalu datanglah revolusi @font-face. Tiba-tiba, desainer bisa masukin custom typeface apa pun yang mereka mau. Web jadi cantik, tapi juga jadi lambat minta ampun.

Font desktop standar (TrueType atau OpenType) itu didesain buat percetakan dan dukungan bahasa universal. Satu file .ttf bisa berisi ribuan glyph, nge-support bahasa Inggris, Yunani, Vietnam, simbol matematika khusus, sampai dua puluh variasi ampersand. Ini mantap buat aplikasi word processor, tapi jadi bencana buat web browser yang jalan di atas koneksi 3G kembang-kempis. Download file font 400KB bakal nge-block proses rendering, bikin fenomena horor bernama "Flash of Unstyled Text" (FOUT) atau yang lebih parah, "Flash of Invisible Text" (FOIT).

Kita butuh dua hal buat nyembuhin obesitas tipografi ini:

  1. Kompresi yang lebih baik yang emang didesain khusus buat web (makanya lahir format kayak WOFF dan WOFF2).
  2. Subsetting, operasi bedah buat ngebuang semua karakter dan language table yang sebenarnya nggak dibutuhin sama suatu website spesifik.

Bagaimana cara kerjanya di balik layar

Buat paham gimana cara kita nyusutin font, kalian harus paham dulu wujud asli dari sebuah file font. Font modern (kayak TTF atau OTF) itu bukan sekadar folder berisi gambar vektor. Dia adalah sebuah database biner kompleks yang berbasis format container SFNT.

Anatomi sebuah Font

Di dalam container SFNT, data disusun ke dalam beberapa tabel spesifik:

  • glyf atau CFF: Gambar vektor aslinya (garis dan kurva pembentuk huruf).
  • cmap: Character map, yang nerjemahin Unicode point (kayak U+0041 buat 'A') ke gambar spesifik di tabel glyf.
  • GSUB / GPOS: Fitur canggih OpenType kayak ligatures (yang nyambungin 'f' dan 'i') dan kerning (jarak antar pasangan huruf tertentu).
  • name: Metadata kayak nama font, hak cipta, dan info desainer.

Sihir dari Subsetting

Waktu kalian melakukan subsetting font, sebuah parser bakal ngebongkar container SFNT ini. Kalian ngasih daftar karakter—misalnya, cuma abjad Inggris dasar, angka, dan tanda baca umum.

Si parser nggak cuma sekadar ngehapus gambar vektor yang nganggur dari tabel glyf. Dia harus ngebangun ulang seluruh databasenya dengan sangat teliti. Dia nulis ulang cmap buat ngebuang Unicode point yang udah nggak kepakai. Dia nyisir tabel GSUB dan GPOS, ngebabat habis pasangan kerning buat huruf-huruf yang udah lenyap, demi mastiin file-nya nggak corrupt. Terakhir, dia ngitung ulang memory offset buat header file-nya.

Sebuah font standar berukuran 300KB bisa gampang banget nyusut jadi 15KB pas di-subset cuma buat karakter Latin dasar.

Perang Format: WOFF dan WOFF2

Begitu font selesai di-subset, sekarang waktunya buat di-compress.

Format Teknologi Kompresi Kesimpulan
TTF / OTF Nggak ada (Biasanya) Mantap buat aplikasi desain desktop. Ampas banget kalau di-load di web.
WOFF Zlib Sang Web Open Font Format orisinal. Bagus, tapi udah ketinggalan zaman.
WOFF2 Brotli Standar modern saat ini. Mentransformasi tabel font sebelum nge-compress semuanya.

WOFF2 adalah raja web font yang nggak terbantahkan. Dia nggak cuma ngambil TTF terus di-zip. WOFF2 secara fisik mentransformasi tabel SFNT—spesifiknya ngelompokin tipe data yang mirip—supaya algoritma kompresi Brotli di baliknya bisa nemuin pola berulang yang lebih panjang. Hasilnya, ukuran file bisa sampai 30% lebih kecil dibanding WOFF1, dan berpotensi 95% lebih kecil dari TTF aslinya kalau dikombinasiin sama subsetting.

Nggabungin semuanya pakai CSS

Setelah kalian punya file WOFF2 yang udah di-subset dan di-compress rapet, kalian kasih tau browser soal file ini pakai CSS. Property unicode-range itu krusial banget di sini. Dia ngasih tahu browser, "Cuma download file ini kalau ada karakter di halaman yang beneran match sama range ini."

@font-face {
  font-family: 'MyCustomFont';
  /* Load format WOFF2 yang udah di-compress rapet */
  src: url('mycustomfont-subset.woff2') format('woff2');
  /* Cuma trigger download-nya kalau halaman ini pakai karakter Latin dasar */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
  font-display: swap;
}

Cerita dari dunia nyata

Tragedi "Cuma Sekadar Ampersand"

Sebuah butik design agency lagi bikin landing page buat restoran mewah. Tipografi headline-nya kelihatan gila-gilaan kerennya, utamanya karena mereka pakai font cursive ornamen yang cantik khusus buat karakter ampersand (&) di nama restorannya: "Salt & Ash".

Tapi usut punya usut, skor performa Lighthouse-nya kebakaran merah. Para developer sadar kalau mereka maksa user buat nge-download file TTF 250KB cuma buat nge-render satu karakter doang. Setelah masukin font-nya ke tool subsetter dan mengekstrak cuma karakter & (Unicode U+0026), mereka dapet file WOFF2 yang ukurannya super kocak: 800 bytes. Pelajaran berharganya: Jangan pernah load full font family cuma buat drop-caps dekoratif, icon, atau karakter tunggal. Lakukan subsetting secara brutal.

Megabyte Multi-Bahasa

Sebuah perusahaan SaaS melokalisasi website marketing mereka buat user di Jepang dan Korea Selatan. Biar branding-nya tetep konsisten, mereka nge-embed font CJK (Chinese, Japanese, Korean) yang sangat bergengsi. Font CJK itu terkenal gede banget sizenya karena isinya puluhan ribu ideogram. File-nya berukuran 4,5MB.

Tiba-tiba, user mereka di AS dan Eropa harus nunggu beberapa detik cuma buat nunggu teks muncul, soalnya si browser sibuk nge-download 4,5MB karakter Asia yang nggak bakal pernah mereka lihat. Tim engineering-nya ngeberesin ini dengan nge-subset font masternya ke beberapa "potongan" kecil (satu WOFF2 buat Basic Latin, satu buat Hiragana/Katakana, dsb.) dan men-deploy semuanya pakai blok @font-face dengan deklarasi unicode-range yang ketat. Sekarang, browser cuma nge-download potongan Latin berukuran 15KB buat user yang pakai bahasa Inggris. Pelajaran berharganya: Pakai subsetting dan unicode-range buat nge-serve potongan tipografi secara dinamis sesuai sama bahasa yang beneran dibutuhin sama user.

Kesalahan umum dan jebakannya

  • Nggak sengaja ngapus tombol spasi: Pas lagi ngetik karakter literal yang mau di-subset (contoh, abcdefghijklmnopqrstuvwxyz), developer sering kelupaan masukin karakter spasi (U+0020). Tanpa spasi, custom font yang udah diracik susah payah bakal fallback ke Arial tiap ada jarak antar kata. Hasilnya? Estetika horor ala surat ancaman penculik.
  • Nge-serve format jadul tanpa alasan yang jelas: Banyak developer masih nge-generate dan nge-serve font EOT, TTF, dan SVG di tumpukan CSS mereka "buat jaga-jaga aja." Nggak usah. WOFF2 udah di-support sama lebih dari 97% browser secara global. Serve aja WOFF2, paling kasih WOFF sebagai fallback buat browser purba purbakala, dan cukup sampai di situ.
  • Ngebabat fitur esensial OpenType: Tool subsetting yang agresif kadang nawarin buat ngebuang tabel GSUB dan GPOS demi ngirit beberapa kilobyte. Kalau font kalian bergantung sama ligatures yang kompleks (kayak ngubah -> jadi panah) atau sangat ngandelin kerning biar nggak keliatan jelek, ngebuang tabel ini bakal ngancurin tipografi kalian.
  • Lupa naruh font-display: swap: Walaupun ukuran file WOFF2 hasil subset cuma 12KB, dia tetep butuh sekian milidetik buat di-download. Kalau kalian nggak masukin font-display: swap di CSS, browser modern bakal nyembunyiin teks kalian sama sekali sampai font-nya selesai di-download. Kasih user kalian teks dari sistem buat dibaca selama nunggu custom font-nya datang.

Kenapa ini wajib ada di radar kalian

Dalam sejarahnya, web fonts adalah salah satu pelanggar terburuk kalau urusannya ngerusak Web Vitals. Kalau kalian peduli sama Largest Contentful Paint (LCP) atau Cumulative Layout Shift (CLS), kalian harus peduli sama font delivery.

Kalian harus udah mikirin soal subsetting dan konversi font sejak detik pertama dapet file .ttf atau .otf dari desainer atau pas download dari foundry. Nge-serve font desktop mentahan ke web itu ekuivalen sama nge-serve gambar bitmap mentahan 10MB tanpa kompresi ketimbang pakai WebP.

Dengan mengonversinya ke WOFF2 dan ngebuang ribuan glyph yang nggak dipakai, kalian ngurangin biaya bandwidth, nurunin jejak karbon aplikasi kalian, dan mastiin website kalian beneran bisa dibaca di milidetik yang sama saat user ngeklik link.

Gali lebih dalam

Teori beres. Saatnya praktik — 100% di browser kamu.

Coba tool-nya: Font Converter & Subsetter