Mengurangi ukuran font web

Ilya Grigorik
Jeremy Wagner

Tipografi adalah hal mendasar bagi terciptanya desain, branding, keterbacaan, dan aksesibilitas yang baik. Font web memungkinkan semua hal di atas dan juga yang lainnya: teks dapat dipilih, ditelusuri, di-zoom, dan ramah untuk DPI yang tinggi, menyediakan rendering teks yang konsisten dan tajam apa pun ukuran dan resolusinya. WebFont sangat penting bagi desain yang baik, UX, dan kinerja.

Pengoptimalan font web merupakan bagian penting dari strategi performa keseluruhan. Setiap font merupakan resource tambahan, dan beberapa font mungkin memblokir rendering teks, tetapi karena halaman menggunakan WebFonts, bukan berarti halaman harus merender lebih lambat. Sebaliknya, font yang dioptimalkan, dipadukan dengan strategi yang cermat mengenai cara webfont dimuat dan diterapkan pada halaman akan dapat membantu mengurangi ukuran halaman total, dan memperbaiki waktu rendering halaman.

Anatomi font web

Font web adalah sekumpulan glyph, dan setiap glyph merupakan bentuk vektor yang menggambarkan huruf atau simbol. Hasilnya, dua variabel sederhana menentukan file ukuran font tertentu: kompleksitas jalur vektor dari setiap glyph dan jumlah gylph dalam font tertentu. Misalnya, Open Sans, yang merupakan salah satu WebFont terpopuler, mengandung 897 glyph, yang meliputi karakter Latin, Yunani, dan Cyrilic.

Tabel glyph font

Saat memilih font, penting untuk mempertimbangkan himpunan karakter apa yang didukung. Jika Anda perlu melokalkan materi halaman Anda ke beberapa bahasa, Anda harus menggunakan font yang dapat menampilkan tampilan dan pengalaman yang konsisten ke pengguna. Misalnya, jenis font Noto dari 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 postingan ini, Anda akan mengetahui cara mengurangi ukuran file font web yang dikirim.

Format font web

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

WOFF dan WOFF 2.0 memiliki dukungan yang 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—tayangkan WOFF sebagai penggantian.
  • Atau, pertimbangkan untuk tidak menggunakan font web untuk browser lama dan kembali ke font sistem. Hal ini mungkin juga lebih berperforma untuk perangkat lama yang 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 menyebabkan waktu download font web yang lebih lama.

Font web dan kompresi

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 informasi selengkapnya, lihat laporan evaluasi WOFF 2.0.

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

Menentukan jenis font dengan @font-face

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

Mempertimbangkan font variabel

Font variabel dapat secara signifikan mengurangi ukuran file font jika Anda memerlukan beberapa varian font. Daripada harus memuat gaya reguler dan tebal serta versi miringnya, Anda dapat memuat satu file yang berisi semua informasi. Namun, ukuran file font variabel akan lebih besar daripada setiap varian font—meskipun lebih kecil daripada kombinasi banyak varian. Daripada satu font variabel besar, sebaiknya tayangkan varian font penting terlebih dahulu, dengan varian lain yang didownload nanti.

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

Memilih 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), masing-masing yang mengarah ke kumpulan resource font yang berbeda. Pada gilirannya, setiap deskriptor src berisi daftar prioritas, yang dipisah koma dari varian resource:

  • Direktif local() memungkinkan Anda mereferensikan, memuat, dan menggunakan font yang diinstal secara lokal. Jika pengguna sudah menginstal font di sistemnya, font akan sepenuhnya mengabaikan jaringan, dan merupakan cara tercepat.
  • Direktif url() memungkinkan Anda memuat font eksternal, dan diizinkan untuk berisi petunjuk format() opsional yang menunjukkan format font yang dirujuk oleh URL yang disediakan.

Ketika browser menentukan bahwa font diperlukan, browser menyatakan melalui daftar resource yang diberikan dalam urutan yang ditetapkan serta mencoba memuat resource yang sesuai. Misalnya, mengikuti contoh di atas:

  1. Browser melakukan tata letak halaman dan menentukan varian font mana yang diperlukan untuk merender teks yang ditentukan di 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 ada pada browser, periksa apakah petunjuk itu mendukungnya sebelum memulai download. Jika browser tidak mendukung petunjuk, browser akan melanjutkan ke yang berikutnya.
    • Jika tidak ada petunjuk format, browser akan mendownload resource.

Kombinasi direktif lokal dan eksternal dengan petunjuk format yang sesuai memungkinkan kita untuk menentukan semua font yang tersedia dan membiarkan browser menangani yang tersisa. Browser menentukan resource mana yang diperlukan dan akan memilih format yang optimal.

Subkumpulan rentang Unicode

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

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

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

Misalnya, Anda dapat memisahkan jenis Awesome Font ke dalam subset Latin dan Jepang, masing-masing akan 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??;
}

