Salah satu faktor yang mempengaruhi tampilan sebuah website adala jenis font yang dipakai. Dalam bahasa teknis adalah typography. Dulu, web hanya menggunakan font arial,san serif, verdana dan beberapa font lain. Tipe font ini sering disebut sebagai Web safe font. Pilihan yang sangat sedikit membuat tampilan website terlihat kaku dan monoton, oleh karenanya sekarang telah dikembangkan font dengan konsep Webfont. Webfont adalah font yang didesain untuk tampil di web walaupun komputer pengguna tidak mimiliki font tersebut.

Webfont merupakan bagian dari CSS3. Dengan CSS webfont ini kita bisa menggunakan ratusan jenis font yang berbeda untuk membuat sebuah website yang cantik. Salah satu layanan penyedia font ini adalah typekit.com. Sayangnya, untuk memakai font di typekit kita harus langganan berbayar, tentunya bagi kita develepor atau mahasiswa yang sedang belajar jelas sangat memberatkan. Untungnya ada Google Webfont, Layanan ini adalah layanan Google untuk memberikan ratusan jenis font yang bisa dipakai secara gratis. Syarat utamanya tentunya harus ada koneksi internet, tapi seharusnya itu bukan masalah, bukankah memang web itu harus diletakan di internet bukan?

Dalam panduan ini saya akan memberikan contoh pemakain Google webfont dengan cara statis dan cara dinamis. Cara statis dipakai langsung dalam CSS, sedangkan cara dynamis kita membolehkan pengunjung untuk memilih font, kemudian font terpilih di simpan di session, lalu font yang tersimpan di session ini dipakai untuk menampilkan gaya tulisan. Cara kedua ini cocok untuk membuat customasi tampilan peruser seperti Startup atau web2.0.

Cara manual

Untuk cara ini berikut adalah langkah langkahnya

  1. Buka http://www.google.com/webfonts
  2. Pilih font yang ingin anda pakai dan klik tombol add to collections
  3. klik tombol use, anda akan diberi petunjuk cara penggunaannya

Cara ringkasnya adalah sebagai berikut:
1. Buat dokument HTML seperti biasa
2. Tambahkan baris

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

tambahkan CSS ke header Halaman

body{
font-family: 'Iceland', cursive;
}

Perhatikan ada kata cursive setelah font yang akan kita pakai, cursive adalah font default yang akan dipakai jika font ‘iceland’ gagal di ambil dari server Google.

Jika anda ingin memakai lebih dari dua font, caranya sedikit berbeda, perhatikan contoh berikut ini. Dalam contoh ini saya akan memakai font iceland untuk paragraf dan font kavoon untuk judul

1. Buat dokumen seperti biasa, lalu tambahkan baris berikut ini dibagian header HTML.

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

2. buat CSSnya seperti biasa

h1{
font-family: 'Kavoon', cursive;
}
p{
font-family: 'Iceland', cursive;
}

setelah itu silahkan buka halaman yang anda buat di browser.

Mengganti font web secara dynamis

Anggaplah kita ingin membuat website dimana user bisa menganti jenis font tergantung yang mereka suka, dalam contoh ini kita akan memakai 3 jenis font, kita menyediakan 3 tombol untuk masing masing font sehingga user bisa memilih dengan mudah. font yang akan kita pakai adalah iceland, engament dan fondamento. Dalamc contoh ini kita menggunakan PHP untuk mengganti font sesuai keinginan user dan Twitter bootstrap untuk layoutnya. Jangan lupa ektensi file harus (.php) dan letakan di webserver XAMPP,Wampp atau webhosting.

1. Tambahkan link font di header

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

3. Buat tiga tombol link untuk masing masing jenis font.

<h3>Change Font</h3>
	<a href="index.php?font=Iceland" class="btn btn-primary ">Iceland</a>
	<a href="index.php?font=Engagement" class="btn btn-success ">Engagement</a>
	<a href="index.php?font=Fondamento" class="btn btn-danger ">Fondamento</a>

3. Buat fungsi PHP untuk mengubah font

function set_font($font) {
     if(!empty($font)) {
	echo " font-family: '$font', arial;";
	} else {
	echo " font-family: 'Iceland', arial;";
	}
}

Inti dari kode diatas adalah gunakan font yang terpilih, jika tidak ada yang dipilih gunakan font default ICeland, jika iceland juga tidak ada gunakan font arial.

4. panggil fungsi didalam code CSS seperti ini

<?php
if(isset($_GET[font])){
	$_SESSION['font']=$_GET['font'];
}		
set_font($_SESSION['font']);
				
?>

Tampilan dari halaman

Demo webfont

Demo webfont

Source code & Demo

Silahkan lihat DEMOnya DISINI. Silahkan download source codenya sendiri disini

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:     

2 thoughts on “Tutorial Typography Web dengan CSS Font

  • 5 February , 2013 at 1:27 am
    Permalink

    saluuut terima kasih amal ilmu nya mas sudah berbagi

    Reply
  • 4 February , 2013 at 11:23 pm
    Permalink

    keren mas.terimaskih ats ilmunya,moga berkah.amin

    Reply

Tinggalin komentar dong!