Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefox

mempercantik huruf di blog/website kita dengan menggunakan Google Fonts (_http://www.google.com/fonts) sangatlah menyenangkan tapi ada harga yg harus dibayar;
1. saat loading font dari google maka text yg ada diblog kita akan tidak tampil seketika walaupun tidak lama tapi lumayan menjengkelkan.
2. http request jadi banyak otomatis loadin jadi bertambah lama.
3. Klo penggunanya menggunakan browser Chrome atau Opera tampilannya tidak tajam seperti di firefox, coba lihat SS dibawah

_http://i41.tinypic.com/11liuy8.png



nah supaya loading google fontnya jadi cepat dan textnya tidak hilang seketika dan juga tampilan di chrome & opera jadi lebih bagus seperti dibawah

_http://i41.tinypic.com/2n0o9zk.png



ikuti langkah berikut
1. untuk mempercepat loading: biasanya untuk embed google font adalah sebagai berikut

Code:

<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
atau
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans);

ubah atau tambahkan di file css menjadi

Code:

@font-face {
    font-family: 'Exo 2';
    src: url("data:application/x-font-woff;charset=utf-8;base64,Base64EncodeFont") format('woff');
    font-weight: 400;
    font-style: normal;

}

konversi dulu file .woff ke Base64 Encode di _http://www.opinionatedgeek.com/dotnet/tools/base64encode/ lalu ubah Base64EncodeFont diatas dengan kode hasil generate.

2. untuk memperbaiki tampilan tambahkan kode javascript berikut

Code:

if(navigator.userAgent.match(/chrome/i))
{
  document.body.style.textShadow='rgba(0,0,0,0.19) 0px 0px 1px';
}
if(navigator.userAgent.match(/opera/i))
{
  document.body.style.textShadow='rgba(0,0,0,0.31) 0px 0px 1px';
}

keuntungan yg didapat dari cara diatas
1. css+font digabung jadi satu, font jadi terkompress otomatis http request berkurang dan loading jadi tambah cepat.
2. tampilan jadi lebih bagus di chrome maupun di opera

selamat menikmati, trims.

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

wah akhirnya... setelah puter kemana2 ga ada solusi akhirnya datang dengan sendirinya... terima kasih banyak momod ewwing... sangat membantu sekali tutorialnya....

akhirnya dapet yang paling maksimal untuk theme kategori berat View attachment 36428 hehe

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

ijin sinau om momod, lama g muncul langsung share keren

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

ijin ke TKP dulu Om Momod

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

Mantep nih om, coba ke tkp dulu

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

mantap kang...
akhirnya ke galau-an ku terjawab sudah...

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

nahh ini yg ane cari2, ane jg sempat bingung kok font blog ane berubah-rubah gitu di setiap browser.. like penceted mastah

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

wah, tips dan triknya mantaf nih.

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

Muter2 ketemunya disini2 jg... mantep lah ... izin praktek dl om. Like penceted

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

ternyata beneran tuh...
ijin praktek ya om..

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

Ini keren. makasih sharenya om..

 

Re: Optimasi Google Font di Blog untuk Visitor yg menggunakan Chrome / Opera / Firefo

Blh..