Penggunaan subset rentang Unicode, dan file terpisah untuk setiap varian bergaya dari font memungkinkan Anda menentukan jenis font komposit yang sama-sama lebih cepat dan lebih efisien untuk didownload. Pengunjung hanya mengunduh varian dan subset yang diperlukan, dan tidak dipaksa mengunduh subset yang mungkin tidak pernah mereka lihat atau gunakan di halaman.

Hampir semua browser mendukung unicode-range. Untuk kompatibilitas dengan browser lama, Anda mungkin perlu kembali ke "subset manual". Dalam hal ini, Anda harus kembali untuk menyediakan satu resource font yang berisi semua subset yang diperlukan dan menyembunyikan yang lainnya dari browser. Misalnya, jika halaman hanya menggunakan karakter Latin, Anda dapat menghapus glyph lain dan menyediakan subset khusus tersebut sebagai resource mandiri.

  1. Menentukan subset yang diperlukan:
    • Jika browser mendukung subset rentang unicode, 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 perlu; yaitu, developer harus menentukan subset yang diperlukan.
  2. Buat subset font:
    • Gunakan alat pyftsubset open source untuk men-subset dan mengoptimalkan font Anda.
    • Beberapa server font—seperti Google Font—akan otomatis membuat subkumpulan secara default.
    • Beberapa layanan font memungkinkan subset manual lewat parameter kueri khusus, yang dapat Anda gunakan untuk menetapkan secara manual subset yang dibutuhkan 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 dapat berisi bentuk glyph yang sangat berbeda—misalnya, spasi, ukuran, atau bentuk yang sama sekali berbeda.

Ketebalan font

Diagram di atas menggambarkan jenis font yang menawarkan tiga ketebalan tebal yang berbeda:

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

Semua varian antara lainnya (diindikasikan dalam warna abu-abu) otomatis dipetakan ke varian terdekat oleh browser.

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

Algoritme pencocokan font CSS

Logika serupa berlaku untuk varian italic. Desainer font mengontrol varian mana yang akan mereka produksi, dan Anda mengontrol varian yang akan digunakan di halaman. Karena setiap varian merupakan hasil download terpisah, sebaiknya jumlah varian tetap kecil. Misalnya, Anda dapat menentukan dua varian tebal untuk jenis 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 yang sama (U+000-5FF), tetapi menawarkan dua "bobot" yang berbeda: normal (400) dan tebal (700). Namun, apa yang terjadi jika salah satu aturan CSS Anda menetapkan bobot font berbeda, atau menetapkan properti font-style ke italic?

  • Jika font yang benar-benar sama tidak tersedia, browser akan mengganti dengan yang paling cocok terdekat.
  • Jika tidak ditemukan gaya yang cocok (misalnya, kita tidak mendeklarasikan varian miring apa pun dalam contoh di atas) maka browser akan mensintesiskan varian font-nya sendiri.
Sintesis font

Contoh di atas menggambarkan perbedaan di antara hasil font aktual vs. disintesiskan untuk Open Sans. Semua varian yang disintesiskan dihasilkan dari font yang berbobot 400. Seperti yang Anda lihat, ada perbedaan yang mencolok dalam hasilnya. Detail mengenai cara menghasilkan varian tebal dan miring tidak ditetapkan. Oleh karena itu, hasilnya bervariasi dari browser ke browser, dan sangat bergantung pada font.

Checklist pengoptimalan ukuran font web

  • Audit dan pantau penggunaan font Anda: jangan gunakan terlalu banyak font di halaman Anda, dan untuk setiap font, minimalkan jumlah varian yang digunakan. Hal ini akan membantu mencapai 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 benar-benar tidak diperlukan, sedangkan WOFF dapat diterima jika Anda perlu mendukung Internet Explorer 11. Jika Anda hanya menargetkan browser modern, menggunakan WOFF 2.0 saja adalah 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 oleh halaman tertentu. Hal ini mengurangi ukuran file dan meningkatkan kecepatan download resource. Namun, ketika mendefinisikan subset, berhati-hatilah untuk mengoptimalkan bagi font yang akan digunakan kembali. Misalnya, jangan mendownload kumpulan karakter yang berbeda namun tumpang tindih pada setiap halaman. Praktik yang baik adalah membuat subkumpulan berdasarkan skrip: misalnya, Latin, dan Cyrillic.
  • Memberikan prioritas ke local() dalam daftar src: 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.

Pengaruh 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 sehingga pengguna akan melihat teks di halaman Anda sesegera mungkin.

Jika Anda khawatir bahwa, meskipun telah melakukan upaya pengoptimalan, 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, penggunaan nilai swap dapat menyebabkan perubahan tata letak yang signifikan yang memengaruhi Cumulative Layout Shift (CLS) situs Anda. Sebaiknya gunakan nilai optional atau fallback jika memungkinkan.

Jika font web Anda sangat penting untuk branding—dan oleh karena itu, pengalaman pengguna—pertimbangkan untuk memuat font terlebih dahulu sehingga browser dapat lebih cepat memintanya. Hal ini dapat mengurangi periode swap jika Anda menggunakan font-display: swap, atau periode pemblokiran jika Anda tidak menggunakan font-display.