Pastikan teks tetap terlihat selama pemuatan font web

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:

Screenshot audit Lighthouse Pastikan teks tetap terlihat selama pemuatan font web

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