Mengapa Anda perlu tahu?
Font biasanya berupa file berukuran besar yang perlu waktu agak lama untuk dimuat. Untuk mengatasinya, beberapa {i>browser<i} menyembunyikan teks hingga {i>font<i} dimuat ("flash teks yang tidak terlihat").
Largest Contentful Paint (LCP) dapat tertunda menunggu teks dirender. Jika mengoptimalkan performa, Anda dapat menghindari "flash of tak terlihat text" (FOIT) dan menampilkan konten kepada pengguna segera menggunakan font sistem, yang menciptakan "flash of unstyled text" (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 masih belum siap, teks akan menggunakan font sistem sampai font siap, lalu diganti dengan font. |
| Firefox | Akan menyembunyikan teks hingga 3 detik. Jika masih belum siap, teks akan menggunakan font sistem sampai font siap, lalu diganti dengan font. |
| Safari | Menyembunyikan teks hingga font siap. |
Menampilkan teks langsung
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 untuk 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 akan 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 untuk memuat font.
Opsi #2: Tunggu untuk menggunakan font kustom hingga font tersebut dimuat
Dengan sedikit lebih banyak upaya, pendekatan yang lebih kustom dapat dipertimbangkan.
Ada tiga bagian untuk pendekatan ini:
- Jangan gunakan font kustom saat pemuatan halaman awal dengan memfaktorkan ulang CSS agar tidak menggunakan font kustom di awal. Hal ini memastikan bahwa browser menampilkan teks langsung menggunakan font sistem.
- Mendeteksi kapan font kustom Anda dimuat menggunakan CSS Font Loading API
- Perbarui gaya 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 menurut beberapa orang menjadikan API lebih mudah digunakan.
Hal ini memungkinkan sejumlah pertimbangan tambahan saat memuat font. Misalnya, semua font dapat dimuat sekaligus, menghindari beberapa tata letak saat setiap font dimuat. Atau, situs mungkin memilih untuk tidak memuat font bagi pengguna yang menggunakan koneksi yang lebih lambat, atau bagi pengguna 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 Performa dicentang pada daftar Kategori.
- Klik tombol Buat laporan.
Pastikan bahwa audit Pastikan teks tetap terlihat selama pemuatan webfont lulus.