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.
   
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 :
   
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.

Related Posts:

Tweet