Posted on

Cara menggunakan Google Font di WordPress dan Blogspot

google font directory

Bosan dengan font default pada blog anda? Jom tukar kepada font-font yang lebih menarik dengan menggunakan Google Font. Tutorial ini membolehkan anda menukar font default dalam blog anda, seperti font pada paragraph, header 1,2,3…sidebar font dll.

Google Font for WordPress

google font for wordpress

Cara mudah menggunakan Google Font di wordpress ialah menggunakan plugin WP Google Fonts. Hanya perlu select font dan pilih dan gunakan di bahagian mana seperti blockquotes dan sebagainya.

Senarai font boleh tengok di website http://code.google.com/webfonts. Sekarang ramai orang berminat nak pakai font Ubuntu (link)

ubuntu google font

Google Font for Blogspot

Disebabkan blogger/blogspot tak boleh install plugin macam WordPress, jadi anda kena guna cara manual.

Pilih font yang anda berkenan di http://code.google.com/webfonts. Sebagai contoh Ubuntu font.

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

Tambah / sebelum penutup > contohnya /css’> menjadi /css’/>

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>

Copy dan paste code tersebut ke dalam template blogspot. Paste selepas permulaan <head>

google font blogspot

Untuk menggunakan font tersebut di bahagian2 seperti paragraph dan header, anda kena paste code di dalam bahagian css.

  • Header (title dan description) – #header
  • Title Blog – h1
  • Title Post – .post-title
  • Paragraph – .post-body
  • Title Sidebar – #sidebar h2
  • Text Sidebar – #sidebar .widget-content
  • Text Footer – .footer

Search <b:skin> di dalam template anda. Katakan nak guna font ubuntu di bahagian paraghraph.

Anda kena paste code seperti berikut.

.post-body { font-family: 'Ubuntu', arial, serif; }

Font family apa semua tu anda boleh copy dan modified dari website google font.

ubuntu google font[5]

 

Kalau nak guna di bahagian h2

h2 { font-family: 'Ubuntu', arial, serif; }

Contoh

ubuntu google font

Save dan preview. Contoh blog post menggunakan font ubuntu

image

Selamat mencuba! 🙂


RELATED POSTS

BACA :  Dapatkan ebook koleksi artikel terbaik JomPHP

23 thoughts on “Cara menggunakan Google Font di WordPress dan Blogspot

  1. fuyooo…mantap2
    aku suka themes ni
    dengan tutor tu gak.haha

    1. hahahah credit kepada cyberfly sbb susah payah edit theme nih 🙂

  2. ok cool jugak tulisan ubuntu tu.. selalu nampak blogger guna skrg ni

    1. haah ramai dah mula menggunakan font ubuntu kat blog masing2…ko bila lagi?

  3. Untuk Google Blogger ada cara lebih mudah, gunakan http://draft.blogger.com. Akan datang kat Blogger biasa pun akan boleh pakai Google Font, setting di Template designer, boleh guna berbeza2 font utk title blog, paragraph, title post, title gadget, footer dll.

    1. oo thanks for the info, aku tak check sgt blogger in draft sbb tak pakai blogger.com pun, nie saja buat based on request 🙂

  4. aku paling suka font facebook..ubuntu pun smart jugak :biggrin:

    1. font facebook apa dia eh…?

  5. font ubuntu dah macam biasa lak aku tengok T_T
    so aku guna freesans dan arsenine dalam blog aku 😀

  6. […] Setelah anda install doPDF, anda boleh memilih doPDF sebagai pencetak document anda. Contohnya saya mahu print artikel ini : https://jomphp.com/cara-menggunakan-google-font-di-wordpress-dan-blogspot.html […]

  7. […] This post was mentioned on Twitter by jomphp.com. jomphp.com said: Cara menggunakan Google Font di WordPress dan Blogspot http://goo.gl/fb/Q39ZP #jomphp […]

  8. Gempak.. Aku dah install, kejapkan nak deco blog jap.

  9. blog aku pakai font ubuntu.. :wub:

  10. wowow.
    baru la ni tengok.
    timekaseh ehh.
    nanti aku banje gula2 duit syiling.
    :w00t:

    1. Dah berkurun aku tulis ann…ko je yg x online…kehkeh

  11. Baeu saya tau.Lepas ni nak tukar fonla di blog saya.Selama ni tercari-cari juga.Satu lagi inilah kelebihan yang ada pada WP,iaitu pelbagai plugin disediakan.

  12. da lama cari tuto ni…nice blog la…

  13. oo baru tahu.tercari cari tntg font.thanks alot

  14. salam. saya dah boleh buat tuto ni, tapi kenapa tulisan jadi kecik semacam. tak boleh nak besarkan tulisan pun. macam mana ni? tulisan kecik sangat. please2 tolong sy.

    1. salam, buat dekat wordpress atau blogspot?

  15. Mcm mana nk tkur font dlm iphone 4.. Aku blm dapat buat..

Tinggalkan komen anda