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)
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.
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.
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
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 TemplatePenggunaaan 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.
wah ane dah tau bbrp minggu yang lalu mas dayat... dah prnh ane praktekin. mg pertamax
BalasHapuswah itu dia yg saya pake di blog
BalasHapusklo aku pake font yang standart aja ah, :D
BalasHapuswah bagus nih mas....
BalasHapusmakasih atas infonya dan rekomendasinya mas
BalasHapussaya mau ke tkp dulu ya
thank you for tutorialnya :))
BalasHapusThank ya mas, lumayan buat namabah kleksi font di komputer gege. Lok buat webs standar-standar adja lah
BalasHapusmantab mas doy lang sung aq coba
BalasHapusfont kek gitu gak akan kelihatan kalau di komputer yang bersangkutan tidak install font gitu
BalasHapus@rizky
BalasHapusmonggo dicoba
semoga bisa ya
hohoho !!! kerennn !!!!
BalasHapusKhamardos's Blog | Mufied
Blogging to share the tips and tricks for You ...
@edylaw
BalasHapus:D ini kan sudah disyandarint font web :D
jadi bisa terlihat tergantung browsernya
@oke
BalasHapusini kan juga di standarin
@hamba
BalasHapusiya beberapa minggu lalau diumumkan code google
wah bisa di coba nih.,.,.
BalasHapuslumayan kan buat latuhan gratis.,.
hehehhe
:)
ada info gratis lg ne...trims ya mas doyok
BalasHapusKeren mas doyok :)
BalasHapusOh iya, bagi blogger yang berminat belajar Bahasa Jerman, saya telah launching Deutsch Lernen atau belajar Bahasa Jerman di Klik disini :)
boleh juga kalo diliat2 kang :)
BalasHapusWahhh,,,,.... makasih masdoyok tutornya, mau q tanyain eh ternyata uda dibuat artikelnya.
BalasHapusnice :-D
hmmm, mantap fontnya mas. Tapi untuk sementara aku pake yang biasa aja dulu. Lagi lebih mengoptimalkan ke SERP nih
BalasHapusThanks Banget gan....
BalasHapusweizzz...mantap jg ne
BalasHapusblog chemo
jika ingin mangganti font judul blog dengan font baru gimana caranya gan, mohon pencerahan...
BalasHapustampilan blog jadi tambah menarik karena kini google nambah koleksi font yang cantik, begitu ya mas...?
BalasHapus*NUMPANG LEWAT
BalasHapus” 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!
“
wah thanks infonya mas,, :D
BalasHapusizin naro blog ane :
http://tamz-tips.blogspot.com
kalau nge edit CSS nya itu bagaimana sih kode nya? saya bingung, ada yan bisa? trims sebelumnya......
BalasHapus@Chai
BalasHapusseperti contoh di atas adalah CSS
bagian yg utk mengatur pemosisian dan tata letak, itulah CSS
mas doyok, cara bikin font comic sans gimana ya?
BalasHapuskalau comic sans udah langsung bisa kodenya ini
BalasHapusfont-family: comic Sans MS;
kodenya ini di taro dmn sih? di rancangan apa pengaturan?
BalasHapusdi atas sudah jelas to, kodenya dari google web font diletakkan di atas /head
BalasHapus