Ganti Font Blog - Pilih Font Cantik di Google Font Directory


Apa lagi yang baru dari Google? Kini Google menambah beberapa jenis font lagi untuk penggunaan standart yang bisa kita pilih untuk digunakan di blog kita. Jika sebelumnya Anda hanya berkutat dengan Times New Roman, Arial, Courier, Georgia, Helvetica, Trebuchet atau Verdana, kini Anda akan memiliki lebih banyak lagi pilihan. Ada 18 pilihan baru yang akan memuaskan Anda.


Instalasi Font
1.Silahkan pergi ke Google Font Directory
2.Akan ada banyak pilihan font. Silahkan klik jenis Font yang Anda inginkan.
3. Akan muncul contoh penggunaan font berbagai ukuran.
4. Silahkan klik pada tab menu, Get The Code
5. Letakkan kode yang Anda dapatkan di atas </head>
Misal Anda pilih Lobster, Kodenya adalah
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Lalu simpan template. Jika gagal, silahkan tambahkan slash sebelum penutup (perhatikan yang berwarna merah di bawah ini)
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
6. Simpan Template

Penggunaaan Jenis Font
Sekarang silahkan Anda atur css jenis font pada template Anda. Kode css diawali dengan font-family:
Misal untuk merubah jenis font pada blockquote:
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
}

Perhatikan yang berwarna merah, silahkan ganti dengan font yang Anda inginkan. Misalnya lobster. Sehingga kodenya menjadi:
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Lobster;
}

Jika Anda hanya ingin menggunakannya pada bagian postingan Anda dan hanya untuk beberapa karakter saja, silahkan gunakan kode berikut ini. Pilih metode posting Edit HTML bukan Compose.
<span style="font-family: Lobster;  font-size: 20px;">Teks Anda Disini</span>

Contohnya seperti berikut ini:
Mas Doyok Blog Tips

Browser Compatibility
Font ini di standartkan untuk web, jadi tidak tergantung font yang terinstall di komputer Anda. Namun Font ini hanya compatble di:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Internet Explorer: version 6+ Share

0 komentar:

Posting Komentar