Mengenal dan Menggunakan Google Font

..............www.ZAKIZI.BLOGSPOT.COM / PECANGAAN, JEPARA...............

Mengenal dan Menggunakan Google Font

Semakin hari semakin banyak fasilitas yang diberikan Google kepada para pengguna dunia maya, gebrakan demi gebarakan membuat para pesaing bisnis dot com di dunia maya semakin kewalahan dengan langkah-langkah yang di ambil Google. Selain ditunjang dengan teknologi yang terbaik, kemudahan dalam penggunaan yang juga tentunya diberikan secara cuma-cuma alias gratis oleh Google. Diantara sekian banyak hal yang diberikan Google kepada Blogger adalah Google Font. Satu lagi fasilitas gratis yang diberikan kepada para desainer website terutama para Blogger.

Google Font merupakan alternatif atau mungkin bahkan bisa disebut sebagai jalan keluar dalam mengatasi kejenuhan dan keterbatasan penggunaan jenis font (huruf). Huruf-huruf (fonts) yang digunakan oleh para desainer web biasanya menyesuaikan jenis-jenis huruf yang tersedia secara default dan umum pada sebagian banyak komputer didunia. Sederhananya tampilan huruf pada sebuah website akan menyesuaikan dengan ketersediaan jenis huruf pada komputer yang sedang mengakses website tersebut, hal ini menjadikan jenis huruf tertentu secara tidak langsung menjadi standar umum yang digunakan pada setiap desain web.

Diantara sekian banyak jenis huruf yang sering digunakan pada suatu website adalah; Arial, Verdana, Tahoma, Georgia, serif, Courier New, monospace, hal ini menjadi aturan tidak baku bagi para web desainer. Ketidak bakuan ini karena penyesuaian ketersediaan font pada suatu komputer secara umum. Google memberikan jalan keluar untuk mengatasi kejenuhan penggunaan font standar dan "baku" dengan menyediakan fasilitas Google Font. Bagaimana menggunakan Google Font pada website/blog kita?

Google Font Directory

Google Font Directory^[1]merupakan tempat yang disediakan untuk melihat secara lengkap jenis huruf (fonts) yang sudah disediakan dan siap digunakan oleh Google Fonts. Semua font yang tersedia disini tersimpan pada Google Server dan dapat digunakan secara bebas pada website dengan lisensi dibawah Open Source License. Untuk melihat secara detail dari suatu font silahkan arahkan mouse pada salah satu jenis font dan klik, maka kita akan diarahkan pada halaman detail dari jenis font yang kita pilih.

Google Font API

Google Font API^[2] dapat digunakan pada website tanpa perlu menggunakan berbagai bahasa pemograman. Untuk menambahkannya cukup menggunakan stylesheet link yang menunjukan suatu font yang akan digunakan serta kita tidak perlu menginstall font yang akan kita gunakan pada komputer kita, karena font akan diload dan ditampilkan dari server font Google dengan teknik API, jadi walaupun suatu jenis font yang kita pilih tidak kita pasang pada komputer, font akan tetap ditampilkan pada browser dengan sempurna.

Untuk mengintegrasikan Google Font, ikuti langkah dibawah ini:
Langkah 1
Pilihlah jenis font yang akan kita gunakan disini dan login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Langkah 5
Carilah CSS Selector yang mengandung elemen pemanggilan font, seperti contoh dibawah ini:

body {
font-family: 'Font Name', sans-serif;
font-size: 12px
}

atau :

<div style="font-family: 'Font Name', serif;">Text Anda</div>

Langkah 6
Klik tombol "SIMPAN"

Keterangan :

Ubahlah dan samakan antara Font+Name pada langkah 4 dan 'Font Name' pada langkah 5 sesuai dengan nama font yang akan kita gunakan.

Sebagai contoh kita akan menggunakan jenis font Tangerine, maka :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"/>
body {
font-family: 'Tangerine', sans-serif;
font-size: 12px
}

Jika kita ingin menggunakan jenis font lebih dari satu, maka link (lihat langkah 4) yang kita tuliskan menjadi seperti dibawah ini:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

Gunakan tanda/karakter (|) tanpa tanda kurung untuk memisahkan jenis font yang digunakan.

Gunakan tanda/karakter (+) tanpa tanda kurung untuk menggunakan font yang terdiri dari dua kata, jangan menggunakan spasi.

WebFont Loader

WebFont Loader^[3] adalah alternatif lain integrasi Google Font API selain menggunakan stylesheet link. Keuntungan menggunakan WebFont Loader adalah kemudahan mengontrol berbagai jenis font yang akan digunakan karena menggunakan Ajax API serta kecepatan load jenis font yang relatif lebih cepat dari pada menggunakan stylesheet link.
Untuk mengintegrasikan Google Font dengan WebFont Loader, ikuti langkah dibawah ini:
Langkah 1
Pilihlah jenis font yang akan kita gunakan disini dan login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>

Atau jika desain web anda sudah menggunakan Google AJAX API^[4] maka bisa menggunakan teknik alternatif seperti dibawah ini:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>

Langkah 5
Carilah CSS Selector yang mengandung elemen pemanggilan font, seperti contoh dibawah ini:

body {
font-family: 'Tangerine', sans-serif;
font-size: 12px
}

atau :

<div style="font-family: 'Cantarell', serif;">Text Anda</div>

Langkah 6
Klik tombol "SIMPAN"

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Selengkapnya: Mengenal dan Menggunakan Google Font | Blogger Tune-Up http://modification-blog.blogspot.com/2010/08/mengenal-dan-menggunakan-google-font.html#ixzz1AogpEk5t
Under Creative Commons License: Attribution