Tukar Font Blog dengan Google Font API

cantikkan blog dengan google font api

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:

&lt;link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'&gt;

Code yang telah dimasukkan ke dalam tag <head> (highlight)

&lt;head&gt;
&lt;title&gt;Ini Belog Saya&lt;/title&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'&gt;
&lt;/head&gt;

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 previewer

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.

Share this post:

Share on WhatsApp Share on Telegram

44 Comments

  1. 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

  2. bro, aku dah pilih font dan dah paste kat bhgn head dan css tapi tak jadila…ada silap kat bhgn mana2 ke?

    • @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..

  10. 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)

        • @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. :)

  12. 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.

  14. wah! tq bro sbb sudi share benda ni

    nnti bro buatlah tutorial pasal gravatar.. xreti ni :(

    kalau freelah

  16. 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:

  18. 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:

Leave a Reply

Your email address will not be published. Required fields are marked *