Penggunaan @font-face Dengan Google Web Font

Cara Untuk mengganti dan menggunakan font blog tidaklah sulit karena banyak web yang memberikan font-font menarik yang bisa kita gunakan sesuka hati. nah kali saya akan memberikan tutorial cara mengganti font dengan Google Web Fonts. karena banyak pertanyaan seperti berikut.
  1. Bagaimana cara mengganti font dengan google web fonts ?.
  2. Bagaimana Mengambil hanya @font-face dari Google Web Fonts ?.
  3. Apa bedanya menggunakan script,url style,dan @font-face ?.
berikut tutorialnya.
1. Masuk dulu di Google Web Fonts.
2 Setelah masuk pilih font yang di inginkan.
sebagai contoh kita akan pilih font Arbutus. seperti gambar berikut, klik add to collection. anda juga bisa memilihi banyak font yang di inginkan.
add google web font
3. jika sudah pilih font. kemudian pada bagian menu di bawah terdapat 3 pilihan choose,review dan use. langsung klik saja use. seperti pada gambar berikut :
use google web font
4. Setelah itu kita akan di hadapkan dengan berbagai pilihan style font seperti normal,bold,italic,bold italic dan lainnya tergantung dukungan font tersebut.
5. Di bawahnya ada pilihan kode untuk memasukan pada template.
  • Standar : biasanya pilihan ini berupa url link css.
  • @import : pilihan ini jarang di gunakan untuk template blogger.
  • javascript : pilihan font dalam bentuk javascript.
6. Nah pilihan terakhir adalah mengambil @font-face meskipun disana tidak di sediakan pilihan tersebut. tapi kita bisa mengambilnya dengan melihat isi URL link font. contoh pilihan standar :
<link href='http://fonts.googleapis.com/css?family=Arbutus' rel='stylesheet' type='text/css'>
ambil link url saja seperti ini http://fonts.googleapis.com/css?family=Arbutus, lalu buka link tersebut pada adress bar browser anda maka akan terbuka @font-face seperti ini.
@font-face {
  font-family: 'Arbutus';
  font-style: normal;
  font-weight: 400;
  src: local('Arbutus'), url(http://themes.googleusercontent.com/static/fonts/arbutus/v2/ZIN1_iT2tfyR9znPvk0NwA.woff) format('woff');
}
7. Terakhir kita bisa menyimpan @font-face pada blog dan menyimpanya pada bagian skin css template atau di atas ]]></skin>
mudah bukan cara pasang @font-face Google Web Fonts di blog, semoga artikel ini bermanfaat buat anda yang masih belajar membuat blog terutama pengguna blogger. terima kasih atas perhatiannya.

license by under 88 blogspot.com
Post By : denzdii

6 comments:

  1. udah sy lakuin itu dr dulu, tp tetep aja gak ngaruh kalo di browser nightly T_T

    ReplyDelete
  2. Thank you so much for your great contribution.I like the way of writing.I will share this article to my personal blogs.Waiting for new stuff.custom essay writing services

    ReplyDelete
  3. Thanks for the share. You can share any tips or article with dissertation writing services

    ReplyDelete
  4. Nice info. Thanks for sharing.
    Maju terus gan.

    ReplyDelete
  5. I am happy to read that you helped a injured horse,that is very kind.I like animals and always essay writer try to keep them safe and give them food.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top