Mengurangi ukuran font web

Ilya Grigorik
Jeremy Wagner

Tipografi sangat penting untuk desain yang baik, branding, keterbacaan, dan aksesibilitas. 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. WebFont 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 WebFont tidak berarti halaman tersebut harus dirender lebih lambat. Sebaliknya, font yang dioptimalkan, jika dikombinasikan dengan strategi yang tepat untuk cara memuat dan menerapkannya di halaman, dapat membantu mengurangi ukuran total halaman dan meningkatkan waktu rendering halaman.

Anatomi font web

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

Tabel glif font

Saat memilih font, penting untuk mempertimbangkan set 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, keluarga font Noto Google bertujuan untuk mendukung semua bahasa di dunia. Namun, perhatikan bahwa ukuran total Noto, dengan semua bahasa yang disertakan, menghasilkan download ZIP sebesar 1, 1 GB+.

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

Format font web

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

WOFF dan WOFF 2.0 didukung secara 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—sajikan WOFF sebagai pengganti.
  • Atau, pertimbangkan untuk tidak menggunakan font web untuk browser lama dan beralih ke font sistem. Hal ini juga dapat meningkatkan performa 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 yang 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 informasi hinting font dan kerning yang mungkin tidak diperlukan di beberapa platform, sehingga memungkinkan pengoptimalan ukuran file lebih lanjut. Misalnya, Google Fonts menyediakan lebih dari 30 varian yang dioptimalkan untuk setiap font dan otomatis mendeteksi serta mengirimkan varian yang optimal untuk setiap platform dan browser.

Menentukan jenis font dengan @font-face

Aturan @ CSS @font-face memungkinkan Anda menentukan lokasi resource font tertentu, karakteristik gayanya, dan titik kode Unicode yang harus digunakan. Kombinasi deklarasi @font-face tersebut dapat digunakan untuk membuat "keluarga 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 Anda jika Anda memerlukan beberapa varian font. Daripada perlu 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 sajikan varian font penting terlebih dahulu, dengan varian lainnya didownload nanti.

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

Pilih format yang tepat

Setiap deklarasi @font-face memberikan nama kumpulan font, yang berfungsi sebagai grup logis dari beberapa deklarasi, properti font seperti gaya, tebal, 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 keluarga 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 dipisahkan koma dan diprioritaskan:

  • Direktif local() memungkinkan Anda mereferensikan, memuat, dan menggunakan font yang diinstal secara lokal. Jika pengguna sudah menginstal font di sistemnya, hal ini akan melewati jaringan sepenuhnya, dan merupakan cara tercepat.
  • Dengan direktif url(), Anda dapat memuat font eksternal, dan diizinkan untuk berisi petunjuk format() opsional yang menunjukkan format font yang dirujuk 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 tersedia secara lokal.
  3. Jika font tidak tersedia secara lokal, browser akan melakukan iterasi pada definisi eksternal:
    • Jika ada petunjuk format, browser akan memeriksa apakah petunjuk tersebut didukung sebelum memulai download. Jika browser tidak mendukung petunjuk, browser akan beralih 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 serangkaian titik kode Unicode yang didukung oleh setiap resource. Hal ini memungkinkan Anda membagi font Unicode besar menjadi subset yang lebih kecil (misalnya, subset Latin, Cyrillic, dan Yunani) dan hanya mendownload glyph yang diperlukan untuk merender teks di halaman tertentu.

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

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

  1. Tentukan subset mana yang diperlukan:
    • Jika browser mendukung subsetting unicode-range, 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 unicode-range, halaman harus menyembunyikan semua subset yang tidak diperlukan; artinya, developer harus menentukan subset yang diperlukan.
  2. Buat 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 subset manual melalui parameter kueri kustom, yang dapat Anda gunakan untuk menentukan subset yang diperlukan untuk halaman Anda secara manual. Lihat dokumentasi dari penyedia font Anda.

Pemilihan dan sintesis font

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

Ketebalan font

Diagram di atas mengilustrasikan family font yang menawarkan tiga ketebalan huruf yang berbeda:

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

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

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

Algoritma pencocokan font CSS

Logika serupa berlaku untuk varian miring. Desainer font mengontrol varian yang akan dihasilkan, dan Anda mengontrol varian yang akan digunakan di halaman. Karena setiap varian adalah download terpisah, sebaiknya jumlah varian tetap sedikit. 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 keluarga Awesome Font yang terdiri dari dua resource yang mencakup kumpulan glif 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 kecocokan font persis tidak tersedia, browser akan menggantinya dengan kecocokan terdekat.
  • Jika tidak ada kecocokan gaya yang ditemukan (misalnya, tidak ada varian miring yang dideklarasikan dalam contoh di atas), browser akan mensintesis varian fontnya sendiri.
Sintesis font

Contoh di atas mengilustrasikan perbedaan antara hasil font yang sebenarnya vs. hasil font yang disintesis untuk Open Sans. Semua varian yang disintesis dihasilkan dari satu font dengan ketebalan 400. Seperti yang Anda lihat, ada perbedaan yang terlihat jelas 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 sama sekali 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 berperforma tinggi.
  • Buat subset resource font Anda: banyak font dapat dibuat subset, atau dibagi menjadi beberapa unicode-range untuk hanya menampilkan glyph yang diperlukan halaman tertentu. Hal ini mengurangi ukuran file dan meningkatkan kecepatan download resource. Namun, saat menentukan subset, berhati-hatilah untuk mengoptimalkan penggunaan ulang 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.
  • Berikan prioritas pada local() dalam daftar src Anda: mencantumkan local('Font Name') terlebih dahulu dalam daftar src Anda 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, sangat 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 telah melakukan upaya pengoptimalan, teks halaman mungkin terlalu lama muncul karena resource font web yang besar, properti font-display memiliki sejumlah setelan yang dapat membantu Anda menghindari teks yang tidak terlihat saat font sedang didownload. Namun, penggunaan nilai swap dapat menyebabkan perubahan tata letak yang signifikan dan memengaruhi Cumulative Layout Shift (CLS) situs Anda. Sebaiknya gunakan nilai optional atau fallback jika memungkinkan.

Jika font web sangat penting untuk branding Anda—dan dengan demikian, pengalaman pengguna—pertimbangkan untuk memuat font terlebih dahulu agar browser memiliki permulaan yang baik dalam memintanya. Hal ini dapat mengurangi periode pertukaran jika Anda menggunakan font-display: swap, atau periode pemblokiran jika Anda tidak menggunakan font-display.