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.
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.
Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.
Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.
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.
- Klik Rancangan
- Kemudian klik Edit HTML
- 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>
- 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;
}
- 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 !
