Tutorial Guna Font Google Font dalam Blog

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