Penggunaan Google Font API di Blogger

font_api Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

shorting popularity

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

add to collection

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

review

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

kode script

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

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

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

  1. Klik Rancangan
  2. Kemudian klik Edit HTML
  3. Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
    </head>
  4. Cari kode css untuk body, contohnya seperti berikut :
    body {
    width: 980px;
    background: #FFF;
    font-size: 13px;
    font-family: 'Droid Sans', verdana, arial;
    text-align: left;
    color: #000;
    margin: 0 auto;
    padding: 0;
    }
  5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

20 comments

17 Agustus 2011 00.29

pertamax................
owh. . . .begitu ya....
baiklah, akan dicoba !!!
http://wafariq.blogspot.com/

17 Agustus 2011 08.29

Bisa juga ganti font di tab perancang template.
Tp ntar dah resepnya juragan sy coba...nice info.

17 Agustus 2011 13.31

Terimakasih Trick nya gan..
Jadi tambah cantik deh blogg

19 Agustus 2011 14.11

triknya bagus banget nih gan, semoga bermanfaat nih, sukses selalu ya gan

21 Agustus 2011 20.45

nice info gan

24 Agustus 2011 07.31

makasih infonya...
nanti dicoba nih....

26 Agustus 2011 18.22

biar tulisan posting di blog rapat seperti disini, gmn cara nya ya? maaf mungkin komen saya tidak nyambung ma judul post ini..

28 Agustus 2011 03.57

Lama gak berkunjung, khusus mengucapkan selamat Idul Fitri buat Miscah blog and Friends

5 September 2011 12.58

Blog dan artikelnya bagus, komentar juga ya di blog saya www.when-who-what.com

13 September 2011 00.39

oke gan makasih triknya
di utnggu update postnya :)

21 September 2011 11.49

salam. wah mantap tuh, bisa banyak pilihan font untuk mempercantik tampilan blog, kalau yang default kan kurang sreg gitu {kurang variasi maksudq}. dengan info diatas saya bisa berkreasi lagi dengan font2 cantik...!!

Anonim
22 September 2011 10.26

jdi makin keren gan,,,,

salut dah..

http://fashionpria.indoprofile.com/blog

22 September 2011 11.28

Udah tak coba tapi gagal di template blogku, tapi pas ku coba di blog lainnya bisa, sepertinya template blogku susah di modif modif :-D Tengkiu buat artikel bermanfaat ini.

8 Oktober 2011 02.32

bro mari tukar link.....????//
http://asyariel.blogspot.com/

19 Januari 2012 13.27

ngeblog benar2 menarik jika bermnfaat bagi pengunjungnya. blog ini tutorial topcer http://supri7.blogspot.com

9 Februari 2012 22.14

Thank buat infonya ,, menarik,

19 Maret 2012 17.31

makasih infonya mas ..
tutorialnya mudah difahami :)

http://herbal-arrohmah.blogspot.com

18 Mei 2012 15.43

Google Fonts emang mantebb kang doddy.rupanya google emg bener2 pengen jd raja internet.smua fitur ada di dia.

Mbah Google memang seng ada lawaaaaaan!!

13 Juli 2012 22.28

Mau coba dulu :)

Poskan Komentar

Reader Community

Recent Comments