Pastikan teks tetap terlihat selama pemuatan font web

Font biasanya berupa file besar dengan waktu pemuatan yang lambat. Beberapa browser menyembunyikan teks hingga font dimuat, sehingga menyebabkan kilasan teks yang tidak terlihat (FOIT).

Cara audit tampilan font Lighthouse gagal

Lighthouse menandai URL font apa pun yang mungkin memberikan teks yang tidak terlihat:

Screenshot Lighthouse: Pastikan teks tetap terlihat selama audit pemuatan font web

Cara agar teks yang tidak terlihat tidak ditampilkan

font-display API menunjukkan cara 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 di 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 menggantikan FOIT dengan kilatan teks tanpa gaya (FOUT). Tindakan ini akan 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 pemuatan font dapat dimitigasi menggunakan pramuat bersama dengan font-display: optional. Namun, penggunaan pramuat yang berlebihan dapat berdampak negatif pada metrik beban. Sebaiknya lakukan pengujian A/B untuk memastikan bahwa pramuat font tidak menyebabkan regresi performa apa pun.

Panduan khusus stack

Drupal

Tentukan @font-display saat menentukan font kustom di tema Anda.

Magento

Tetapkan @font-display saat menentukan font kustom.

Referensi