Mengurangi ukuran font web

Ilya Grigorik

Jeremy Wagner

Tipografi adalah dasar untuk desain, {i>branding<i}, keterbacaan, dan aksesibilitas yang baik. Dengan font web, semua hal di atas dan hal lainnya dapat dilakukan: teks dapat dipilih, ditelusuri, dapat di-zoom, serta mendukung DPI yang tinggi, sehingga memberikan rendering teks yang konsisten dan tajam terlepas dari ukuran dan resolusi layar. WebFont sangat penting untuk desain, UX, dan kinerja yang baik.

Pengoptimalan font web adalah bagian penting dari keseluruhan strategi performa. Setiap font merupakan sumber daya tambahan, dan beberapa font dapat memblokir rendering teks, tetapi hanya karena halaman menggunakan WebFonts, bukan berarti bahwa halaman harus dirender lebih lambat. Sebaliknya, font yang dioptimalkan, dikombinasikan dengan strategi yang tepat terkait cara font dimuat dan diterapkan pada halaman, dapat membantu mengurangi total ukuran halaman dan memperbaiki waktu rendering halaman.

Anatomi font web

Font web adalah kumpulan glyph, dan setiap glyph adalah bentuk vektor yang mendeskripsikan huruf atau simbol. Hasilnya, dua variabel sederhana menentukan ukuran file font tertentu: kompleksitas jalur vektor dari setiap glyph dan jumlah glyph dalam font tertentu. Sebagai contoh, Open Sans, yang merupakan salah satu WebFonts paling populer, berisi 897 glyph, yang mencakup karakter Latin, Yunani, dan Sirilik.

Saat memilih font, penting untuk mempertimbangkan himpunan karakter mana yang didukung. Jika perlu melokalkan konten halaman ke beberapa bahasa, Anda harus menggunakan font yang dapat memberikan tampilan dan pengalaman yang konsisten kepada pengguna. Misalnya, jenis font Noto Google bertujuan untuk mendukung semua bahasa di dunia. Namun, perhatikan bahwa ukuran total dari Noto, dengan semua bahasa disertakan, menghasilkan download ZIP sebesar 1, 1 GB+.

Dalam posting ini Anda akan mengetahui cara mengurangi ukuran file yang dikirim dari font web Anda.

Format font web

Saat ini ada dua format kontainer font yang direkomendasikan yang digunakan di web:

• EOT
• TTF
• WOFF
• WOFF2.

WOFF dan WOFF 2.0 menikmati dukungan luas dan didukung oleh semua browser modern.

• Menyajikan varian WOFF 2.0 ke browser modern.
• Jika benar-benar diperlukan—misalnya jika Anda masih perlu mendukung Internet Explorer 11—gunakan WOFF sebagai pengganti.
• Alternatifnya, pertimbangkan untuk tidak menggunakan font web untuk browser lama dan kembali ke font sistem. Hal ini mungkin juga berperforma lebih baik untuk perangkat yang lebih lama dan lebih terbatas.
• Karena WOFF dan WOFF 2.0 mencakup semua dasar untuk browser modern dan lama yang masih digunakan, penggunaan EOT dan TTF tidak lagi diperlukan dan dapat mengakibatkan waktu download font web yang lebih lama.

Kompresi dan font web

Baik WOFF dan WOFF 2.0 memiliki kompresi bawaan. Kompresi internal WOFF 2.0 menggunakan Brotli, dan menawarkan kompresi hingga 30% lebih baik daripada WOFF. Untuk mengetahui informasi selengkapnya, lihat laporan evaluasi WOFF 2.0.

Terakhir, perlu diperhatikan bahwa sebagian format font mengandung metadata tambahan, misalnya informasi petunjuk font dan kerning yang mungkin tidak diperlukan pada beberapa platform, sehingga memungkinkan pengoptimalan ukuran file lebih lanjut. Misalnya, Google Fonts mempertahankan lebih dari 30 varian yang dioptimalkan untuk setiap font, dan otomatis mendeteksi serta mengirimkan varian optimal untuk setiap platform dan browser.

Menentukan jenis font dengan @font-face

CSS @font-face di aturan memungkinkan Anda untuk menentukan lokasi resource font tertentu, karakteristik gayanya, dan titik kode Unicode yang harus digunakan. Kombinasi deklarasi @font-face tersebut dapat digunakan untuk membuat "jenis font", yang akan digunakan browser untuk mengevaluasi sumber daya font mana yang perlu didownload dan diterapkan ke halaman saat ini.

