Sekarang mbah google telah loncing layanan baru mereka yakni Google web fonts dengan slogan 'Making the Web Beautiful!'. Layanan ini memungkinkan kita untuk menggunakan custom fonts di google untuk web/blog kita tanpa harus registrasi dulu atau sign up alias betul-betul gratis. Kabar gembira ini akan sangat membantu para webster/blogger untuk mempercantik tampilannya biar lebih stylish kalo bahasa kerennya. Tanpa banyak berteori ria, mari kita langsung ke TKP saja:
1. Silahkan Backup dulu template anda.
Setiap blogger tingkat dunia pun akan selalu menyarankan untuk membackup dulu template milik anda. Masuklah ke blog anda kemudian pilih Design (dulu layout) >> Edit HTML >> Download full template.
2. Pilihlah fonts yang anda sukai.
Silahkan klik kunjungi google font untuk memilih font yang anda sukai.
3. Silahkan Copy kode font nya.
Caranya anda tinggal klik 'Get the code'
4. Tambahkan/Pastekan kode pont pada tamplate blog anda.
Sesudah anda copy kode font tersebut, kemudian simpan/paste kan setelah/di bawah kode berikut:
<head>
Sebagai contoh saya pilih font Lobster yang mana kodenya sepert ini:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Catatan: Silahkan tambahkan garis miring ('/') sebelum tage ('>'). Kenapa demikian? karena blogger mengguakan kode XML sehingga blogger akan menolak kode tanpa garis miring itu di akhir sebelum ('>') maka akan terlihat seperti ini:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
Silahkan copy kode di atas kemudian pastekan tepat di bawah kode ini:
<head>
Kemudian langsung Save.
5. Tambahkan kode CSS untuk font di blog anda.
Langkah terakhir adalah anda harus menentukan dimana font itu diletakkan dan anda harus menambahkannya dengan menggunakan code CSS.
Jika anda ingin menggunakannya hanya dalam postingan saja maka gunakan kode berikut:
<div style="font-family: 'FontName', serif;">Your text</div>
Pada kode di atas silahkan ganti
Fontnamae: ganti dengan nama font yang anda pilih di google.
Yourtext: di teks yang anda inginkan.
Jika anda ingin font digunakan di :
Blog title
Post title
Post body
Sidebar fonts
Anda harus menambahkan kode CSSnya. Jangan khawatir, sangat mudah ko.
Begini, silahkan cari kode title cssnya:
.post h3
atau
.post-title h3
Silahkan Copy kode di bawah ini tepat di bawah kode di atas:
font-family: 'Your Font Name';
Akan tampil seperti ini..post-title h3
font-family: 'Your Font Name';
font-family: 'Your Font Name';
Berikut keterangan letak fontnya:
Title : h1
Post title : .post h3 or .post-title
Post font : .post-body
Sidebar : .sidebar h2
Sebagai contoh kita akan meletakkan font di di postingan, maka kodenya adalah post-body. Lihat contoh berikut:
font-family: 'google Font Name';
Kemudian kita simpan font nya seperti berikut:
.post-body {
font-family: 'Your Font Name';
}
font-family: 'Your Font Name';
}
Jika anda tidak menemukan kode tersebut maka carilah yang mirip dengan yang di atas. Setiap template memang berbeda-beda dalam kodenya.
Untuk melihat contohnya silahkan klik demo. Disana saya sudah mengganti font di header dan di post titlenya.
Selesai deh.. selamat mencoba.
Sumber : http://blogpakdani.blogspot.com/2010/07/menambah-font-dari-google-custom-pada.html
0 comments:
Post a Comment