Pastikan teks tetap terlihat selama pemuatan font web

Font sering kali berupa file besar dengan waktu pemuatan yang lambat. Beberapa browser menyembunyikan teks hingga font dimuat, sehingga menyebabkan flash teks tak terlihat (FOIT).

Cara audit tampilan font Lighthouse gagal

Lighthouse menandai URL font yang mungkin menampilkan teks yang tidak terlihat:

Screenshot audit Lighthouse Pastikan teks tetap terlihat selama pemuatan font web

Cara menghindari tampilan teks yang tidak terlihat

font-display API menunjukkan cara font ditampilkan saat digunakan di 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 akhir URL Google Fonts Anda:

<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