Mengatasi Masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web

Dua lipa.id
Agu 14, 2021
Saat ini kecepatan loading sebuah website seperti blog itu sangat penting, sehingga banyak template yang sudah mendukung hal ini. Namun ada juga tema blogger yang belum secara penuh melakukan optimasi speed website, di perlukan sebuah tool yang dapat melakukan audit kecepatan blog.
Mengatasi Masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web


Melakukan audit kecepatan pemuatan sebuah halaman blog lewat webtool seperti Google PageSpeed Insights, GTmetrix, Web.dev agar diketahui hasilnya dan masalah yang timbul menghambat kecepatan loading situs.

Sering kali masalah yang muncul di hasil tes kecepatan adalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web atau Ensure text remains visible during webfont load. Masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web itu muncul akibat permasalahan render font web pihak ketiga Google Font, Font Awesome.

Tidak terlihatnya teks pada halaman blog karena font yang digunakan dari pihak ketiga seperti Google Font, Font Awesome masih dalam proses pemuatan. File Font Web memiliki ukuran yang cukup besar, sehingga memerlukan waktu yang cukup lama dalam proses pemuatan.

Kita boleh saja menghapus script atau link eksternal font web pihak ketiga tersebut dalam tema blogger di edit html, agar tidak memberatkan loading blog. Menghapus font web dari tema blog akan membuat tampilan blogger itu berantakan font dan beberapa ikon tidak akan muncul. Mengatasi Masalah Teks Tetap Terlihat di perlukan sebuah cara untuk Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web.
Cara Mengatasi dan Memperbaiki Masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web.
  • Mengatasi Masalah google fonts (fonts.gstatic.com).
    1. Buka Blogger anda.
    2. Cari script atau kode Font Web dalam edit html seperti ini.
      3. @font-face{
      font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),
      src:url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2")
    3. Setelah di temukan kode script Font Web seperti di atas dan tambahkan kode dibawah ini.
      4. font-display:swap; Sebelum src:url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2)
    4. Setelah ditambahkan maka font web akan jadi seperti ini.
      5. @font-face{
      font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),
      font-display:swap;
      src:url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2")
    5. Simpan tema.
    6. Selesai.
    Pastikan anda menambah font-display:swap; disemua font web sebelum src:url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2"). Dengan menambahkan font-display:swap; pada script font web di blog agar memberi tahu browser untuk memuat halaman dengan gaya dan jenis font tersebut.

    Itulah cara untuk mengatasi permasalahan google fonts (fonts.gstatic.com) pada blog supaya teks tetap terlihat tanpa menghapus font webnya.
  • Mengatasi Masalah font web FontAwesome.
    1. Buka Blogger anda.
    2. Cari script atau kode FontAwesome dalam edit html seperti ini.
      3. @font-face{font-family:'FontAwesome';src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
      src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
    3. Setelah di temukan kode script Font Web FontAwesome seperti di atas dan tambahkan kode dibawah ini.
      4. font-display:swap; Sebelum font-style:normal
    4. Setelah ditambahkan maka font web akan jadi seperti ini.
      5. @font-face{font-family:'FontAwesome';src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
      src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
      url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-display:swap;font-style:normal}
    5. Simpan tema.
    6. Selesai.
Begitulah cara memperbaiki masalah pemuatan font web FontAwesome. Silahkan lakukan tes pada PageSpeed Insights untuk melihat hasilnya, jika anda menerapkan cara diatas untuk mengatasi masalah pemuatan font web maka peringatan tulisan Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web (Ensure text remains visible during webfont load) akan hilang.

Sampai disini dulu artikel ini tentang "Mengatasi Masalah Pastikan Teks Tetap Terlihat Selama Pemuatan Font Web" untuk teman-teman blogger. Semoga bermanfaat, Selamat mencoba dan berhasil. Terima Kasih*** Dua Lipa Dua Lipa Dua Lipa
Next Post Previous Post
No Comment
Add Comment
comment url