Custom font dengan Google web font merupakan solusi untuk mengganti jenis font pada blog, dengan mengganti jenis-jenis font pada blog akan memberikan tampilan berbeda dan memberikan ciri terhadap blog.
Arial, verdana dan georgia merupakan jenis huruf yang umum terdapat pada blog atau website, dengan layanan google web font kita bisa merubah dan mengganti jenis-jenis font yang terdapat pada blog dengan jenis font yang disediakan oleh google web font, jenis font yang terdapat pada google web font dapat kita pergunakan dengan bebas, karena google web font bersifat open source.
Walaupun google web font dapat kita gunakan dengan bebas, pergunakan font-font tersebut dengan bijak, dalam artian bila kita menggunakan terlalu banyak font pada google web font untuk blog akan berpengaruh terhadap loading blog yang berat.
Jika tertarik untuk menggunakan font pada google web font, kalian bisa mengunjungi Google Web Font dengan mengklik link tersebut. setelah masuk kalian akan disuguhi bermacam jenis font seperti pada gambar dibawah ini :
setelah memilih jenis font yang akan di pergunakan, kalian klik Quick-use seperti dalam gambar diatas dan akan dihadapkan pada halaman selanjutnya seperti hgambar dibawah ini :
Gambar paling kanan seperti ditunjuk panah, merupakan page load indikator font yang berpengaruh pada loading blog. Scroll kebawah pada halaman tersebut dan copy kode yang diberikan google web font, ada tiga pilihan kode yang diberikan : standar, @import dan javascript, pilihlah yang standar untuk lebih mudah dalam penggunaanya.
Letakan kode tersebut dibawah kode <head> atau dibawah kode ]]></b:skin> pada template blog kalian dan Save, bila terjadi galat atau error dalam melakukan save template, tambahkan tanda slash ( / ) pada tag penutup kode ( > ) sehingga menjadi seperti ini :
<link href='http://fonts.googleapis.com/css?family=Trade+Winds' rel='stylesheet' type='text/css'/>
Bagaimana cara mengganti bagian bagian font pada template ?
Untuk mengganti font pada blog, copy kode css yang diberikan google web font seperti dibawah ini :
font-family: 'Trade Winds', cursive;
dan ganti jenis font yang ada pada template, sebagai contoh :
body {
font-family: 'Trade Winds', cursive;
}
font-family: 'Trade Winds', cursive;
}
untuk mengganti font pada bagian yang lainnya pada template, kalian hanya mengganti css nya pada bagian font-family: nya saja.
Jila ingin mengganti pada teks tertentu, kalian bisa memakai kode seperti dibawah ini :
<div style="font-family: 'Trade Winds', cursive;">Text kalian disini</div>
Sebagai tambahan, jika ingin mengatur kerenggangan atau kerapatan tiap font, kalian bisa menambahkan kode css letter-spacing dan beri nilai 0.1em atau -0.1em, sebagai contoh :
body {
font-family: 'Trade Winds', cursive;
letter-spacing: 0.1em;
}
font-family: 'Trade Winds', cursive;
letter-spacing: 0.1em;
}
Semoga bermanfaat,
Sumber :
http://situseo.blogspot.com/2011/12/google-web-font-dan-cara-memasangnya.html
