Ditulis oleh: Ditulis pada: 12/21/2014
Jika tanpa tulisan, apalah artinya sebuah blog. Untuk menampilkan tulisan di dalam blog, maka kita memerlukan font. Blogger sendiri memiliki font dasar yang digunakan seperti Arial, Goergia, Helvetica, Times, Trebuchet, atau Verdana. Jika kita menggunakan font-font default tersebut, maka kita tidak perlu menyimpan link font di html blog sehingga tidak akan membebani blog. Namun jika kita ingin menggunakan font selain yang disebut tadi, maka kita harus menyimpan link font yang kita pilih di html blog. Umumnya kita bisa memilih dan menggunakan font dari Google Fonts.
Namun sebelum kita membahas cara memuat link Google Font secara asynchronous, ada baiknya Anda membaca referensi berikut untuk menambah pengetahuan tentang penggunaan font di blog.
Silahkan baca: http://www.dte.web.id/2013/05/jangan-mendeklarasikan-font-weight-dan.html
Jika Anda sudah membaca link referensi tersebut di atas, maka kita akan lebih mengerti penggunaan font yang baik untuk blog kita.
Mengacu dari postingan DTE, maka jika kita ingin menggunakan font yang lebih baik untuk blog maka kita harus menentukan sendiri font seperti apa yang akan dipakai. Kita harus memilih font yang memiliki style dan ketebalan yang akan kita gunakan seperti font normal, miring, tipis, ataupun tebal. Sehingga kita tidak memaksakan style ataupun ketebalan pada font yang tidak memiliki style atau ketebalan yang kita maksud.
Nah untuk mendapatkan font yang kita inginkan, kita bisa memilih font-font tersebut di Google Fonts. Di sana terdapat banyak jenis font dengan berbagai 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 menggunakan bantuan Google Fonts, maka kita harus menyimpan link font yang kita pilih di edit html blog kita.
Namun dari hal tersebut, ada efek lain yang berpengaruh pada blog. Link font dapat menyumbangkan berat pada loading blog karena 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 saya sudah membahasnya di postingan berikut:
Silahkan baca: Link Font Di Head Blog Error Validasi HTML5
Dengan trik tersebut, masalah render-blocking CSS dan error validasi html5 bisa teratasi. Namun masalah lain muncul, yaitu @font-face Google Fonts error di Firefox. Untuk mengatasi hal tersebut maka saya berhasil mengatasinya dengan trik pada postingan berikut:
Silahkan baca: Mengatasi @font-face Google Font Error Di Firefox 2014
Akhirnya masalah error @font-face di Firefox tersebut bisa teratasi. Namun saya kelupaan untuk mengetesnya pada Internet Explorer karena memang saya jarang mengunakan browser yang satu ini. Ternyata setelah saya coba pada browser IE, @font-face tersebut error juga, hadeueuhh...
Dan akhirnya kini saya mendapatkan solusinya untuk link Google Font ini agar tidak menjadi render-blocking CSS, tidak error pada validasi html5, juga bisa berjalan di semua browser (saya baru mencobanya di Firefox, Chrome, dan IE).
Silahkan gunakan script untuk memuat Font Awesome secara asynchronous juga untuk link CSS Highlight.js yang saya bagikan beberapa waktu yang lalu. Script ini sebagai alternatif lain untuk memuat Google Fonts secara asynchronous dengan menggunakan link CSS font. Script-nya seperti 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 bisa digunakan untuk multi link css atau bisa digunakan untuk beberapa link css, sehingga penggunaannya seperti 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 kode
</body> Selamat mencoba...