Cara Defer @font-face

Defer(menunda pemuatan) @font-face ini berguna untuk mengurangi HTTP Request yang mempengaruhi kecepatan muat suatu halaman.

Sobat menggunakan @font-face pada template blog sobat ? kalau sobat menggunakan @font-face, biasanya saat sobat cek kecepatan di gtmetrix sobat akan melihat banyaknya HTTP Request yang salah-satunya disebabkan oleh @font-face ini. Padahal semakin banyak HTTP Request maka waktu yang dibutuhkan untuk memuat suatu halaman akan jadi lebih lama.

Cara ini sebenarnya hanyalah penambahan class pada elemen html dengan bantuan javascript. Sehingga @font-face baru dimuat setelah class ditambahkan pada elemen html tersebut. Cara ini juga menggunakan cookie agar font lebih cepat dimuat saat pemuatan halaman untuk kedua kalinya dan seterusnya.

Cara Pemasangan

1.Pertama, Karena pada cara ini kita akan menggunakan cookie maka bagi sobat yang belum pasang javascript cookie, silahkan pasang terlebih dahulu. caranya ada disini. Kalau sudah pasang ga usah dipasang lagi sob.

2. Selanjutnya, pasang kode dibawah ini dan letakkan tepat dibawah kode javascript cookie-nya :

Uncompressed
Compressed


<script type="text/javascript">
//<![CDATA[
function deferFont() {
    document.getElementsByTagName("html")[0].setAttribute("class", "font-loaded");
    createCookie("fontEX", null, 7e3)
}
if (readCookie("fontEX")) {
   document.getElementsByTagName("html")[0].setAttribute("class", "font-loaded") 
} else {
   if (window.addEventListener) {
       window.addEventListener("load", deferFont, false) 
    } else if (window.attachEvent) {
       window.attachEvent("onload", deferFont)
    } else {
       window.onload = deferFont
    }
}
//]]>
<script>

<script type="text/javascript">

//<![CDATA[

function deferFont(){document.getElementsByTagName("html")[0].setAttribute("class","font-loaded"),createCookie("fontEX",null,7e3)}readCookie("fontEX")?document.getElementsByTagName("html")[0].setAttribute("class","font-loaded"):window.addEventListener?window.addEventListener("load",deferFont,!1):window.attachEvent?window.attachEvent("onload",deferFont):window.onload=deferFont;

//]]>

<script>

Sebenarnya kode diatas dapat sobat letakkan dimana saja sesuai keinginan, yang penting harus dibawah kode javascript cookie-nya. Tapi saya anjurkan untuk meletakkan kode javascript cookie dan kode diatas tadi, dibawah <body> bukan diatas </body>. Ini dilakukan agar font dimuat sesegera mungkin.

3. Setelah kode diatas terpasang kita beralih ke kode cssnya. Pertama, sobat harus temukan kode css yang ada font: dan font-family:-nya, setelah itu sobat ikuti seperti yang saya contohkan dibawah ini :


/* KODE CSS ELEMEN DENGAN FONT-FAMILY: */
body {
   font-family: "Roboto Condensed", Arial, Tahoma, Verdana;
   font-weight: normal;
   font-style: normal;
   font-size: 16px
}

/* RUBAH KODE DIATAS MENJADI SEPERTI INI : */
body {
   font-weight: normal;
   font-style: normal;
   font-size: 16px
}
.font-loaded body {
   font-family: "Roboto Condensed", Arial, Tahoma, Verdana
}

/* KODE CSS ELEMEN DENGAN FONT: */
.post {
   font:normal normal 16px/1.5 "Roboto Condensed", Arial, Tahoma, Verdana
}

/* RUBAH KODE DIATAS MENJADI SEPERTI INI : */
.post {
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
   line-height:1.5em
}
.font-loaded .post {
   font-family: "Roboto Condensed", Arial, Tahoma, Verdana
}

Masih bingung sob ? nih lihat demo dan kodenya biar ga bingung lagi :

Sekian artikel tentang cara defer @font-face ini. Jika ada yang kurang jelas silahkan bertanya di kolom komentar. Terima kasih.

Cara Defer @font-face - PintasanOKE

Saturday 23 April 2016

Cara Defer @font-face

Cara Pemasangan