Menggunakan Google Fonts

June 8th, 2010 in css, font, google, how to, web development

Beberapa waktu lalu Google meluncurkan layanan barunya yaitu Font Directory dan Font API. Dengan diluncurkannya layanan tersebut berarti pengguna bisa menggunakan beragam font secara legal tanpa harus menginstall font tersebut di sistem. Ada 18 fonts baik serif, sans-serif, script dan fixed-width yang disediakan (dan akan bertambah) dengan lisensi open source.

Bagi saya pribadi, saya terkadang bosan dengan tampilan web yang fontnya begitu-begitu saja. Kalau ingin bereksperimen menggunakan typeface yang tidak umum, belum tentu di mesin lain font tersebut terinstall. Belum lagi mencari fallback-font yang serupa demi konsistensi tampilan. Jika menggunakan layanan seperti Typekit, sudah pasti saya belum kuat membayar dan belum mau dipusingkan dengan tagihannya .

Setelah baca-baca, ternyata tidak sulit untuk menggunakannya. Ada 3 cara untuk menggunakan Google Font.

Dengan menggunakan tag <link>.
Dengan menggunakan @import.
Dengan menggunakan JavaScript WebFont Loader.

Menggunakan tag <link>

Cara ini sangat mudah, Anda hanya perlu menambahkan baris berikut di dalam tag <head> pada dokumen HTML Anda.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold">

Setelah itu definisikan font-family pada selector yang bersangkutan.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold">
  <style>
    h1 {
      font-family: 'Droid Sans', serif;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <h1>Hello World!!</h1>
</body>
</html>

Menggunakan @import

Cara ini pada dasar mirip dengan penggunaan tag <link> diatas, hanya saja pemanggilan font dilakukan di dalam file CSS. Tambahkan baris berikut pada file CSS Anda.

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);

Setelah itu definisikan font-family pada selector yang bersangkutan seperti biasa. Perlu diingat bahwa penggunaan @import wajib diletakkan pada bagian awal dari file CSS sebelum pendefinisian style untuk selector.

Menggunakan JavaScript WebFont Loader

Untuk yang satu ini agak ribet dan memusingkan. Pada saat menulis post ini saya juga sedang berusaha keras untuk memahaminya. Jika Anda betul-betul tertarik dan penasaran silahkan baca di sini .

Well, that’s it. Untuk baca-baca silahkan menuju ke sini dan ke situ.