Cara pasang Link Google Font Display Swap

Daftar isi:

Link Display Swap
Praktik
Copy link support
Copy stylesheet
Metode cadangan

Font display=swap

Google Font

Contoh link stylesheet font :

Fungsi &display=swap bertujuan untuk menangani pemuatan halaman dalam Pagespeed Insight agar semua teks tetap terlihat selama pemuatan font web.

Praktik

Notif :

Peletakan tag link tersebut berada dibawah tag <head>. Namun pada saat disimpan ternyata ditolak dan muncul notif seperti ini :

org.xml.sax.SAXParseException; lineNumber:16; columnNumber: 70;
The reference to entity "display" must end with the ';' delimiter.

Solusi jika gagal menyimpan link Google font

Ganti karakter "&" pada URL link stylesheet

Lalu ganti rel='stylesheet' menjadi rel='preload' dan tambahkan atribut as='style' Maka link stylesheet menjadi seperti ini:

Lalu Simpan.

Link pendukung :

Tips untuk audit Pagespeed insight

Font Google

Setelah tersimpan, pastikan menyematkan juga 2 link berikut ini:

1. Link wajib jika terdapat Google font dihalaman dan link ini untuk mengarahkan ke halaman utama Google font.

2. Link untuk mengarahkan ke lokasi stylesheet font yang digunakan.

Letakkan kedua link tersebut tepat diatas dengan link stylesheet font yang sebelumnya disematkan lalu simpan kembali.

Setelah tersimpan, uji halaman dengan Lighthouse Pagespeed insight, pastikan pemuatan font tidak bermasalah seperti ini :

Jika masih terdapat kendala dalam render halaman, gunakan cara berikut :
- Copy URL font yang ada dalam link stylesheet font,lihat contoh kode ini, :

Kemudian di browser buka tab baru, paste di address bar, tekan oke. Halaman akan terbuka seperti ini.

Crtl + a untuk menyalin semua code nya, ATAU pilih code stylesheet yang dibutuhkan saja lalu paste diarea tag <head> tempatkan dibagian atas CSS lalu hapus link tersebut dari tag <head> dan Simpan.
Test halaman dengan Pagespeed Insight untuk melihat hasilnya.

Metode cadangan

Cara terakhir

Harap dicatat, jika menggunakan metode cadangan ini maka hapus CSS yang berasal dari URL link stylesheet font yang sudah dipaste pada metode sebelumnya.
Untuk link pendukungnya biarkan saja.

Copy format link media dibawah ini sebagai pengganti format link stylesheet.

Paste dalam template blog, di area <head> seperti sebelumnya dan simpan..