Pertimbangkan font variabel

Font variabel dapat mengurangi ukuran file font Anda secara signifikan jika Anda memerlukan beberapa varian font. Alih-alih memuat gaya biasa dan tebal beserta versi miringnya, Anda dapat memuat satu file yang berisi semua informasi. Namun, ukuran file font variabel akan lebih besar daripada varian font individual, meskipun lebih kecil daripada kombinasi banyak varian. Daripada satu font variabel besar, mungkin lebih baik tampilkan varian font penting terlebih dahulu, dengan varian lainnya yang didownload nanti.

Font variabel kini didukung oleh semua browser modern. Cari tahu lebih lanjut di Pengantar font variabel di web.

Pilih format yang tepat

Setiap deklarasi @font-face memberikan nama jenis font, yang bertindak sebagai grup logis dari beberapa deklarasi, properti font seperti gaya, ketebalan, dan regangan, serta deskripsi src, yang menentukan daftar lokasi prioritas untuk resource font.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Pertama-tama, perhatikan bahwa contoh di atas menentukan satu jenis Awesome Font dengan dua gaya (normal dan miring), yang masing-masing mengarah ke kumpulan resource font yang berbeda. Selanjutnya, setiap deskriptor src berisi daftar varian resource yang diprioritaskan dan dipisahkan koma:

• Perintah local() memungkinkan Anda mereferensikan, memuat, dan menggunakan font yang diinstal secara lokal. Jika pengguna telah menginstal font di sistem, tindakan ini akan melewati jaringan sepenuhnya, dan merupakan yang tercepat.
• Perintah url() memungkinkan Anda memuat font eksternal, dan diizinkan untuk berisi petunjuk format() opsional yang menunjukkan format font yang direferensikan oleh URL yang disediakan.

Catatan: Kecuali Anda mereferensikan salah satu font sistem default, pengguna jarang menginstalnya secara lokal, terutama di perangkat seluler, di mana secara efektif tidak mungkin untuk "menginstal" font tambahan. Meskipun memulai dengan entri local(), Anda harus selalu memberikan daftar entri url() bagi pengguna yang belum mendownloadnya.

Ketika browser menentukan bahwa font diperlukan, browser akan melakukan iterasi melalui daftar resource yang disediakan dalam urutan yang ditentukan dan mencoba memuat resource yang sesuai. Misalnya, mengikuti contoh di atas:

1. Browser melakukan tata letak halaman dan menentukan varian font yang diperlukan untuk merender teks tertentu pada halaman. Font yang bukan bagian dari CSS Object Model (CSSOM) halaman tidak didownload oleh browser, karena tidak diperlukan.
2. Untuk setiap font yang diperlukan, browser akan memeriksa apakah font tersedia secara lokal.
3. Jika font tidak tersedia secara lokal, browser akan mengiterasi definisi eksternal:
   • Jika petunjuk format tersedia, browser akan memeriksa apakah petunjuk format tersebut mendukung petunjuk tersebut sebelum memulai download. Jika browser tidak mendukung petunjuk, browser akan melanjutkan ke yang berikutnya.
   • Jika tidak ada petunjuk format, browser akan mendownload resource.

Kombinasi perintah lokal dan eksternal dengan petunjuk format yang sesuai memungkinkan Anda menentukan semua format font yang tersedia dan membiarkan browser menangani yang lainnya. Browser menentukan resource mana yang diperlukan dan akan memilih format yang optimal.

Poin penting: Jika Anda mengirimkan lebih banyak format selain WOFF 2.0, urutan varian font harus ditentukan. Browser akan memilih format pertama yang didukungnya. Oleh karena itu, jika Anda ingin browser yang lebih baru untuk menggunakan WOFF 2.0, maka Anda harus menempatkan deklarasi WOFF 2.0 di atas WOFF.

Subsetelan rentang unicode

Selain properti font seperti gaya, ketebalan, dan regangan, aturan @font-face memungkinkan Anda untuk menentukan sekumpulan titik kode Unicode yang didukung oleh setiap resource. Ini memungkinkan Anda untuk membagi font Unicode besar menjadi subset yang lebih kecil (misalnya, Latin, Cyrillic, dan Yunani) dan hanya mendownload glyph yang diperlukan untuk merender teks pada halaman tertentu.

Deskripsi unicode-range memungkinkan Anda menentukan daftar nilai rentang yang dipisahkan koma, yang masing-masing dapat berupa salah satu dari tiga format berbeda:

