Mengapa Anda harus peduli?
Font sering kali berupa file besar yang membutuhkan waktu lama untuk dimuat. Untuk mengatasi hal ini, beberapa browser menyembunyikan teks hingga font dimuat ("flash teks yang tidak terlihat").
Largest Contentful Paint (LCP) dapat tertunda menunggu hingga teks dirender. Jika Anda mengoptimalkan performa, sebaiknya hindari "flash teks tak terlihat" (FOIT) dan langsung tampilkan konten kepada pengguna menggunakan font sistem, yang akan membuat "flash teks tanpa gaya" (FOUT).
Default browser untuk menampilkan font
Berikut adalah perilaku pemuatan font default untuk browser umum:
| Browser | Perilaku default jika font belum siap... |
|---|---|
| Chrome dan Edge | Akan menyembunyikan teks hingga 3 detik. Jika teks masih belum siap, teks akan menggunakan font sistem hingga font siap, lalu menukar font. |
| Firefox | Akan menyembunyikan teks hingga 3 detik. Jika teks masih belum siap, teks akan menggunakan font sistem hingga font siap, lalu menukar font. |
| Safari | Menyembunyikan teks hingga font siap. |
Tampilkan teks segera
Panduan ini menguraikan dua cara untuk menampilkan teks sesegera mungkin: pendekatan pertama sederhana dan memiliki dukungan browser yang baik. Pendekatan kedua bersifat mendalam, tetapi mungkin memberikan lebih banyak opsi bagi Anda. Pilihan terbaik untuk situs Anda bergantung pada persyaratan Anda.
Opsi #1: Gunakan font-display
font-display adalah API untuk menentukan strategi tampilan font. swap memberi tahu browser bahwa teks yang menggunakan font ini harus segera ditampilkan menggunakan font sistem. Setelah font kustom siap, font sistem ditukar.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Jika browser tidak mendukung font-display—meskipun semua browser modern mendukungnya—browser akan terus mengikuti perilaku default-nya untuk memuat font.
Opsi #2: Tunggu hingga font kustom digunakan hingga font tersebut dimuat
Dengan sedikit upaya, Anda dapat mempertimbangkan pendekatan yang lebih kustom.
Ada tiga bagian untuk pendekatan ini:
- Jangan menggunakan font khusus pada pemuatan halaman awal dengan memfaktorkan ulang CSS agar tidak menggunakan font khusus di awal. Hal ini memastikan bahwa browser menampilkan teks segera menggunakan font sistem.
- Mendeteksi saat font kustom Anda dimuat menggunakan CSS Font Loading API
- Perbarui gaya visual halaman untuk menggunakan font kustom.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
Hal ini juga dapat dilakukan dengan library FontFaceObserver yang beberapa di antaranya menemukan API yang lebih mudah digunakan.
Tindakan ini memungkinkan sejumlah pertimbangan tambahan saat memuat font. Misalnya, semua font dapat dimuat sekaligus, menghindari beberapa tata letak saat setiap font dimuat. Selain itu, situs dapat memilih untuk tidak memuat font bagi pengguna di koneksi yang lebih lambat, atau bagi mereka yang menggunakan opsi Simpan Data.
Verifikasi
Jalankan Lighthouse untuk memverifikasi bahwa situs menggunakan font-display: swap untuk menampilkan teks:
- Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools.
- Klik tab Lighthouse.
- Pastikan kotak centang Performa sudah dicentang dalam daftar Kategori.
- Klik tombol Buat laporan.
Pastikan bahwa audit Pastikan teks tetap terlihat selama pemuatan webfont lulus.