Memuat Link Google Font Secara Asynchronous

Jika tanpa tulisan, apalah artinya sebuah blog. Untuk menampilkan goresan pena di dalam blog, maka kita memerlukan font. Blogger sendiri mempunyai font dasar yang digunakan ibarat Arial, Goergia, Helvetica, Times, Trebuchet, atau Verdana. Jika kita memakai font-font default tersebut, maka kita tidak perlu menyimpan link font di html blog sehingga tidak akan membebani blog. Namun jikalau kita ingin memakai font selain yang disebut tadi, maka kita harus menyimpan link font yang kita pilih di html blog. Umumnya kita sanggup menentukan dan memakai font dari Google Fonts.

Namun sebelum kita membahas cara memuat link Google Font secara asynchronous, ada baiknya Anda membaca rujukan berikut untuk menambah pengetahuan wacana penggunaan font di blog.

Silahkan baca: https://komporajaibku.blogspot.com//search?q=link-font-di-head-blog-error-validasi

Jika Anda sudah membaca link rujukan tersebut di atas, maka kita akan lebih mengerti penggunaan font yang baik untuk blog kita.

Mengacu dari postingan DTE, maka jikalau kita ingin memakai font yang lebih baik untuk blog maka kita harus menentukan sendiri font ibarat apa yang akan dipakai. Kita harus menentukan font yang mempunyai style dan ketebalan yang akan kita gunakan ibarat font normal, miring, tipis, ataupun tebal. Sehingga kita tidak memaksakan style ataupun ketebalan pada font yang tidak mempunyai style atau ketebalan yang kita maksud.

Nah untuk mendapat font yang kita inginkan, kita sanggup menentukan font-font tersebut di Google Fonts. Di sana terdapat banyak jenis font dengan banyak sekali varian. Silahkan tentukan jenis font yang ingin digunakan termasuk style font (normal atau miring/italic) serta ketebalan (light, normal, semi bold, bold, dan extra bold).

Dengan memakai pinjaman Google Fonts, maka kita harus menyimpan link font yang kita pilih di edit html blog kita.

Namun dari hal tersebut, ada pengaruh lain yang kuat pada blog. Link font sanggup menyumbangkan berat pada loading blog sebab peramban harus membaca font tersebut dengan mengakses linknya sehingga terdeteksi sebagai render-blocking CSS di PageSpeed Insights. Ditambah lagi dengan error pada validasi html5 untuk link font dengan beberapa jenis font di dalamnya.

Nah untuk mengatasi hal tersebut di atas, sebelumnya aku sudah membahasnya di postingan berikut:

Silahkan baca: Link Font Di Head Blog Error Validasi HTML5

Dengan trik tersebut, persoalan render-blocking CSS dan error validasi html5 sanggup teratasi. Namun persoalan lain muncul, yaitu @font-face Google Fonts error di Firefox. Untuk mengatasi hal tersebut maka aku berhasil mengatasinya dengan trik pada postingan berikut:

Silahkan baca: Mengatasi @font-face Google Font Error Di Firefox 2014

Akhirnya persoalan error @font-face di Firefox tersebut sanggup teratasi. Namun aku kelupaan untuk mengetesnya pada Internet Explorer sebab memang aku jarang mengunakan browser yang satu ini. Ternyata sesudah aku coba pada browser IE, @font-face tersebut error juga, hadeueuhh... 

Dan karenanya sekarang aku mendapat solusinya untuk link Google Font ini semoga tidak menjadi render-blocking CSS, tidak error pada validasi html5, juga sanggup berjalan di semua browser (saya gres mencobanya di Firefox, Chrome, dan IE).

Silahkan gunakan script untuk memuat Font Awesome secara asynchronous juga untuk link CSS Highlight.js yang aku bagikan beberapa waktu yang lalu. Script ini sebagai alternatif lain untuk memuat Google Fonts secara asynchronous dengan memakai link CSS font. Script-nya ibarat berikut ini:

 <script>
 //<![CDATA[
 function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
 loadCSS("LINK CSS FONT DI SINI");
 //]]>
 </script>

Script di atas sanggup digunakan untuk multi link css atau sanggup digunakan untuk beberapa link css, sehingga penggunaannya ibarat berikut ini.

 <script>
 //<![CDATA[
 function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
 loadCSS("LINK CSS 1 DI SINI");loadCSS("LINK CSS 2 DI SINI");loadCSS("LINK CSS 3 DI SINI");
 //]]>
 </script>

Silahkan simpan script tersebut di atas isyarat </body> Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post