Tutorial Guna Font Google Font dalam Blog

Tutorial Font

Hi, semasa mengedit blog Unni Anje tadi, aku mahu menggunakan font dari web google font, tetapi semua tutorial untuk menggunakan font dari Google font tu adalah edisi lama dan sudah tidak compatible lagi. Lagipun tutorial ini adalah request dari sahabat blogger aku dari negara seberang iaitu Jasmi (http://www.theamazingjasmi.com/).

01. Pergi ke laman web Google Fonts (https://fonts.google.com/) dan cari tulisan kegemaran kita. 

02. Setelah jumpa tulisan kegemaran kita, click pada button merah untuk 'select' phone tersebut.

Klik Button Merah Tersebut

03. Selepas kita klik, akan muncul kotak ini. Klik pada bahagian 'Customize'. tick pada beberapa jenis yang penting seperti regular dan bold & pastikan font yang kita pilih tidak terlalu berat. 

Kalau font tu jenis memberatkan blog kita, kotak berwarna hijau itu akan bertukar menjadi kuning atau merah.

Tick pada ciri tulisan basic seperti regular, bold, italic (jika ada)
04. Kemudian pilih 'Embed' dan kita akan dapat dua code, iaitu CODE HTML dan CODE CSS

Code HTML dan Code CSS
Kita perlu lakukan sedikit pengubahsuaian pada CODE HTML dan CODE CSS tersebut sebelum digunakan.

CODE HTML

Tambah type='text/css'/ pada akhir code.

Contoh:
<link href="https://fonts.googleapis.com/css?family=Mirza:400,700" rel="stylesheet" type='text/css'/

Gantikan code berwarna merah dengan code HTML Font anda.

CODE CSS

Tambah code ini:
body {
  Code css anda
}

Contoh:
body {  font-family: 'Mirza', cursive;}
Gantikan code berwarna merah dengan code HTML Font anda.

05. Now pergi ke dashboard blog korang. Pilih Template > Edit HTML . CTRL+F untuk cari code <b:skin> . 

06. Copy Code HTML font itu dan pastekan diatas code <b:skin> yang kita sudah cari.

(Rujuk gambar dibawah. Perhatikan code yang kita perlu tambah itu aku dah highlight)


07. Preview, jika tiada masalah boleh SAVE,

08. Sekarang masuk ke dashboard blog korang balik, pilih Template > CUSTOMIZATION

09. Paste CODE CSS dalam kotak custom CSS ini. Save!


Baiklah dah siap pun proses menukar font kita. Harap semua faham penerangan haru biru aku ni, kehkehkeh.
___________________❤❤❤___________________

Apapun, jom tengok hasil aku mengedit blog Unni tanpa izin ni, kehkehkeh, Unni suruh tukar template je, sekali header aku tukar, ampunnn Unni, harap Unni suka eh. 

Sebelum VS Selepas

Header Asal Unni, kot-kot Unni marah pepandai tukar, kekeke :P
Header sepenuh kasih sayang untuk Sis Unni,hehehe, kalau suka gunalah
 Jangan lupa Visit Unni Anje untuk melihat wajah baru blognya, KLIK SINI :)




Follow

22 comments

  1. Ohhh macam tu rupanya ye. Hahaa tips berguna ni. Dah lama terfikir cara nak tukar font google guna css hahahaha 😑

    ReplyDelete
    Replies
    1. Hehe, senangkan bila dah tahu cara, tu la mai pun godek2 juga tadi untuk cari penyelesaian... Lepas ni kerap lerrr bertukar font.haha

      Delete
  2. CCL memang lemah kalau nk edit font ni ...kena main coding ..mak aii memang tak mahir la ..ada tutorial ni CCL boleh belajar step by step

    ReplyDelete
    Replies
    1. Hahaha cubalah follow step by step Mai ni :D

      Delete
  3. Patut header u all ni canggih manggih je... thanks ya... lepas ni boleh buat sendiri...

    ReplyDelete
    Replies
    1. Hahaha Mai edit pakai Canva ja ni Noor Azlan, auto generate. hehehe.

      Delete
  4. Wah.. Spesial request nie.. Siapalah agak nya kawan Mai dari negeri seberang tu.. Hahaha..

    Nak try follow step by step sampai berjaya.. Anyway, font yang Mai pakai apa nama dia??
    Thanks again ya Mai

    ReplyDelete
    Replies
    1. Huhu Jasmi la tu, tapi macam tak boleh guna je Jasmi, sorry tau, kalau ada problem mai pun tak pasti nak solve mcm mana.

      Font blog ni Josefin Sans.

      Delete
  5. Kak ana ada nk tanya mai lah pasal font ni, nanti kak ana DM ye 😘

    ReplyDelete
  6. Thanks for tutorial.. nanti nak try :)

    ReplyDelete
  7. Wah.. terima kasih tutorial ni kak. Senang jadi rujukan GV nanti kalu nak edit font. terbaik kak. :D

    ReplyDelete
  8. cantikk blog unni.. pandai mayy edit.. hehe :)

    ReplyDelete
    Replies
    1. Hehe terima kasih kak Fyna, mai just tambah header & font je, template tu yang cantik,hehe.

      Delete
  9. Ooo, cenggini la nak tukar2 font, main coding..
    Tapi ni yg mrs pip lemah ni...
    Nampak mcm senang, tapi yg buta coding mcm mrs pip ni,
    Haha, ke laut nnt tulisannya..
    Anyway, thanks sharing..
    Cheers

    ReplyDelete
    Replies
    1. Haha mai pakai basic blogger fonts je, buat tuto kot2 nanti jemu teringin nak pakai fonts dari google fonts senang, hihi...

      takpa kalau tak tahu apa2 boleh je tanya mai :)

      Delete
  10. Alahhhhh, semangat nak belaja tapi saya pakai pre made template yg free punya pastu dia disable customization part nya. wuhuuu

    //awesomeness//

    ReplyDelete
    Replies
    1. Alaa sayangnya..template awak dari mana? So far dari themexpose & beauty template masih boleh edit customization.

      Delete
  11. wah suka tgk header bru tu. untung unni =D

    ReplyDelete
  12. Cantikk. Pandai btul mai edit. 😊

    ReplyDelete