Mengurangi ukuran font web

Ilya Grigorik
Jeremy Wagner

Tipografi adalah hal mendasar untuk menciptakan desain, {i>branding<i}, keterbacaan, dan aksesibilitas yang baik. Font web memungkinkan semua hal di atas dan juga hal lainnya: teks dapat dipilih, ditelusuri, dapat di-zoom, dan ramah untuk DPI yang tinggi, 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 merupakan bagian penting dari strategi performa secara keseluruhan. Setiap font merupakan sumber daya tambahan, dan beberapa font mungkin memblokir rendering teks, namun hanya karena halaman menggunakan WebFonts, bukan berarti halaman harus merender lebih lambat. Sebaliknya, font yang dioptimalkan, dikombinasikan dengan strategi yang bijaksana terkait cara font dimuat dan diterapkan di halaman, dapat membantu mengurangi ukuran halaman total dan memperbaiki waktu rendering halaman.

Anatomi font web

Font web adalah kumpulan glyph, dan setiap glyph adalah bentuk vektor yang menggambarkan huruf atau simbol. Hasilnya, 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 WebFont paling populer, berisi 897 glyph, yang mencakup karakter Latin, Yunani, dan Cyrillic.

Tabel glyph font

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

Dalam posting ini Anda akan mengetahui cara mengurangi ukuran file {i>font<i} web Anda yang dikirim.

Format font web

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

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

  • Menyajikan varian WOFF 2.0 ke browser modern.
  • Jika benar-benar diperlukan—seperti jika Anda masih perlu mendukung Internet Explorer 11, misalnya—lakukan WOFF sebagai pengganti.
  • Atau, pertimbangkan untuk tidak menggunakan font web untuk browser lama dan kembali ke font sistem. Performanya mungkin lebih baik 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 mengakibatkan waktu download font web yang lebih lama.

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

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

Menentukan jenis font dengan @font-face

CSS at-rule @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 "jenis font", yang akan digunakan browser untuk mengevaluasi resource 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. Daripada harus memuat gaya reguler dan tebal beserta versi miring, Anda dapat memuat satu file yang berisi semua informasi. Namun, ukuran file font variabel akan lebih besar daripada varian font individual, meskipun lebih kecil dibandingkan kombinasi banyak varian. Daripada hanya satu font variabel besar, akan lebih baik jika Anda menyediakan varian font penting terlebih dahulu, dengan varian lain 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 menyediakan 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 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-tama, perhatikan bahwa contoh di atas menetapkan satu jenis Awesome Font dengan dua gaya (normal dan miring), yang masing-masing mengarah ke kumpulan resource font yang berbeda. Selanjutnya, setiap deskripsi src berisi daftar prioritas yang dipisahkan koma dari varian resource:

  • Perintah local() memungkinkan Anda mereferensikan, memuat, dan menggunakan font yang diinstal secara lokal. Jika pengguna sudah menginstal font di sistem mereka, tindakan ini akan mengabaikan jaringan sepenuhnya, dan menjadi yang tercepat.
  • Perintah url() memungkinkan Anda memuat font eksternal, dan dapat berisi petunjuk format() opsional yang menunjukkan format font yang dirujuk oleh URL yang disediakan.

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 mana yang diperlukan untuk merender teks tertentu pada halaman. Font yang bukan bagian dari CSS Object Model (CSSOM) halaman tidak akan didownload oleh browser, karena font tersebut 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 definisi eksternal:
    • Jika petunjuk format ada, browser akan memeriksa apakah petunjuk itu mendukungnya sebelum memulai download. Jika browser tidak mendukung petunjuk tersebut, 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 menetapkan semua format font yang tersedia dan membiarkan browser menangani yang lainnya. Browser menentukan resource mana yang diperlukan dan akan memilih format yang optimal.

Men-subset rentang unicode

Selain properti font seperti gaya, ketebalan, dan regangan, aturan @font-face memungkinkan Anda menentukan kumpulan titik kode Unicode yang didukung oleh setiap resource. Hal ini memungkinkan Anda untuk 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 pada halaman tertentu.

Deskripsi unicode-range memungkinkan Anda menentukan daftar nilai rentang yang dipisahkan koma, yang masing-masing dapat menggunakan 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

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

Penggunaan {i>subset<i} rentang Unicode dan file terpisah untuk setiap varian bergaya dari {i>font<i} memungkinkan Anda untuk menentukan jenis font komposit yang sama-sama lebih cepat dan lebih efisien untuk diunduh. 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 kasus ini, Anda harus kembali menyediakan resource font tunggal yang berisi semua subset yang diperlukan dan menyembunyikan sisanya dari browser. Misalnya, jika laman hanya menggunakan karakter Latin, maka Anda bisa melepaskan glyph lain dan menyediakan subset khusus itu sebagai sumber daya 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 membuat subset dan mengoptimalkan font Anda.
    • Beberapa server font—seperti Google Font—akan otomatis di-subset 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 mungkin berisi bentuk glyph yang sangat berbeda—misalnya, jarak, ukuran, atau bentuk yang sama sekali berbeda.

Ketebalan font

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

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

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

Jika berat ditentukan untuk yang tidak memiliki wajah, 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. Desainer {i>font<i} mengontrol varian mana yang akan mereka hasilkan, dan Anda mengontrol varian mana yang akan Anda gunakan pada laman. Karena setiap varian adalah hasil download yang 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 menentukan ketebalan font yang berbeda, atau menetapkan properti font-style ke italic?

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

Contoh di atas menggambarkan perbedaan antara hasil font aktual vs. disintesis untuk Open Sans. Semua varian yang disintesis dihasilkan dari satu font berbobot 400. Seperti yang Anda lihat, ada perbedaan yang jelas dalam hasilnya. Detail tentang cara menghasilkan 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: jangan gunakan terlalu banyak font di halaman Anda, dan, untuk setiap font, minimalkan jumlah varian yang digunakan. Hal ini akan 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 benar-benar tidak diperlukan, yang mana WOFF mungkin dapat diterima jika Anda perlu mendukung Internet Explorer 11. Jika Anda hanya menargetkan browser modern, menggunakan WOFF 2.0 saja adalah opsi paling sederhana dan berperforma terbaik.
  • Subset resource font Anda: banyak font dapat menjadi subset, atau dibagi menjadi beberapa rentang unicode untuk menghasilkan glyph yang diperlukan oleh halaman tertentu saja. Ini mengurangi ukuran file dan meningkatkan kecepatan download sumber daya. Akan tetapi, ketika 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 Cyrillic.
  • Prioritaskan 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 Pergeseran Tata Letak Kumulatif (CLS)

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

Jika Anda khawatir, meskipun telah melakukan upaya pengoptimalan, teks halaman mungkin memerlukan waktu terlalu lama untuk ditampilkan 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, 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 {i>branding<i} Anda — dan oleh karena itu, pengalaman pengguna — pertimbangkan untuk melakukan pramuat font Anda sehingga browser mulai memintanya. Hal ini dapat mengurangi periode penukaran jika Anda menggunakan font-display: swap, atau periode pemblokiran jika Anda tidak menggunakan font-display.