Font sering kali merupakan file berukuran besar dengan waktu pemuatan yang lambat. Beberapa {i>browser<i} menyembunyikan teks hingga {i>font<i} dimuat, menyebabkan flash teks yang tidak terlihat (FOIT).
Cara audit tampilan font Lighthouse gagal
Mercusuar menandai setiap URL font yang mungkin berkedip untuk teks tak terlihat:
Cara menghindari tampilan teks yang tidak terlihat
font-display
API menunjukkan
bagaimana font ditampilkan saat digunakan dalam gaya font-face
. Nilai
font-display
berikut akan memberi tahu browser untuk menggunakan font sistem jika font kustom belum siap:
swap
optional
fallback
Contoh CSS
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Contoh Google Fonts
Tambahkan parameter &display=swap
/&display=optional
/&display=fallback
ke bagian akhir URL Google Fonts:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
Cara menghindari pergeseran tata letak yang disebabkan oleh font yang ditangguhkan
Menampilkan font sistem untuk sementara akan mengganti FOIT dengan flash teks tanpa gaya (FOUT). Hal ini meningkatkan FCP&LCP dengan merender konten lebih cepat, tetapi FOIT dan FOUT akan memiliki dampak yang sama pada CLS saat font kustom menggantikan font sistem sementara.
Dampak CLS dari pemuatan font dapat dimitigasi menggunakan pramuat bersama dengan font-display: optional
.
Namun, penggunaan pramuat yang berlebihan dapat berdampak negatif pada metrik pemuatan. Sebaiknya lakukan pengujian A/B untuk memastikan bahwa font yang dimuat sebelumnya tidak menyebabkan
regresi performa.
Panduan khusus stack
Drupal
Tentukan @font-display
saat menentukan font kustom di tema Anda.
Magento
Tentukan @font-display
saat menentukan font kustom.
Resource
- Kode sumber untuk audit Memastikan teks tetap terlihat selama pemuatan font web
- Menghindari teks yang tidak terlihat selama pemuatan
- Mengontrol performa font dengan tampilan font
- Pramuat font web untuk meningkatkan kecepatan pemuatan (codelab)
- Mencegah pergeseran tata letak dan flash teks tak terlihat (FOIT) dengan melakukan pramuat font opsional