Menggunakan Google Font API

kali ini kita akan encoba bagai mana menggunakan Google Font API. google telah menyediakan banyak jenis font yang bisa digunakan dalam halaman web kita, jadi kita tidak perlu membuata rule font-face dan mendownload jenis jenis font yang kita inginkan. menyenangkan kan? 😀
ada dua yang harus kita lakukan untuk menggunakan Google Font API:
1. tambahkan link stylesheet dalam file halaman

<code>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
</code>
  1. sertakan style pada element yang ingin di set jenis fontnya
<code>
CSS_selector{
font-family:'font name', serif;
}
</code>

pada tahap satu terdapat parameter family yang akan meload jenis font yang kita gunakan, apa bila jenis font menggunakan spasi misal “arial black” maka harus menggunakan tanda + untuk menggunakannya sehingga menjad family=arial+black jika ungin menggunakan 2 atau lebih font maka gunakan tanda |, misalnya kita ingin menggunakan arial dan arial black, sehingga penulisannya seperti ini family=arial|arial+black. harap diingat semakin banyak font yang kita load maka akan berpengaruh terhadap performa kecepatan halaman web kita.

mari kita buat contoh penggunaan google font API
buat file baru dengan nama gfapi.html, kemudian ketikan kode dibawah ini

<code>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
    <style>
      body {
        font-family: 'Oswald', serif;
        font-size: 28px;
      }
    </style>
  </head>
  <body>
    <div>saya gunakan google font API</div>
  </body>
</html>
</code>

pada contoh diatas kita gunakan jenis font Oswald. jiika sudah diketikan maka save lah file tersebut dan coba buka pada web browser pada komputer kita.
untuk jenis jenis tulisan yang ada pada google font API bisa dilihat di http://www.google.com/fonts

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s