Browser Chrome, Safari, Firefox dan Opera menyembunyikan teks halaman web saat file font sedang diunduh. File font yang berukuran besar dapat membutuhkan waktu lebih lama untuk dimuat. Akibatnya, halaman blog dapat muncul tanpa teks pada waktu pemuatan halaman.
Mengatasi Ensure Text Remains Visible During Webfont Webfont Load
Font-display API berfungsi untuk menentukan bagaimana font dari web ditampilkan. Berikut cara mengatasi tampilkan teks melalui font-display.Langkah 1: Silahkan masuk ke blogger.com, kemudian pilih menu Tema lalu pilih Edit HTML.
Langkah 2: Gunakan tools pencarian (CTRL + F), kemudian cari CSS @font-face, kemungkinan besar kode ini terdapat lebih dari satu di template kamu.
Langkah 3: Selanjutnya tambahkan font-display: swap; pada CSS @font-face yang terdapat di template kamu. Berikut contoh penulisannya.
Sebelum:
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src:url(//fonts.gstatic.com/s/oswald/v30/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2)format('woff2');
}Sesudah:
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src:url(//fonts.gstatic.com/s/oswald/v30/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2)format('woff2');
font-display: swap;
}Jika CSS @font-face lebih dari satu, maka tambahkan font-display swap pada semua @font-face.
Langkah 4: Selanjutnya cari CSS body lalu tambahkan font-display: swap !important; pada CSS body. Berikut penulisannya.
body {
font-display: swap !important;
}Dengan deskriptor tampilan font, maka browser akan menentukan kapan font akan ditampilkan. Dengan menambah deskriptor swap maka blog akan menampilkan teks dalam font default saat file font sedang diunduh. Setelah selesai diunduh, maka teks blog akan berubah sesuai font yang seharusnya ditampilkan. Dengan begitu maka konten akan dimuat lebih cepat.
Google Font
Jika kamu yang menggunakan Google Font, kamu dapat mengatasi masalah ini dengan menambahkan parameter &display=swap ke akhir URL Google Font kamu, berikut penulisannya.Sebelum:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">Sesudah:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">Dukungan Browser
Perlu diketahui bahwa tidak semua browser utama mendukung tampilan font: swap. Jika browser tidak mendukung tampilan font, browser akan memuat secara default untuk memuat font. Namun hal ini bukanlah masalah besar, karena hampir semua browser yang umum digunakan sudah mendukung tampilan swap.