Mengontrol Performa Font dengan Font-Display di Website Kamu

Untuk mengurangi beberapa risiko pengunduhan font lambat, sebagian besar browser menerapkan batas waktu setelah font fallback akan digunakan. IBerikut ini adalah informasi waktu pengunduhan font di beberapa browser Sob.

• Chrome dan Firefox memiliki batas waktu tiga detik setelah teks ditampilkan dengan font fallback. Jika font berhasil diunduh, akhirnya swap terjadi dan teks di-render ulang dengan font yang dimaksud.
• Internet Explorer memiliki batas waktu nol detik yang menghasilkan rendering teks langsung. Jika font yang diminta belum tersedia, fallback digunakan, dan teks di-render kembali setelah font yang diminta tersedia.
• Safari tidak memiliki batas waktu (atau setidaknya tidak ada yang melebihi batas waktu jaringan dasar).

Di sisi developer website, dengan adanya batas waktu ini menjadikan developer memiliki kontrol yang terbatas.

Untuk membantu memperbaiki situasi ini, Kelompok Kerja CSS telah mengusulkan deskriptor @ font-face baru, font-display, dan properti terkait untuk mengontrol bagaimana rendering font di-render sebelum dimuat sepenuhnya.

Font download timelines

Mirip dengan batas waktu font yang ada yang diterapkan beberapa browser saat ini, font-display membagi masa pakai unduhan font menjadi tiga tahap utama.

1. Tahap pertama adalah periode blok font. Selama tahap ini, jika font tidak berhasil dimuat, elemen apa pun yang mencoba menggunakannya harus membuat tampilan font fallback yang tidak terlihat. Jika font berhasil dimuat selama periode blok, wajah font akan berjalan secara normal.
2. Tahap kedua adalah periode swap font. Selama tahap ini, jika ajah font tidak berhasil dimuat, elemen apa pun yang mencoba menggunakannya harus merender dengan wajah font fallback. Jika font berhasil dimuat selama periode swap, font akan berjalan secara normal.
3. Tahap ketiga adalah kegagalan (fallback). Jika font belum dimuat saat tahap ini dimulai, maka proses ini ditkamui sebagai gagal memuat. Jika tidak, font akan berjalan secara normal.

Dengan memahami beberapa tahapan di atas, harapannya kamu bisa menggunakan font yang tepat untuk website kamu Sob. Lalu, tampilan font seperti apa sih yang tepat untuk kamu?

Agar font bisa terunduh dengan maksimal, tambahkan script ini pada website kamu dengan cara :

@font-face {

  font-family: 'Arvo';

  font-display: auto;

  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');

}

Saat ini, font-display memiliki beberapa pilihan diantaranya adalah auto, block, swap, fallback dan optional. Yuk kita simak penjelasan masing-masing pilihan:

1. Auto : menggunakan cara dengan menampilkan font apa pun yang digunakan agen pengguna. Sebagian besar browser saat ini memiliki cara default yang mirip dengan block
2. Blok : memberikan bentuk font sebuah periode pemblokiran singkat (3d direkomendasikan dalam kebanyakan kasus) dan periode penukaran tak terbatas. Dengan kata lain, browser menggambar teks "tidak terlihat" terlebih dahulu jika font tidak dimuat, tetapi menukar bentuk font segera setelah dimuat. Untuk melakukannya, browser membuat bentuk font anonim dengan metrik yang serupa dengan font yang dipilih tetapi dengan semua glyph yang tidak mengandung "tinta". Nilai ini hanya boleh digunakan jika rendering teks dalam jenis huruf tertentu diperlukan agar halaman dapat digunakan.
3. Swap : memberikan bentuk font sebuah periode pemblokiran nol detik dan periode penukaran tak terbatas. Ini berarti browser segera menggambar teks dengan penggantian jika bentuk font tidak dimuat, tetapi menukar bentuk font segera setelah dimuat. Serupa dengan block, nilai ini hanya boleh digunakan ketika merender teks dalam font tertentu merupakan hal penting untuk halaman, tetapi rendering dalam font apa pun masih akan mendapatkan pesan yang benar di seluruh halaman. Teks logo adalah kandidat yang bagus untuk penukaran karena menampilkan nama perusahaan menggunakan pengganti yang masuk akal akan membuat pesan tersebar tetapi kamu nantinya akan menggunakan jenis huruf resmi.
4. Fallback : memberikan bentuk font sebuah periode blok yang sangat sedikit (100ms atau kurang direkomendasikan dalam kebanyakan kasus) dan periode penukaran singkat (disarankan tiga detik dalam kebanyakan kasus). Dengan kata lain, bentuk font dirender dengan pengganti terlebih dahulu jika font tidak dimuat, tetapi font tersebut ditukar segera setelah dimuat. Namun, jika terlalu banyak waktu berlalu, pengganti akan digunakan untuk sisa waktu halaman. fallback adalah kandidat yang bagus untuk hal-hal seperti isi teks di mana kamu ingin pengguna agar segera membaca secepat mungkin dan tidak ingin mengganggu pengalaman mereka dengan menggeser teks saat font baru dimuat.
5. Opsional : memberikan bentuk font sebuah periode pemblokiran yang sangat sedikit (100ms atau kurang direkomendasikan dalam kebanyakan kasus) dan periode penukaran nol detik. Serupa dengan fallback, ini adalah pilihan yang baik saat font yang didownload lebih dari "bagus untuk dimiliki" tapi tidak penting bagi pengalaman. Nilai optional menyerahkannya ke browser untuk memutuskan apakah akan memulai download font, yang mungkin memilih untuk tidak dilakukan atau mungkin melakukannya sebagai prioritas rendah bergantung pada apa yang menurut browser terbaik bagi pengguna. Ini bisa bermanfaat dalam situasi ketika pengguna berada pada koneksi lemah dan menarik font ke bawah mungkin bukan penggunaan resource terbaik.

Nah, kalau Kamu mengalami kesulitan dengan tutorial di atas, Kamu bisa minta tolong pada teman-teman Jagoan Hosting lewat Live Chat ataupun Open Ticket ya! Yuk!