UXDE dot Net Wordpress Themes

Cara menggunakan Google Font di WordPress dan Blogspot

By

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! :)

Incoming search terms:

Discussion 23 Comments

  1. Faizal

    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.

  2. ieja

    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.

Tinggalkan komen anda