• Satu titik kode (misalnya, U+416)
• Rentang interval (misalnya, U+400-4ff): menunjukkan titik kode awal dan akhir dari suatu rentang
• Rentang karakter pengganti (misalnya, U+4??): ? karakter menunjukkan digit heksadesimal

Misalnya, Anda dapat memisahkan jenis Awesome Font ke dalam bahasa Latin dan Jepang subset, yang masing-masing didownload oleh browser sesuai kebutuhan:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

Poin penting: Subsetelan rentang unicode sangat penting untuk bahasa Asia, dengan jumlah glyph jauh lebih besar daripada bahasa Barat dan "penuh" biasa {i>font<i} sering diukur dalam {i>megabytes<i}, dan bukan puluhan kilobyte.

Penggunaan subset rentang Unicode dan file terpisah untuk setiap varian gaya font memungkinkan Anda untuk menentukan jenis font komposit yang baik lebih cepat dan lebih efisien untuk didownload. Pengunjung hanya mendownload varian dan subset yang diperlukan, dan tidak dipaksa mendownload subset yang mungkin tidak pernah dilihat atau digunakan di halaman.

Hampir semua browser mendukung unicode-range. Untuk kompatibilitas dengan browser lama, Anda mungkin perlu kembali ke "subsetelan manual". Dalam kasus ini, Anda harus kembali untuk menyediakan resource font tunggal yang berisi semua subset yang diperlukan dan menyembunyikan sisanya dari browser. Misalnya, jika halaman hanya menggunakan karakter Latin, Anda dapat menghapus glyph lain dan menyediakan subset tertentu tersebut sebagai resource yang berdiri sendiri.

1. Tentukan subset yang diperlukan:
   • Jika browser mendukung subset rentang unicode, maka browser akan otomatis memilih subset yang tepat. Halaman hanya perlu menyediakan file subset dan menentukan rentang unicode yang sesuai dalam aturan @font-face.
   • Jika browser tidak mendukung subset rentang unicode, halaman harus menyembunyikan semua subset yang tidak diperlukan; yaitu, developer harus menentukan subset yang diperlukan.
2. Membuat subset font:
   • Gunakan alat pyftsubset open source untuk men-subset dan mengoptimalkan font.
   • Beberapa server font—seperti Google Font—akan otomatis dikelompokkan secara default.
   • Beberapa layanan font memungkinkan subset manual melalui parameter kueri kustom, yang dapat Anda gunakan untuk menentukan secara manual subset yang diperlukan untuk halaman Anda. Lihat dokumentasi dari penyedia font Anda.

Pemilihan dan sintesis font

Setiap jenis font dapat terdiri dari beberapa varian gaya (reguler, tebal, miring) dan beberapa ketebalan untuk setiap gaya. Masing-masing, pada gilirannya, mungkin berisi bentuk glyph yang sangat berbeda—misalnya, jarak, ukuran, atau bentuk yang berbeda sama sekali.

Diagram di atas mengilustrasikan jenis font yang menawarkan tiga ketebalan yang berbeda:

• 400 (reguler).
• 700 (tebal).
• 900 (ekstra tebal).

Semua varian di antara varian lainnya (ditunjukkan dengan warna abu-abu) otomatis dipetakan ke varian terdekat oleh browser.

Jika berat ditetapkan untuk wajah yang tidak ada, wajah dengan berat di sekitar akan digunakan. Secara umum, bobot tebal memetakan ke wajah dengan bobot lebih berat dan bobot lebih ringan.

Algoritma pencocokan font CSS

Logika serupa berlaku untuk varian miring. Perancang font mengontrol varian mana yang akan mereka hasilkan, dan Anda mengontrol varian mana yang akan digunakan di halaman. Karena setiap varian merupakan hasil download terpisah, sebaiknya pertahankan jumlah varian yang kecil. Misalnya, Anda dapat menentukan dua varian tebal untuk kelompok Awesome Font:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

Contoh di atas mendeklarasikan jenis Awesome Font yang terdiri dari dua resource yang mencakup kumpulan glyph Latin (U+000-5FF) yang sama, tetapi menawarkan dua "bobot" yang berbeda: normal (400) dan tebal (700). Namun, apa yang terjadi jika salah satu aturan CSS Anda menentukan ketebalan font yang berbeda, atau menetapkan properti font-style ke italic?

