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.
18 comments:
Pertamaax... wew... mantab gan.. bagus juga kalo title blog mempunyai font yang unik... ntar wa coba.. izin save ya.. :)
Oke sob..
makasih infonya sob
sama2 sob... thank for comment
kalau mau ganti font judul blognya gimana gan?
@joe
Coba anda baca lagi bagian yang ini di artikel di atas:
Jika anda ingin font digunakan di :
Blog title
Post title
Post body
Sidebar fonts
bro, ketika saya mencoba ada tulisannya seperti ini:
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "subset" must end with the ';' delimiter.
maksudnya apa, mohon pencerahan!
salam kenal:)
mas, pas edit htmlnya bisa, tapi kalo mau make huruf itu kemana yah?
coz di posting gak ada, thx:)
@Kusumaties
ada sobat, tinggal klik aja di nomor 2. Pilihlah font yang anda sukai.
atau masuk ja di alamat ini
http://code.google.com/webfonts
@regina
mungkin ada salah penempatan kode sob..cek lg ya
akhirnya ketemu juga tutorial ttng menambah font di blogspot !!
thanks ilmunya sob :D
teksnya jadi kecil. ngatur ukuran fontnya gmn ?
@Dedew
pngaturan ukuran font biasanya dari template bawaannya. jadi anda tinggal rubah angka ukurannya sesuai yang anda kehendaki
makasih infonya kang.salam kenal..
aduh duh duh..aku udah nyoba tp kok gak berhasil ya..puyeng dengan kode kodenya...:(
berhasil mas :D
makasi
thanks ya gan lihat blohg ane sudah clink
Makasih artikelnya bermanfaat..
Oh ya Gan saya ada tips cara dapat 1 juta lebih baclink utuk meningkatkan visitor, kalo agan berminat bisa agan lihat di
Tips mendapat 1juta Baclink Gratis untuk Blogger
trims, ditunggu kunjungannya.
Post a Comment
Silahkan tulis komentar sebagai umpan balik dari artikel ini. Tidak diperkenankan untuk komentar yang berunsur spamming, porno, dll.