Cara Subsetting font

Subsetting font adalah memilih karakter tertentu di dalam font table yang ingin dipertahankan dengan cara menghilangkan atau menghapus karakter - karakter lainnya yang tidak diperlukan. Dalam dunia desain web dan bagi yang mementingkan tentang page speed maka Subsetting font ini akan membuat ukuran font menjadi lebih ramping dan cocok untuk dipakai sebagai webfont.

dev insight error pada identifikasi ukuran gambar

Untuk keperluan menampilkan logo “kusaeni” yang ada di atas halaman ini, sebelumnya ane pakai gambar dengan format webp yang ringan, namun seringan apapun ukuran gambar akan jatuh lebih dari 10Kib dan harus memperhatikan aspek rasio yang kadang kala membingungkan dan jika salah penanganan akan membuat halaman tidak lolos uji Core Web Vitals Assessment terutama di bagian Best Practise - User Experience. Oleh karena itu ane putuskan untuk mengatasi masalah ini dengan mengganti file gambar dengan font.

Font yang ane pakai adalah Sofia dari Google Fonts. Ukuran aslinya saat diunduh sekitar 28Kib, dengan setidaknya ada lebih dari 200 karakter. Ane hanya butuh 7 karakter saja yang terdiri dari huruf “k u s a e n i” saja. Untuk itu ane akan melakukan subsetting atau cherry picking pada karakter - karakter itu.

Table karakter pada font Sofia (Latin), yang diberi warna biru adalah karakter yang akan dipertahankan.

Untuk melakukan subsetting bisa memakai layanan online seperti dari Font Squirel Web Font Generator yang memiliki fitur expert atau wild and free tools yang lengkap namun ane akan pakai aplikasi kecil dari Python bernama FontTools yang memiliki fungsi untuk memanipulasi font sekaligus mengkonversinya ke web font atau woff.

Memakai FontTools #

Karena ini adalah Python Library maka fonttools tersedia di hampir semua OS, saat ini ane pakai MacOs maka ane bisa pasang fonttools dengan Homebrew.

$ brew install fonttools brotli

Setelah selesai dan terpasang dengan baik, maka ane mengunduh font Sofia dari Google Fonts, ane mendapatkan font dalam format ttf, lalu ane melakukan subsetting sesuai dengan karakter yang ane inginkan.

$ pyftsubset Sofia-Reguler.ttf --text="kusaeni" --output-file="Sofia-Kus-Regular.ttf"

Belum sempat meneguk kopi, proses subsetting sudah selesai dengan sangat cepat. Ane mendapatkan file baru dengan nama Sofia-Kus-Regular.ttf dengan ukuran sekitar 1,9Kib saja. Namun file masih dalam format ttf dan ane perlu rubah/konversi ke woff2 agar maksimal performanya saat dipakai sebagai webfont.

$ python3 -m fonttools ttLib.woff2 compress Sofia-Kus-Regular.ttf

atau bikin woff2 barengan saat proses subsetting

$ pyftsubset Sofia-Reguler.ttf --text="kusaeni" --flavor="woff2" --output-file="Sofia-Kus-Regular.woff2"

Kedua perintah di atas akan menghasilkan file baru bernama Sofia-Kus-Regular.woff2.

hasil dari subsetting hanya ada 7 karakter (glyphs) + 1 blank

Lalu bagaimana dengan opsi subsetting yang lain seperti misalnya ingin ambil Basic Latin atau tambahan karakter tertentu?

Bisa dengan CLI atau bikin script Python seperti ini

from fontTools import subset

# opsi dan daftar unicode dari font yang ingin disubset
options = subset.Options()
options.flavor = "woff2"
unicode_list = "U+0020-007F"

# load font asli dan persiapkan subsetter
font = subset.load_font("Sofia-Regular.ttf", options)
subsetter = subset.Subsetter(options=options) 

# mulai subset
subsetter.populate(unicodes=subset.parse_unicodes(unicodes_list))
subsetter.subset(font)

font.save("SofiaKus-Regular.woff2")
font.close()

Untuk opsi lebih lengkap sila kunjungi halaman dokumentasi python fonttools.

Pengaturan Webfont #

Setelah mendapatkan file woff2 sekarang tinggal pasang di blog. Ane taruh font Sofia-Kus-Regular.woff2 di /assets/fonts/Sofia/Sofia-Kus-Regular.woff2 dan kemudian panggil dengan CSS.

@font-face {
    font-family: SofiaKus;
    font-display: swap;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url("/assets/fonts/Sofia/Sofia-Kus-Regular.woff2") format("woff2");
}

Setelah bisa di-load oleh @font-face, font SofiaKus akan tersedia dan bisa dipergunakan seperti ini

div.logo .kusaeni {
    font: normal 1.5em SofiaKus, Georgia, serif;
}

Kode CSS di atas mempergunakan font-display: swap sebagai pilihan bagaimana browser akan menampilkan kustom font. Browser akan menampilkan fallback font atau font kedua, ketiga, atau selanjutnya yang dimiliki oleh user, sehingga akan ada sedikit delay karena browser harus mengunduh terlebih dulu kustom font.

Masalahnya hal ini akan terjadi berulang saat halaman di-render, untuk menghindari ini ane manfaatkan preload untuk memprioritaskan pengunduhan kustom font sehingga untuk render kedua dan selanjutnya peralihan font menjadi lebih mulus.

Di HTML header ane sisipkan kode HTML seperti ingin

<link rel="preload" href="/assets/fonts/Sofia/Sofia-Kus_Regular.woff2" as="font" type="font/woff2" crossorigin>

Hore! sekarang logo ane sudah jadi tanpa gambar.