Rata-rata pemilik laman web dan blog biasanya menggunakan font seperti Arial, Georgia, Times New Roman, Trebuchet MS, Tahoma, Verdana dan sebagainya untuk blog mereka. Kini, dengan adanya Google Font API membolehkan pemilik laman web atau blog menukar bentuk teks pada blog dengan menggunakan font yang terdapat di Google Font Directory.
Ada beberapa jenis font disediakan dengan bentuk yang menarik dan boleh digunakan bagi mengganti font asal pada blog.
Tergerak hati untuk cuba benda ni selepas baca entri “Blog melayubuntu kini menggunakan font Ubuntu“.
Aku dah lama nak guna font Ubuntu untuk blog ni. Semuanya gara-gara sejak aku berkenalan dengan Ubuntu.
Serius aku rasa cantik je font yang diguna dalam Ubuntu OS. Google Font API pun dah sediakan font Ubuntu dalam Google Font Directory. So, boleh la guna untuk cantikkan font blog.
Aku tengok blog-blog lain pun dah banyak yang gunakan Google Font API. Aku pula baru semalam cuba benda ni. First try, gagal. Takde apa-apa perubahan berlaku.
Rupanya aku tersalah buat. Biasa la, budak baru belajar blogging kan. Huhu..
Cara Menggunakan Google Font API
Apa yang perlu dilakukan adalah buka laman web Google Font Directory, pilih font mana yang korang berkenan dan tekan tab “Use this font“.
Kemudian, copy code yang disediakan di halaman tu dan masukkan (paste) di bahagian tag <head> dalam blog korang. Contoh code adalah seperti di bawah ni.
Contoh code yang diberikan:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
Code yang telah dimasukkan ke dalam tag <head> (highlight)
<head> <title>Ini Belog Saya</title> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> </head>
Langkah seterusnya, tentukan bahagian mana pada blog yang korang nak gunakan Google Font API tu. Mungkin korang nak guna hanya untuk tajuk entri, mungkin untuk teks entri, mungkin untuk sidebar, atau mungkin untuk keseluruhan blog.
Sebelum tu, korang perlu kenalpasti dulu tag pada bahagian yang dikehendaki tu sama ada ianya menggunakan tag <h1> atau <h2> atau sebagainya (ikut CSS blog masing-masing).
Kemudian, masukkan code yang diberikan ke dalam stylesheet (css) theme blog korang. Contoh:
h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }Setiap theme blog mempunyai CSS yang berbeza-beza. Oleh itu, pastikan korang tau struktur coding bagi theme yang korang pakai.
Untuk memudahkan kerja-kerja coding ni, aku saran korang guna Firebug untuk edit code tanpa mengganggu theme blog. Firebug sangat-sangat membantu untuk buat live editing.
Google Font Previewer
Google Font Previewer juga ada tersedia bagi membolehkan korang edit font yang nak digunakan. Korang boleh edit dari segi saiz, buat shadow, tetapkan spacing dan lain-lain.
Setiap perubahan yang korang buat pada font tu akan menghasilkan code dan korang hanya perlu copy paste code tersebut masukkan ke dalam fail CSS blog korang.
Google Font API ni boleh digunakan pada mana-mana blogging platform, tak kira Blogspot ke WordPress ke asalkan ianya ada memberi kita fungsi untuk edit coding theme.
Untuk laman web jenis static HTML pun boleh gunakannya, cuma code untuk font tu perlulah dimasukkan pada setiap page di bahagian tag <head> (bagi web yang mempunyai banyak page).
Amacam? Taknak cantikkan font blog korang ke? Cuba la. Semoga berjaya.
En anarm..nak tanya sikit boleh?mcm mana nk letak kan iklan nuffnang diantara setiap entri tu yer??sy x jumpa cari nk letak kod nuffnang tu kat mana…hehe
@Hafizul, cari code “php the_content”.. pastu tu copy paste code nuffnang selepas code “php the_content” tu..
bro, aku dah pilih font dan dah paste kat bhgn head dan css tapi tak jadila…ada silap kat bhgn mana2 ke?
@MokhZam, code utk bahagian head tu masukkan dulu.. lepas tu, cari bahagian font yg mane yg nk tukar.. cari kt css.. bila dh jumpe, replace code font yg asal dgn code font yg dicopy dr google font api tu..
@Anarm, ok, nanti aku try…thanks bro
bro,baru beli hosting ni..tp x boleh buat la font tu bro..camne ni?
@jomrileks, copy paste je code font tu masuk kat header.. yg rumit sikit kt bahagian css.. kene cari dan tengok betol2 tags yang digunakan utk font yg nk ditukar.. bila dh jumpe tags tu (h1 ke h2 ke ape2 ke), lepas tu replace dgn nama font yg copy dari google font api..
terbaeklah tutorial ni.tengah cari maklumat tentang tukar font ni.tq bro
cun laa artikal ni kebaboom
yeah.. boleh try nih… thanx bro.
aku dah guna lama kat blog aku tak caya tengok sini
http://tze.blogspot.com/ :whistle:
wahhh semakin cool
kemas dan cantik
nanti nak try juga la
Hebat! Baru je tukar font menggunakan font type dalam Template Designer yang disediakan oleh BloggerDraft.com. Masih kurang bijak dengan coding ni. Huhuhu. :sad:
pergh…pengguna ubuntu yang tegar ni…aku teringin gak nak tukar font ni…tp belum masanya lagi kot…wat masa sekarang ni aku pakai verdana je dahulu…maknanya…font yg kita pilih tu akan load font dari page lain la kan…jadi ia akan menambah page load kita…betul tak?
@Mohd Isa, dia load font dari server Google.. server Google rasanya takde masalah slow.. pkai google font api ni ade 3 benefit kita dapat.. aku lupa masukkan dlm entri..
1. Bandwidth savings (weight is on Google)
2. Caching speed (same font used on multiple sites, browser cache kicks in)
3. Speed in general (Google’s CDN is faster than your site)
@Anarm, maknanya kita tak perlu risaulah mengenai kelajuan dia. nak kena cubalah nanti. hoho, thanks bro. ni yg best ni. :)
@Mohd Isa, yup.. font blog jadi cantik, speed pon tetap sama macam takde buat ape2 perubahan.. mungkin ada tambah page load tp tak rasa langsung.. lagipon besar mane la sangat saiz font, takde sampai 1 MB nyee.. huhu
@Anarm, hoho…menarik ni. aku ada gak fikir nak ubah skin thesis aku tu. dah bosan la plak tgk benda sama jerk. hehe. nnt aku nak test guna font api ni gak la. thanks bro. :)
comel…kemas je
nanti nak cuba juga
terimakasih
@Kujie, sama2 kak jie.. :happy:
Menarik gak panduan ni. Panduan ni utk platform blogger, wordpress atau yg lain.
Sebab aku cuba dapatkan kod sptmana yg kau berikan tapi tak jumpa la.
FYI aku guna platform blogger. TQ.
@RIS-FAMILI, panduan ni sesuai untuk semua platform blog, termasuk blogger.. masukkan dulu code pertama dalam <head> pada theme blog.. yang susah sikit cuma untuk code yang kedua tu je.. sebab CSS setiap theme blog ada yang sama, ada jugak yang tak sama..
mungkin tak berapa nampak kan? apa kata rujuk entri ni..
http://www.cybernetic88.com/cara-menggunakan-api-google-font-pada-blogger.html
smart betul font yang digunakan. Terang dan jelas untuk dibaca.
wah! tq bro sbb sudi share benda ni
nnti bro buatlah tutorial pasal gravatar.. xreti ni :(
kalau freelah
wow! boleh terai ni!
@MuJE, boleh sgt2.. selamat menterai.. :biggrin:
wahh.. smart2 gak ek font kat web font api tu.. aku nak buat jugak la kat blog aku.. update blog malas, buat benda ni rajin plak.. :whistle:
@PenTulis, buat laa.. pastu boleh update blog sekali kot..
nice tips.. memang cun
amboi mentang2 tgh berUbuntu semua nak ada kaitan ngn buntu2.. hahahaha
cool!! nak try kat blog.. hehehhee :silly:
@yash, haha.. dah aku suka ngan font dia nak wat cane.. kalo tak suka, ko try la font lain.. ada banyak lagi kat site tu.. pilih je.. jangan pakai font tamil dah la.. susah aku nak baca blog ko nanti.. :lol:
comel bro ;D
@syahrilhafiz, … dan smart.. huhu
WordPress plugin pun ada ntuk tukar font
@EiNS, apakah dia…?
@EiNS, ade ek? share la sini.. huhu.. tapi aku kalo dengar plugin je jadi rasa malas sebab blog ni dah banyak sangat plugin.. malas nak tambah lagi.. :wassat:
@EiNS, kena google la pasni :unsure:
woah! genius genius!
@paan, i am super genius.. hahaha.. :lol: