Digital Transformation
Font Display (Strategi Render Font Web)
TL;DR: Font display adalah deskriptor
@font-facedi CSS yang memberi tahu browser apa yang harus ditampilkan saat font web belum siap. Nilaiswapmembuat teks tampil instan dengan font fallback lalu diganti, mendukung target LCP di bawah 2,5 detik. Pilihan yang salah bisa membuat teks tak terlihat sampai 3 detik dan merusak Core Web Vitals.
Apa itu Font Display?
Font display adalah deskriptor di aturan @font-face yang menentukan perilaku browser ketika font kustom belum diunduh. Tanpa setting eksplisit, banyak browser default ke block selama 3 detik, artinya teks tidak terlihat sama sekali sampai font selesai dimuat. Ini disebut FOIT (Flash of Invisible Text) dan sering jadi penyebab tersembunyi skor Core Web Vitals merah di situs Indonesia yang banyak pakai font Google.
Setting font-display bukan sekadar estetika, tapi keputusan performa.
Lima Nilai Font Display
| Nilai | Periode Block | Periode Swap | Kapan Dipakai |
|---|---|---|---|
auto | Default browser | Default browser | Hindari, perilaku tidak konsisten |
block | 3 detik | Tak terbatas | Logo brand kritikal saja |
swap | 0 detik | Tak terbatas | Body text, paling aman untuk LCP |
fallback | 100 ms | 3 detik | Headline non-kritikal |
optional | 100 ms | 0 detik | Koneksi lemah, font opsional |
swap adalah pilihan paling umum untuk situs yang mengejar LCP baik. Trade-off-nya: ada FOUT (Flash of Unstyled Text), teks sempat berubah tampilan saat font asli masuk. Mitigasinya pakai font fallback dengan metrik mirip via size-adjust dan ascent-override.
Kenapa Penting?
Font web yang block render adalah penyebab umum LCP buruk di situs Indonesia, terutama yang pakai banyak weight Google Fonts tanpa preload. Berdasarkan praktik audit Web Vitals di proyek client yang saya tangani, mengganti font-display: block ke swap plus preconnect ke origin font biasanya memangkas LCP 200 ms sampai 800 ms tanpa perubahan visual signifikan. Untuk e-commerce dan landing page konversi, perbaikan sebesar itu sering setara dengan kenaikan conversion-rate yang terukur. Detail teknis tersedia di dokumentasi web.dev tentang font-display.
Pertanyaan Umum
Apakah font-display: swap selalu pilihan terbaik?
Untuk mayoritas body text, ya. Untuk logo atau wordmark brand yang harus akurat, block masih bisa dipakai dengan font kecil dan preload. Hindari auto karena perilakunya bergantung browser.
Apakah font-display memengaruhi SEO?
Tidak langsung, tapi memengaruhi LCP yang sejak 2021 menjadi sinyal peringkat. Setting yang salah bisa menurunkan skor Core Web Vitals dan dampaknya ke peringkat di kueri kompetitif.