Headlines News :
Home » » Cara Merubah Font Family Blog Menggunakan Google Web Fonts

Cara Merubah Font Family Blog Menggunakan Google Web Fonts

Written By Gressnet Hotspot on Friday, December 9, 2011 | Friday, December 09, 2011

Google Web Font
Salam sukses Buat Agan - Agan !! Semoga selalu menemukan hal - hal yang baru untuk di postingkan, Postingan aku kali ini Tentang Merubah Fonts Family Blog  Menggunakan  Google Web Fonts.
Mungkin Sahabat Bloger sudah Tidak asing lagi dengan info ini, tapi iiii mungkin ada juga sebagian sahabat blogger yang masih tabu untuk merubah font blognya ehhehe....
Soalnya menurutku penting deh merubah huruf,ukuran,warna blog kita biar enak di pandang gituuh,.aku terinspirasi dari blogku sendiri dengan font bawaanya kurang sesuai dengan keinginanku eheh...
"dalam hati " orang membaca kan pasti tertuju pada huruf-huruf yang di bacanya, nah kalau huruf nya bagus dan enak untuk di baca kan jadi semangat bacanya, maka timbulah untuk menganti font blogku,saya cari cara terbaik untuk mengganti font blogku soalnya aku pernah ganti dengan melihat daftar nama font dari komputer ternyata ke orang lain masih tetep bawaan blognya itu karena di computer client tidak ada font yang di pasang di blog ku,... ahhhh percuma kan, dan aku menemukan solusi dari link Sukses. nah kalau yang ini langsung dari daftar web font google jadi semua yang buka blogku pasti fontnya ga akan berubah ehehehhe
yo wiss langsung aja ya.... kelamaan ngomeng nich.....
Arial, Tahoma, atau Georgia adalah beberapa jenis huruf (font family) yang umum kita temukan di blog atau website. Huruf-huruf tersebut termasuk kelompok web safe fonts atau jenis huruf yang bisa dipastikan dapat dibaca (di-render) oleh semua broswer pada sistem operasi yang berbeda-beda.
Jika kebetulan Kamu tidak puas dengan jenis-jenis font di atas, maka tidak ada salahnya Kamu mencoba font-font dari Google Web Fonts. Semua jenis font pada layanan Google ini bersifat open source, sehingga bisa dengan bebas Kamu gunakan.
Kurang lebih 335 jenis huruf yang bisa Kamu  gunakan di Google Web Fonts dan angka ini akan terus bertambah seiring dengan masuknya jenis-jenis font karya typo-designers lainnya.

Memilih Jenis Font di Google Web Fonts
Setelah Kamu  berada di halaman utama Google Web Fonts, klik Start choosing fonts dan sesaat kemudian Kamu akan Melihat daftar beserta live preview dari masing-masing font.

MGWF1"

MGWF2"
Pada bagian ini, Kamu bisa menggunakan teks/kalimat Kamu sendiri dengan menginputkan teks pada bagian A. Kamu juga bisa melihat bagaimana font-font tersebut ditampilkan dengan ukuran (font size) berbeda dengan melakukan pengaturan pada bagian B "perhatikan kembali gambar sebelumnya!".
Selanjutnya, cari jenis font yang menurut Kamu menarik. Pada dasarnya Kamu bisa menggunakan jenis font manapun. Namun beberapa jenis font, menurut saya, lebih cocok digunakan pada isi atau konten blog, sementara lainnya lebih baik digunakan pada heading atau judul posting. Font-font untuk heading biasanya tebal-tebal (bold), sedangkan untuk isi lebih kurus (light).

 Cara Menggunakan Google Web Fonts di Blog
ok!! Setelah Kamu memilih font yang kamu suka, selanjutnya klik pilihan Quick-use seperti ditunjukkan anak panah C pada gambar sebelumnya. Google Web Fonts kemudian akan menampilkan halaman berikut

MGWF3"

 Di halaman ini Kamu akan menemukan instruksi bagaimana menyisipkan jenis font untuk blog atau website.

Di bagian paling kanan, Kamu akan melihat Page load indikator yang memberikan informasi mengenai seberapa besar dampak yang akan terjadi pada proses loading blog dengan menggunakan font yang Kamu pilih tadi. Semakin besar angka yang ditampilkan, maka akan semakin besar pula waktu yang dibutuhkan browser untuk me-render halaman blog/web Kamu.
Angka yang ditampilkan pada indikator ini berbeda-beda, tergantung dari jenis serta tingkat ketebalan font yang akan di gunakan. Dalam hal ini Google pun memeringatkan untuk tidak menggunakan jenis font terlalu banyak. pilihlah 1 atau 2 jenis font yang memang benar-benar Kamu Suka.

