 |
| Loading Teks |
Menghindari menampilkan teks yang lama terlihat di situs
PeluangSukses.Com - Font sering kali merupakan file besar yang membutuhkan waktu beberapa saat untuk dimuat. Beberapa browser menyembunyikan teks hingga font dimuat, menyebabkan kilatan teks tak terlihat (FOIT) .
Audit tampilan font Lighthouse gagal
Lighthouse menandai URL font apa pun yang mungkin menampilkan teks tak terlihat:
Cara termudah untuk menghindari menampilkan teks yang tidak terlihat saat font kustom dimuat adalah dengan menampilkan font sistem untuk sementara. Dengan termasuk font-display:swap dalam Anda @font-face style, Anda dapat menghindari FOIT di sebagian besar browser modern:
@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;
}
The font-display API menentukan bagaimana font ditampilkan. swap memberitahu browser bahwa teks yang menggunakan font harus segera ditampilkan menggunakan font sistem. Setelah font kustom siap, itu menggantikan font sistem. (Lihat Hindari teks tak terlihat saat memuat posting untuk informasi lebih lanjut.)
- Pramuat font web # Gunakan <link rel="preload" as="font"> untuk mengambil file font Anda sebelumnya.
- Google Font # Tambahkan &display=swap parameter ke akhir URL Google Font Anda:
Tempatkan dibawah <head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link display='swap' href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'/>
Dukungan browser peramban #
Perlu disebutkan bahwa tidak semua browser utama mendukung font-display: swap, jadi Anda mungkin perlu melakukan sedikit lebih banyak pekerjaan untuk memperbaiki masalah teks yang tidak terlihat.*
