Custom Font Dengan Google Web Font Dan Penggunaanya

Situseo Blog : Custom font dengan Google web fontmerupakan 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;
}

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;
}

Semoga bermanfaat,

4 Diskusi untuk Custom Font Dengan Google Web Font Dan Penggunaanya

Jawab

Rudy Hartono

16 Maret 2012 pukul 19.23

mantap informasinya, perlu di coba

ricco

1 April 2012 pukul 14.10

nice share and nice blog..

Unknown

9 April 2012 pukul 15.42

siip, akan kucoba mas. oh ya mas, ada pertanyaan. kalau mau huruf postinganya yang diubah, letaknya di.mana mas, ? mohon pencerahannya karena saya masih pemula

10 April 2012 pukul 02.29

@trii waluyo penulisan kode css biasanya berbeda pada tiap template, coba cari kode :

.post {
font-family:...ganti font-nya;
}

kode tersebut tidak mutlak sama, sesuaikan dengan template yang dipergunakan

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

Link Exchange

Comment Rules