• Jika font yang benar-benar sama tidak tersedia, browser akan mengganti dengan font yang paling cocok.
• Jika tidak ditemukan gaya yang cocok (misalnya, tidak ada varian miring yang dinyatakan dalam contoh di atas), browser akan mensintesis varian font-nya sendiri.

Peringatan: Perlu diketahui bahwa pendekatan yang disintesis mungkin tidak cocok untuk skrip seperti Sirilik, yang mana bentuk miring sangat berbeda bentuknya. Untuk fidelitas yang sesuai dalam skrip tersebut, gunakan font miring yang sebenarnya.

Contoh di atas menggambarkan perbedaan antara hasil font aktual vs. disintesis untuk Open Sans. Semua varian yang disintesis dihasilkan dari font tunggal dengan bobot 400. Seperti yang Anda lihat, ada perbedaan yang jelas dalam hasilnya. Detail tentang cara membuat varian tebal dan miring tidak ditentukan. Oleh karena itu, hasilnya bervariasi dari browser ke browser, dan sangat bergantung pada font.

Catatan: Untuk konsistensi dan hasil visual terbaik, jangan mengandalkan sintesis font. Sebaliknya, minimalkan jumlah varian font yang digunakan dan tentukan lokasinya, sehingga browser dapat mendownloadnya saat digunakan pada halaman. Atau, pilih untuk menggunakan font variabel. Meskipun demikian, dalam beberapa kasus, varian yang disintesis mungkin merupakan opsi yang dapat digunakan, tetapi berhati-hatilah dalam menggunakan varian yang disintesis.

Checklist pengoptimalan ukuran font web

• Audit dan pantau penggunaan font: jangan gunakan terlalu banyak font di halaman, dan, untuk setiap font, minimalkan jumlah varian yang digunakan. Hal ini membantu menghasilkan pengalaman yang lebih konsisten dan lebih cepat bagi pengguna.
• Hindari format lama jika memungkinkan: Format EOT, TTF, dan WOFF lebih besar dari WOFF 2.0. EOT dan TTF adalah format yang sangat tidak perlu, sementara WOFF mungkin dapat diterima jika Anda perlu mendukung Internet Explorer 11. Jika Anda hanya menargetkan browser modern, menggunakan WOFF 2.0 saja merupakan opsi yang paling sederhana dan berperforma terbaik.
• Subset resource font Anda: banyak font dapat menjadi subset, atau dibagi menjadi beberapa rentang unicode untuk menghasilkan hanya glyph yang diperlukan halaman tertentu. Ini akan mengurangi ukuran file dan meningkatkan kecepatan download sumber daya. Namun, saat menentukan subset, berhati-hatilah untuk mengoptimalkan penggunaan kembali font. Misalnya, jangan mendownload kumpulan karakter yang berbeda, tetapi tumpang tindih di setiap halaman. J praktik yang baik adalah men-subset berdasarkan skrip: misalnya, Latin, dan Sirilik.
• Prioritaskan local() dalam daftar src Anda: mencantumkan local('Font Name') terlebih dahulu dalam daftar src memastikan bahwa permintaan HTTP tidak dibuat untuk font yang sudah diinstal.
• Gunakan Lighthouse untuk menguji kompresi teks.

Efek pada Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS)

Bergantung pada konten halaman Anda, node teks dapat dianggap sebagai kandidat untuk Largest Contentful Paint (LCP). Oleh karena itu, penting untuk memastikan font web Anda sekecil mungkin dengan mengikuti saran dalam artikel ini agar pengguna dapat melihat teks di halaman Anda sesegera mungkin.

Jika Anda khawatir bahwa, terlepas dari upaya pengoptimalan Anda, teks halaman mungkin memerlukan waktu terlalu lama untuk muncul karena resource font web yang besar, properti font-display memiliki sejumlah setelan yang dapat membantu Anda menghindari teks yang tidak terlihat saat font didownload. Namun, menggunakan nilai swap dapat menyebabkan pergeseran tata letak signifikan yang memengaruhi Pergeseran Tata Letak Kumulatif (CLS) situs Anda. Sebaiknya gunakan nilai optional atau fallback jika memungkinkan.

Jika {i>font<i} web Anda sangat penting untuk merek Anda—dan oleh karena itu, pengalaman pengguna—pertimbangkan {i>preload<i} {i>font<i} Anda sehingga browser dapat mulai memintanya. Hal ini dapat mengurangi periode pertukaran jika Anda menggunakan font-display: swap, atau periode pemblokiran jika Anda tidak menggunakan font-display.