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+

Semoga info ini berguna dan semoga Anda bisa mempercantik blog Anda.

Komentar

  1. wah ane dah tau bbrp minggu yang lalu mas dayat... dah prnh ane praktekin. mg pertamax

    BalasHapus
  2. wah itu dia yg saya pake di blog

    BalasHapus
  3. klo aku pake font yang standart aja ah, :D

    BalasHapus
  4. makasih atas infonya dan rekomendasinya mas
    saya mau ke tkp dulu ya

    BalasHapus
  5. thank you for tutorialnya :))

    BalasHapus
  6. Thank ya mas, lumayan buat namabah kleksi font di komputer gege. Lok buat webs standar-standar adja lah

    BalasHapus
  7. mantab mas doy lang sung aq coba

    BalasHapus
  8. font kek gitu gak akan kelihatan kalau di komputer yang bersangkutan tidak install font gitu

    BalasHapus
  9. @rizky
    monggo dicoba
    semoga bisa ya

    BalasHapus
  10. hohoho !!! kerennn !!!!

    Khamardos's Blog | Mufied
    Blogging to share the tips and tricks for You ...

    BalasHapus
  11. @edylaw
    :D ini kan sudah disyandarint font web :D
    jadi bisa terlihat tergantung browsernya

    BalasHapus
  12. @oke
    ini kan juga di standarin

    BalasHapus
  13. @hamba
    iya beberapa minggu lalau diumumkan code google

    BalasHapus
  14. wah bisa di coba nih.,.,.
    lumayan kan buat latuhan gratis.,.
    hehehhe

    :)

    BalasHapus
  15. ada info gratis lg ne...trims ya mas doyok

    BalasHapus
  16. Keren mas doyok :)
    Oh iya, bagi blogger yang berminat belajar Bahasa Jerman, saya telah launching Deutsch Lernen atau belajar Bahasa Jerman di Klik disini :)

    BalasHapus
  17. Wahhh,,,,.... makasih masdoyok tutornya, mau q tanyain eh ternyata uda dibuat artikelnya.
    nice :-D

    BalasHapus
  18. hmmm, mantap fontnya mas. Tapi untuk sementara aku pake yang biasa aja dulu. Lagi lebih mengoptimalkan ke SERP nih

    BalasHapus
  19. jika ingin mangganti font judul blog dengan font baru gimana caranya gan, mohon pencerahan...

    BalasHapus
  20. tampilan blog jadi tambah menarik karena kini google nambah koleksi font yang cantik, begitu ya mas...?

    BalasHapus
  21. *NUMPANG LEWAT
    ” Akhirnya yang ditunggu-tunggu telah datang langsung dari Handphone kamu….. GAMPANG, MUDAH, dan MURAH… ketik REG CANTIK kirim ke 9789(khusus Telkomsel) Didalamnya ada ribuan tips-tips bagaimana cara tampil cantik yang bisa kamu dapatkan dan langsung kamu praktikkan dirumah. Jadi gk akan nyesel dech. mau cantik psti bisa!

    BalasHapus
  22. wah thanks infonya mas,, :D

    izin naro blog ane :
    http://tamz-tips.blogspot.com

    BalasHapus
  23. kalau nge edit CSS nya itu bagaimana sih kode nya? saya bingung, ada yan bisa? trims sebelumnya......

    BalasHapus
  24. @Chai
    seperti contoh di atas adalah CSS
    bagian yg utk mengatur pemosisian dan tata letak, itulah CSS

    BalasHapus
  25. mas doyok, cara bikin font comic sans gimana ya?

    BalasHapus
  26. kalau comic sans udah langsung bisa kodenya ini

    font-family: comic Sans MS;

    BalasHapus
  27. kodenya ini di taro dmn sih? di rancangan apa pengaturan?

    BalasHapus
  28. di atas sudah jelas to, kodenya dari google web font diletakkan di atas /head

    BalasHapus

Posting Komentar

Postingan Populer