Font Loading

Web font adalah sumber daya yang paling sering menunda teks: huruf tidak dapat digambar sebelum filenya tiba, dan ketika font akhirnya terpasang, ukurannya dapat berbeda dari font cadangan sehingga tata letak bergeser. Karena itu strategi font loading berdiri sendiri, terpisah dari strategi stylesheet pada chapter sebelumnya. Pada Chapter ini kita membahas tiga alat utamanya — properti font-display , petunjuk preload, dan penyesuaian ukuran fallback — semuanya di atas dasar yang telah dibahas pada Chapter Web Fonts .

font-display: Memilih Perilaku Selama Menunggu #

Ketika teks siap digambar tetapi web font belum tiba, browser memakai font fallback untuk sementara. Properti font-display pada aturan @font-face menentukan berapa lama penundaan itu dan apa yang ditampilkan di setiap fase:

Pemakaian pada @font-face:

@font-face {
  font-family: "Naskah Utama";
  src: url("naskah-utama.woff2") format("woff2");
  font-display: swap;
}

.judul {
  font-family: "Naskah Utama", Georgia, serif;
}

Mari kita telaah perannya:

1. font-family: "Naskah Utama" pada @font-face: mendeklarasikan nama font yang akan diunduh dari naskah-utama.woff2.
2. font-display: swap: selama unduhan berlangsung, teks judul langsung digambar dengan Georgia; ketika font utama tiba, browser menggantinya. Pengguna membaca lebih cepat dengan risiko kedipan kecil saat penggantian.
3. Rantai fallback "Naskah Utama", Georgia, serif: urutan cadangan yang dipakai selama fase swap — pilih fallback yang mirip bentuknya agar pergeseran minimal.

Preload dan Pencarian yang Terlambat #

Font sering ditemukan browser terlambat: unduhan baru dimulai setelah CSS di-parse dan diterapkan, karena URL font tertulis di dalam @font-face. Petunjuk preload di <head> memulai unduhan sejak awal, berdampingan dengan unduhan CSS:

<link rel="preload" href="naskah-utama.woff2" as="font" type="font/woff2" crossorigin>

Atribut as="font" memberi tahu jenis sumber daya, dan crossorigin wajib ada untuk font meskipun file berada di domain sendiri — tanpa atribut itu, font justru diunduh dua kali. Preload hanya untuk font yang benar-benar dipakai pada tampilan awal; memuat terlalu banyak font justru memperebutkan bandwidth dengan CSS dan gambar.

Menyetel Ukuran Fallback dengan size-adjust #

Ketika font fallback tampil lebih dulu, ukurannya jarang persis sama dengan font utama, sehingga layout bergeser saat pertukaran terjadi. Deskriptor size-adjust pada @font-face untuk font fallback menskalakannya agar metriknya mendekati font utama:

@font-face {
  font-family: "Cadangan Terskala";
  src: local("Georgia");
  size-adjust: 105%;
  ascent-override: 95%;
}

.judul {
  font-family: "Naskah Utama", "Cadangan Terskala", Georgia, serif;
}

Teknik ini dikenal juga sebagai fallback font tuning: nilai size-adjust dan override metrik lainnya disetel sampai lebar teks fallback mendekati lebar font utama. Untuk memulainya, cukup amati di DevTools panel Computed: bandingkan ukuran dan tinggi baris teks sebelum dan sesudah font utama tiba.

Demo chapter ini membuktikan sisi fallback-nya tanpa unduhan font: judul memakai nama font fiktif yang tidak pernah terpasang, sehingga browser selalu jatuh ke Georgia — persis perilaku fase swap, hanya tanpa kedipan.

Hasil di Browser:

Judul tampil dengan font serif Georgia dari rantai "Naskah Fiktif",
Georgia, serif (font fiktif tidak terpasang) pada ukuran 28px. Paragraf
memakai system-ui, sans-serif, ukuran 1.25rem terhitung 20px, dan baris
kode memakai monospace. Tidak ada unduhan font, tidak ada periode teks
tak terlihat.

Dengan stylesheet dan font tertata, sisa sumber masalah performa ada pada animasi dan pekerjaan layout yang diulang — dua topik chapter berikutnya.