Properti CSS font-display menentukan bagaimana sebuah font web dimuat dan ditampilkan oleh peramban (browser). Pilihan antara nilai block dan swap berdampak langsung pada pengalaman visual pengguna saat halaman dimuat, khususnya dalam menangani fenomena FOIT (Flash of Invisible Text) dan FOUT (Flash of Unstyled Text).
Nilai block memberikan durasi blokir yang sangat singkat (sekitar 100ms) di mana teks tidak terlihat, diikuti oleh periode tunggu tak terbatas hingga font kustom selesai diunduh. Sebaliknya, nilai swap langsung merender teks menggunakan font cadangan (fallback) sistem sambil mengunduh font kustom di latar belakang, lalu menukarnya secara instan begitu file font siap.
Tabel Matriks Komparasi: Font-Display Block vs Swap
| Parameter Perbandingan | font-display: block | font-display: swap |
|---|---|---|
| Perilaku Teks Awal | Tidak terlihat (Invisible) selama periode blokir | Terlihat langsung menggunakan font sistem (Fallback) |
| Durasi Blokir (Block Period) | Sangat singkat (~100ms) | Sangat singkat (~100ms) |
| Periode Tukar (Swap Period) | Tak terbatas (Menunggu hingga font selesai diunduh) | Tak terbatas (Menukar font segera setelah selesai diunduh) |
| Risiko Utama | FOIT (Teks kosong mengganggu pengguna) | FOUT / Layout Shift (Perubahan gaya teks mendadak) |
| Dampak pada Core Web Vitals (LCP) | Buruk jika jaringan lambat (Skor LCP tertunda) | Baik (Teks segera tampil, meningkatkan persepsi kecepatan) |
| Rekomendasi Penggunaan | Judul utama / Branding yang sangat bergantung pada estetika font khusus | Teks paragraf / Konten utama (Body text) untuk aksesibilitas |
Analisis Mendalam: Kapan Menggunakan Block?
Menggunakan font-display: block berarti peramban akan menyembunyikan teks sementara waktu jika font kustom belum tersedia. Jika koneksi pengguna lambat, teks tidak akan muncul sama sekali selama beberapa detik, menciptakan pengalaman pengguna yang buruk. Namun, pendekatan ini menghindari pergeseran tata letak (layout shift) yang drastis akibat perubahan bentuk huruf.
Penggunaan nilai ini hanya disarankan pada elemen elemen kecil yang tidak krusial bagi keterbacaan keseluruhan, atau ketika identitas visual merek (branding) pada logo teks jauh lebih penting daripada kecepatan akses informasi awal.
Analisis Mendalam: Kapan Menggunakan Swap?
font-display: swap adalah standar industri yang sangat dianjurkan oleh Google PageSpeed Insights. Dengan nilai ini, browser langsung menampilkan teks menggunakan font cadangan yang sudah terinstal di perangkat pengguna (seperti Arial atau Times New Roman), sehingga tidak ada waktu teks menghilang (mencegah FOIT).
Begitu file font web selesai diunduh, browser langsung mengganti font cadangan tersebut dengan font kustom. Kekurangan dari metode ini adalah potensi terjadinya Cumulative Layout Shift (CLS) jika ukuran metrik antara font cadangan dan font kustom berbeda jauh.
Mitigasi Masalah Layout Shift pada Swap
Untuk mengatasi masalah pergeseran tata letak saat menggunakan font-display: swap, pengembang web wajib mendefinisikan descriptor tambahan pada aturan @font-face, seperti:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
ascent-override: 90%;
descent-override: 20%;
line-gap-override: 0%;
}Penyesuaian nilai override ini memastikan bahwa font cadangan memiliki dimensi kotak pembatas (bounding box) yang hampir serupa dengan font kustom, sehingga meminimalkan pergeseran visual saat pertukaran terjadi.