Sep 29, 2011

Apa huruf favorit anda yang sering anda gunakan di web? Georgia? Verdana? atau mungkin Arial dan Times New Roman. Huruf-huruf tersebut merupakan beberapa dari cukup banyak huruf yang tersedia dikomputer kita dan padanannya ada disetiap komputer baik kita menggunakan Windows, Linux, ataupun MacOS.

Google Web Fonts merupakan repositori huruf gratis yang dapat anda gunakan untuk membuat tipografi di web anda lebih menarik. Anda bisa mengunduh huruf tersebut atau bisa langsung menggunakannya dengan mengambil font yang anda pilih sebagai CSS dan juga menambahkannya sebagai font pertama di font-family dibagian yang ingin anda gunakan.

Setelah anda membuka halaman depan Google Web Fonts, anda bisa mengklik tombol Start choosing fonts. Terdapat ratusan huruf yang bisa anda pilih, disebelah kiri terdapat sidebar dimana anda bisa menyaring jenis huruf apa yang anda inginkan apakah Serif, Sans-Serif, Display, atau Handwriting. Anda juga bisa memilih Ketebalan, kemiringan dan lebar huruf.

Setelah anda mendapatkan huruf yang anda inginkan, anda bisa menambahkan huruf tersebut kedalam koleksi anda atau anda bisa memilih Quick-use untuk melihat cara menggunakan huruf tersebut. Sebagai contoh, saya akan menggunakan huruf Julee. Untuk menggunakan huruf ini, dibagian header anda harus meload huruf ini terlebih dahulu, terdapat tiga metode yang bisa anda tambahkan di header, yaitu :

Me-load sebagai CSS

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

Menggunakan @import, bisa digunakan didalam file css

@import url(http://fonts.googleapis.com/css?family=Julee);

Meload Sebagai Javascript

<script type="text/javascript">// <![CDATA[
  WebFontConfig = {
    google: { families: [ 'Julee:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
// ]]></script>

Setelah anda me-load huruf yang anda butuhkan, anda bisa menambahkannya css, sebagai contoh, apabila anda ingin menggunakannya di paragraf, anda bisa menambahkan kode :

p { font-family: 'Julee', Cursive; font-size:10pt}

Berikut kode lengkap halama HTML yang menggunakan webfonts, setelah anda mengetikkan kode dibawah ini, anda bisa menggunakan notepad untuk mengetikkan kode dibawah ini, simpan dengan ekstensi .html

Test Google Web Fonts, keren ya!

Buka file tersebut dengan browser yang anda gunakan, anda akan mendapatkan hasil kurang lebih seperti gambar dibawah ini. Ingat karena halaman html ini menggunakan huruf dari google, maka anda membutuhkan koneksi internet untuk dapat me load halaman ini dengan baik.