AnarmNet

Blog Kongsi Pendapat dan Idea

  • Home
  • Penulis
  • ONEXOX
  • Hubungi
You are here: Home » Blogging » Tukar Font Blog dengan Google Font API

Tukar Font Blog dengan Google Font API

25/12/2010 Anarm 44 Comments

Share on Facebook Share on Twitter Share on WhatsApp

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 on Facebook Share on Twitter Share on WhatsApp

Artikel Berkaitan

  • Arahkan Pelawat Blog Lama ke Blog Baru

Kategori : Blogging Keyword : css, font type, google font api, google font directory, html

Tentang Penulis

Blogger sepenuh masa (tapi malas update blog), bekerja sendiri, pengedar sah syarikat telekomunikasi ONEXOX. Suka habiskan masa terluang di Facebook, Instagram dan Twitter.

Previous article:
Bina Laman Profile di About.me
Next article:
Daum PotPlayer – Media Player Pilihanku

44 Comments

  1. Hafizul says

    30/07/2012 at 9:10 AM

    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

    Reply
    • Anarm says

      30/07/2012 at 12:50 PM

      @Hafizul, cari code “php the_content”.. pastu tu copy paste code nuffnang selepas code “php the_content” tu..

      Reply
  2. MokhZam says

    24/02/2011 at 1:19 PM

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

    Reply
    • Anarm says

      25/02/2011 at 8:41 PM

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

      Reply
      • MokhZam says

        02/03/2011 at 6:30 PM

        @Anarm, ok, nanti aku try…thanks bro

        Reply
  3. jomrileks says

    24/02/2011 at 1:42 AM

    bro,baru beli hosting ni..tp x boleh buat la font tu bro..camne ni?

    Reply
    • Anarm says

      25/02/2011 at 8:25 PM

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

      Reply
  4. Yakboktam says

    20/02/2011 at 1:24 AM

    terbaeklah tutorial ni.tengah cari maklumat tentang tukar font ni.tq bro

    Reply
  5. Yakboktam says

    13/01/2011 at 8:56 PM

    cun laa artikal ni kebaboom

    Reply
  6. sazali yusof says

    30/12/2010 at 3:48 PM

    yeah.. boleh try nih… thanx bro.

    Reply
  7. lau tze says

    30/12/2010 at 2:04 PM

    aku dah guna lama kat blog aku tak caya tengok sini

    http://tze.blogspot.com/ :whistle:

    Reply
  8. wazy says

    27/12/2010 at 10:08 AM

    wahhh semakin cool
    kemas dan cantik
    nanti nak try juga la

    Reply
  9. Mohd Shahrul Hafizi says

    26/12/2010 at 11:54 PM

    Hebat! Baru je tukar font menggunakan font type dalam Template Designer yang disediakan oleh BloggerDraft.com. Masih kurang bijak dengan coding ni. Huhuhu. :sad:

    Reply
  10. Mohd Isa says

    26/12/2010 at 6:42 AM

    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?

    Reply
    • Anarm says

      26/12/2010 at 7:46 AM

      @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)

      Reply
      • Mohd Isa says

        26/12/2010 at 3:17 PM

        @Anarm, maknanya kita tak perlu risaulah mengenai kelajuan dia. nak kena cubalah nanti. hoho, thanks bro. ni yg best ni. :)

        Reply
        • Anarm says

          26/12/2010 at 5:01 PM

          @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

          Reply
          • Mohd Isa says

            26/12/2010 at 5:14 PM

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

            Reply
  11. Kujie says

    26/12/2010 at 6:41 AM

    comel…kemas je
    nanti nak cuba juga
    terimakasih

    Reply
    • Anarm says

      26/12/2010 at 7:37 AM

      @Kujie, sama2 kak jie.. :happy:

      Reply
  12. RIS-FAMILI says

    25/12/2010 at 9:58 PM

    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.

    Reply
    • Anarm says

      26/12/2010 at 1:47 AM

      @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

      Reply
  13. shaharil says

    25/12/2010 at 9:51 PM

    smart betul font yang digunakan. Terang dan jelas untuk dibaca.

    Reply
  14. DarkaceMedia says

    25/12/2010 at 9:07 PM

    wah! tq bro sbb sudi share benda ni

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

    kalau freelah

    Reply
  15. MuJE says

    25/12/2010 at 3:17 PM

    wow! boleh terai ni!

    Reply
    • Anarm says

      25/12/2010 at 3:38 PM

      @MuJE, boleh sgt2.. selamat menterai.. :biggrin:

      Reply
  16. PenTulis says

    25/12/2010 at 2:11 PM

    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:

    Reply
    • Anarm says

      25/12/2010 at 3:37 PM

      @PenTulis, buat laa.. pastu boleh update blog sekali kot..

      Reply
  17. hollowgram says

    25/12/2010 at 1:35 PM

    nice tips.. memang cun

    Reply
  18. yash says

    25/12/2010 at 11:35 AM

    amboi mentang2 tgh berUbuntu semua nak ada kaitan ngn buntu2.. hahahaha
    cool!! nak try kat blog.. hehehhee :silly:

    Reply
    • Anarm says

      25/12/2010 at 2:03 PM

      @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:

      Reply
  19. syahrilhafiz says

    25/12/2010 at 11:12 AM

    comel bro ;D

    Reply
    • Anarm says

      25/12/2010 at 2:01 PM

      @syahrilhafiz, … dan smart.. huhu

      Reply
  20. EiNS says

    25/12/2010 at 10:35 AM

    WordPress plugin pun ada ntuk tukar font

    Reply
    • paeh says

      25/12/2010 at 10:38 AM

      @EiNS, apakah dia…?

      Reply
    • Anarm says

      25/12/2010 at 10:58 AM

      @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:

      Reply
    • aizuddin says

      27/12/2010 at 9:30 PM

      @EiNS, kena google la pasni :unsure:

      Reply
  21. paan says

    25/12/2010 at 10:23 AM

    woah! genius genius!

    Reply
    • Anarm says

      25/12/2010 at 10:28 AM

      @paan, i am super genius.. hahaha.. :lol:

      Reply

Kongsikan Komen / Pendapat Anda Cancel reply

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

Media Sosial

Follow saya di Facebook Follow saya di Twitter Follow saya di Instagram

Entri Terkini

  • Kad Debit Diguna Tanpa Pengetahuan, Duit Dalam Akaun Maybank Hilang
  • AMARON Bateri Kereta Tahan Lama
  • Buka Akaun Perniagaan Maybank Secara Online, Tanpa Introducer
  • Bayar Zakat Fitrah (Zakat Selangor) Guna Aplikasi Boost eWallet
  • Diskaun Bil Elektrik TNB Selama 6 Bulan
Jana 4 Angka Seminggu Bisnes di Shopee

Langgan RSS Feed

Masukkan alamat email anda untuk melanggan blog ini dan dapatkan artikel terkini terus ke dalam inbox email anda.

© 2021 – Anarm Network Resources

Powered by IWHost • WordPress • Privacy Policy