Mengurangi ukuran font web

Ilya Grigorik

Jeremy Wagner

Tipografi sangat penting untuk desain, branding, keterbacaan, dan aksesibilitas yang baik. Font web memungkinkan semua hal di atas dan lainnya: teks dapat dipilih, ditelusuri, di-zoom, dan kompatibel dengan DPI tinggi, sehingga memberikan rendering teks yang konsisten dan tajam, terlepas dari ukuran dan resolusi layar. Font web sangat penting untuk desain, UX, dan performa yang baik.

Pengoptimalan font web adalah bagian penting dari strategi performa secara keseluruhan. Setiap font adalah resource tambahan, dan beberapa font dapat memblokir rendering teks, tetapi hanya karena halaman menggunakan font web tidak berarti halaman tersebut harus dirender lebih lambat. Sebaliknya, font yang dioptimalkan, dikombinasikan dengan strategi yang bijaksana tentang cara font dimuat dan diterapkan di halaman, dapat membantu mengurangi ukuran halaman total dan meningkatkan waktu rendering halaman.

Anatomi font web

Font web adalah kumpulan glyph, dan setiap glyph adalah bentuk vektor yang menjelaskan huruf atau simbol. Oleh karena itu, dua variabel sederhana menentukan ukuran file font tertentu: kompleksitas jalur vektor setiap glyph dan jumlah glyph dalam font tertentu. Misalnya, Open Sans, yang merupakan salah satu font web paling populer, berisi 897 glyph, yang mencakup karakter Latin, Yunani, dan Sirilik.

Saat memilih font, penting untuk mempertimbangkan kumpulan karakter mana yang didukung. Jika Anda 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 Noto, dengan semua bahasa disertakan, menghasilkan download ZIP 1, 1 GB+.

Dalam postingan ini, Anda akan mengetahui cara mengurangi ukuran file font web yang dikirimkan.

Format font web

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

• EOT
• TTF
• WOFF
• WOFF2.

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

• Menayangkan varian WOFF 2.0 ke browser modern.
• Jika benar-benar diperlukan—misalnya, jika Anda masih perlu mendukung Internet Explorer 11—tayangkan WOFF sebagai pengganti.
• Atau, pertimbangkan untuk tidak menggunakan font web untuk browser lama dan kembali ke font sistem. Hal ini juga dapat meningkatkan performa untuk perangkat lama yang lebih terbatas.
• Karena WOFF dan WOFF 2.0 mencakup semua basis 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 mengetahui informasi selengkapnya, lihat laporan evaluasi WOFF 2.0.

Terakhir, perlu diperhatikan bahwa beberapa format font berisi metadata tambahan, seperti petunjuk font dan kerning yang mungkin tidak diperlukan di beberapa platform, sehingga memungkinkan pengoptimalan ukuran file lebih lanjut. Misalnya, Google Fonts mempertahankan 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

Aturan CSS @font-face memungkinkan Anda menentukan lokasi resource font tertentu, karakteristik gaya, dan titik kode Unicode yang akan digunakan. Kombinasi deklarasi @font-face tersebut 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 mengurangi ukuran file font secara signifikan 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 varian font individual—meskipun lebih kecil daripada kombinasi banyak varian. Daripada satu font variabel besar, sebaiknya tayangkan varian font penting terlebih dahulu, dengan varian lainnya didownload nanti.

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

Memilih format yang tepat

Setiap @font-face deklarasi memberikan nama jenis font, yang bertindak sebagai grup logis dari beberapa deklarasi, properti font seperti gaya, ketebalan, dan peregangan, serta deskriptor src, yang menentukan daftar lokasi yang diprioritaskan 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, 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:

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

Saat 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 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 tersebut tersedia secara lokal.
3. Jika font tidak tersedia secara lokal, browser akan melakukan iterasi pada definisi eksternal:
   • Jika petunjuk format ada, browser akan memeriksa apakah browser mendukung petunjuk tersebut sebelum memulai download. Jika browser tidak mendukung petunjuk tersebut, browser akan melanjutkan ke petunjuk berikutnya.
   • Jika tidak ada petunjuk format, browser akan mendownload resource.

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

Subsetting rentang Unicode

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

Deskriptor unicode-range memungkinkan Anda menentukan daftar nilai rentang yang dipisahkan koma, yang masing-masing dapat berada dalam salah satu dari tiga bentuk yang berbeda:

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