Lanjutkan dengan melakukan scroll mouse ke bawah dari halaman yang sama hingga Kamu menemukan bagian seperti tampak pada gambar :

MGWF4"

Di bagian ini Kamu diberi tiga pilihan bagaimana menyisipkan jenis font di blog, yakni: Standard, import, dan Javascript.
Kemudian salin kode yang diberikan dan simpan di antara tag <head> dan </head>.
Salin pula property CSS pada bagian Integrate the fonts into your CSS ke selector CSS yang akan menggunakan jenis font tersebut! Perhatikan contoh berikut!

h2{
font-family: 'Signika', sans-serif;}

.blog{
font-family: 'Signika', sans-serif;}

Pesan Galat Saat Menggunakan Google Web Fonts di Blogger
Jika Kamu  ingin menggunakan jenis font dari Google Web Fonts ini di Blogger, Kamu tidak Perlu panik jika Blogger menampilkan pesan galat seperti berikut.


nah.. Untuk menghilangkan pesan galat ini, cukup tambahkan tanda slash (/) tepat sebelum tanpa tag penutup (>).

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

Mengatur Kerenggangan Font dengan CSS Property
Apabila tampilan font yang Anda pilih dari Google Web Fonts terlalu rapat,Kamu bisa menambahkan property CSS letter-spacing dan beri nilai misalnya 0.05em atau 0.1em. Jika terlalu rengang, tambahkan tanda minus (-) di depan nilai yang diberikan.

h2{
      font-family: 'Signika', sans-serif;
      letter-spacing: 0.1em;}

.blog{
      font-family: 'Signika', sans-serif;
      letter-spacing: -0.05em;}
Gampangkan !! selamt merombak huruf blog kamu sehingga enak di pandang, semoga bermanfaat
makasih infonya buat Link Sukses
Agan Agan jangan Lupa Klik +1 dan Like Ok ahahahah pengenya.
Share this article :

18 comments:

  1. Makasih infonya bro,segera ke tkp nieh.Happy blogging aja.

    ReplyDelete
  2. wah ini baru keren dicobain ya :)

    ReplyDelete
  3. Terima kasih telah berbagi pengetahuannya sobat..segera berkunjung ke TeKaPe

    ReplyDelete
  4. Ane kok kagak pernah berhasil ya sob, dah ganti template juga kagak bisa juga, bantu dong,,

    ReplyDelete
  5. @Bayu Rifai : kode linknya copy dan paste di bawah kode head
    dan css h1,h2,h3 di bagian font nya tinggal ganti dengan yg di dapat di google web font yang sesuai dengan script link rel diatas
    yang di ganti dibagian font-family nya ja.. biar tidak pusing ctrl+f untuk cari, kalo belum ada tinggal ditambah ja.

    ReplyDelete
  6. Header ku sudah berhasil ganti font sob,thanks ya.Sukses selalu

    ReplyDelete
  7. Patut dicoba biar blog'ku gak membosankan. terima kasih tips'nya

    Regards,
    Sablon Kaos | Tutorial Sablon | Toko Kaos Online™

    ReplyDelete
  8. tambah informasi yg bagus ni..

    ReplyDelete
  9. wedeww,,kok gag di bales ya comment saya :(

    ReplyDelete
  10. izin coret-coret kotak komentarnya,,
    salam kenal

    ReplyDelete
  11. nice share sobat, biar font kita makin inovatif dan makin kreatif sobat...

    ReplyDelete
  12. Google memang OK !!! Article yang sangat bermanfaat,,,

    ReplyDelete
  13. thanks infonya gan.. pasti dicoba deh :)

    ReplyDelete
  14. Ni pernah q coba gan tapi kaga berhasiL,masih untung fitur baru blogger menyediakan Bermacam2 fonts.

    ReplyDelete
  15. @aat : tapi ini punyaku kenapa berhasil ya,...!! ada salah penempatan x,..

    ReplyDelete

Kutunggu Komentarmu Sampai Tangan Ku melepuh untuk menjawab komentar Agan-Agan eheheh

 
Support : Creating Website | Johny Template
Copyright © 2014. Gress Internet Online - All Rights Reserved
Template Created by Creating Website
powered by Gressnet Hotspot