Image and video hosting by TinyPic


Kamis, 06 Oktober 2011

Gunakan Font Keren di Halaman Web / Blog dengan Google WebFont

Sebuah halaman web untuk publik di situs online adalah dokumen yang bisa diakses oleh siapa saja yang terhubung ke internet, yang sebisa mungkin bisa dilihat dengan tampilan seragam untuk berbagai sistem komputer/parangkat lain yang digunakan oleh para pengunjung situs, termasuk tampilan font yang sama untuk setiap perangkat tersebut.
Dalam kaitan itu, salah satu kendala bagi seorang web designer atau juga pemilik blog/situs adalah terbatasnya jenis font yang bisa digunakan, karena tidak semua jenis font terinstall pada perangkat yang digunakan oleh pengunjung. Sehingga tak heran kalau tampilan font yang bisa dilihat di berbagai situs online relatif seragam dan hanya itu-itu saja. Kalau pun sebuah situs ingin menampilkan jenis font khusus, biasanya menggunakan file image, tapi tentunya hal tersebut bisa membuat loading halaman web jadi lebih berat.
Membaca situasi tersebut, Google si raja search engine baru saja meluncurkan Google WebFont, sebuah layanan menggunakan Google Font API agar para perancang web bisa lebih kreatif menampilkan beberapa jenis font khusus, sehingga tampilan font pada sebuah halaman web bisa terlihat lebih cantik, keren dan variatif.
Font-font di Google ini bisa ditampilkan di situs manapun dengan cara memasang kode tertentu pada halaman web. Berikut ini adalah sedikit tips dan petunjuk aka panduan cara pemasangannya di halaman web dan juga pada template/theme blog.

Daftar Nama Font di Google WebFont

google-web-font-sc.png
Daftar nama font yang saat ini tersedia di Google WebFont semuanya ada 18 buah font. Contoh karakternya bisa dilihat di samping ini.
  • Cantarell
  • Cardo
  • Crimson Text
  • Droid Sans
  • Droid Sans Mono
  • Droid Serif
  • IM Fell
  • Inconsolata
  • Josefin Sans Std Light
  • Lobster
  • Molengo
  • Nobile
  • OFL Sorts Mill Goudy TT
  • Old Standard TT
  • Reenie Beanie
  • Tangerine
  • Vollkorn
  • Yanone Kaffeesatz
Saat menggunakannya, kode-kode nama itu harus tertulis persis seperti di atas, lengkap dengan spasi (bila ada) dan huruf kapitalnya (case sensitive).

Cara Menggunakan Google WebFont pada Halaman Web

Untuk menggunakan Google WebFont, kita perlu melakukan dua tahapan berikut ini (ganti tulisan Nama Font dengan nama font seperti yang tersedia di atas):

1. Loading font dengan kode stylesheet di antara tag <head> dan </head>:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nama+Font">
Khusus untuk loading font ini, bila ada nama font yang menggunakan spasi, ganti spasi tersebut dengan karakter plus (+).
Kita bisa melakukan loading beberapa font sekaligus, yaitu dengan menyisipkan karakter batang (|) di antara nama font, sehingga syntax nama fontnya menjadi: Nama+Font+1|Nama+Font+2|Nama+Font+3. Tapi jangan kebanyakan, nanti loadingnya jadi berat.

2. Tentukan style pada elemen tertentu, yaitu dengan dua cara (silahkan pilih):

a. Pasang kode stylesheet (di antara tag <style> dan </style>):
CSS selector {
  font-family: 'Nama Font', serif;
}
Ganti tulisan CSS selector dengan elemen yang akan menggunakan Google WebFont, misalnya tag h1, h2 dan tag lainnya, atau id dan class untuk elemen tertentu.
b Pasang kode style secara inline pada tag tertentu:
<div style="font-family: 'Nama Font', serif;">Bla bla bla bla bla</div>

Catatan

Coba perhatikan kode style css di atas, setelah teks kode Nama Font selalu diikuti dengan kode serif, itu maksudnya adalah menambahkan kode font generik (standar) sebagai alternatif bila font khusus Google WebFont gagal diload. Walau pun kemungkinan gagalnya kecil (mengingat kinerja server Google yang sangat bisa diandalakan) tapi tetap perlu diantisipasi untuk berjaga-jaga.
Kode font generik atau standar maksudnya di sini adalah font-font yang sudah pasti ada di setiap sistem komputer, yaitu serif, sans-serif, dan monospace, atau bisa juga menggunakan font-font yang sudah umum digunakan seperti Arial, Verdana, dan lain sebagainya.
*

Contoh Kode Halaman Web dengan Google WebFont

Pada contoh ini font yang digunakan adalah Tangerine, Reenie Beanie, dan Droid Sans.
<html>

  <head>

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

    <style>
      h1 {
        font-family: 'Tangerine', serif;
        font-size: 32px;
 text-shadow: 3px 3px 6px #aaa;
      }
      .rb {
        font-family: 'Reenie Beanie', serif;
        font-size: 20px;
      }
    </style>

  </head>

  <body>

    <h1>Tag H1 Diberi Style Font "Tangerine"</h1>

    <p class="rb">Paragraf ini menggunakan class dengan font "Reenie Beanie"</p>

    <div style="font-family:'Droid Sans',sans-serif; font-size:13px; color:#666;">
 <p>Tag div ini diberi style font "Droid Sans"</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <p>Kalau ini font biasa aja.</p>
    <p>Lorem ipsum dolor sit amet, datanglah kemari. Wkkkkkk......... :) </p>

  </body>

</html>
*
Diposting oleh beeje coffee di 06.03

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)