Misalnya, Anda dapat membagi jenis Awesome Font menjadi subset Latin dan Jepang, yang masing-masing didownload 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 gaya font memungkinkan Anda menentukan jenis font komposit yang lebih cepat dan lebih efisien untuk didownload. Pengunjung hanya mendownload varian dan subset yang mereka butuhkan, dan mereka tidak dipaksa untuk mendownload 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 "subsetting manual". Dalam hal ini, Anda harus kembali ke penyediaan satu resource font yang berisi semua subset yang diperlukan dan menyembunyikan sisanya dari browser. Misalnya, jika halaman hanya menggunakan karakter Latin, Anda dapat menghapus glyph lainnya dan menayangkan subset tertentu sebagai resource mandiri.

1. Menentukan subset yang diperlukan:
   • Jika browser mendukung subsetting 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 subsetting 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 membuat subset dan mengoptimalkan font Anda.
   • Beberapa server font—seperti Google Font—akan otomatis membuat subset secara default.
   • Beberapa layanan font memungkinkan subsetting manual melalui parameter kueri kustom, yang dapat Anda gunakan untuk menentukan subset yang diperlukan secara manual 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. Setiap varian, pada gilirannya, dapat berisi bentuk glyph yang sangat berbeda—misalnya, spasi, ukuran, atau bentuk yang berbeda.

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

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

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

Jika ketebalan ditentukan yang tidak memiliki wajah, wajah dengan ketebalan terdekat akan digunakan. Secara umum, ketebalan tebal dipetakan ke wajah dengan ketebalan yang lebih tebal dan ketebalan ringan dipetakan ke wajah dengan ketebalan yang lebih ringan.

Algoritma pencocokan font CSS

Logika yang sama berlaku untuk varian miring. Desainer font mengontrol varian mana yang akan mereka hasilkan, dan Anda mengontrol varian mana yang akan digunakan di halaman. Karena setiap varian adalah 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 "ketebalan" 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 pencocokan font yang tepat tidak tersedia, browser akan mengganti pencocokan terdekat.
• Jika tidak ditemukan pencocokan gaya (misalnya, tidak ada varian miring yang dideklarasikan dalam contoh di atas), browser akan membuat varian fontnya sendiri.

Contoh di atas mengilustrasikan perbedaan antara hasil font yang sebenarnya dan yang disintesis untuk Open Sans. Semua varian yang disintesis dihasilkan dari satu font dengan ketebalan 400. Seperti yang dapat Anda lihat, ada perbedaan yang signifikan dalam hasilnya. Detail cara membuat varian tebal dan miring tidak ditentukan. 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 membantu menghasilkan pengalaman yang lebih konsisten dan lebih cepat bagi pengguna Anda.
• Hindari format lama jika memungkinkan: Format EOT, TTF, dan WOFF lebih besar daripada WOFF 2.0. EOT dan TTF adalah format yang tidak diperlukan, sedangkan WOFF mungkin 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 paling berperforma.
• Buat subset resource font Anda: banyak font dapat dibuat subset, atau dibagi menjadi beberapa rentang Unicode untuk mengirimkan hanya glyph yang diperlukan halaman tertentu. Hal ini mengurangi ukuran file dan meningkatkan kecepatan download resource. Namun, saat menentukan subset, berhati-hatilah untuk mengoptimalkan penggunaan kembali font. Misalnya, jangan mendownload kumpulan karakter yang berbeda tetapi tumpang-tindih di setiap halaman. Praktik yang baik adalah membuat 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, 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, meskipun 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 untuk menghindari teks yang tidak terlihat saat font didownload. Namun, menggunakan nilai swap dapat menyebabkan pergeseran tata letak yang signifikan yang memengaruhi Cumulative Layout Shift (CLS) situs Anda. Pertimbangkan untuk menggunakan nilai optional atau fallback jika memungkinkan.

Jika font web sangat penting untuk branding Anda—dan sebagai ekstensi, pengalaman pengguna—pertimbangkan untuk melakukan pramuat font sehingga browser memiliki awal yang baik untuk memintanya. Hal ini dapat mengurangi periode swap jika Anda menggunakan font-display: swap, atau periode pemblokiran jika Anda tidak menggunakan font-display.