TUTORIAL TYPOGRAPHY WEB DENGAN CSS FONT

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
?
source code
<link href='http://fonts.googleapis.com/css?family=Iceland'
rel='stylesheet' type='text/css'>
tambahkan CSS ke header Halaman
?
source code
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.
?
source code
<link href='http://fonts.googleapis.com/css?family=Iceland|Kavoon'
rel='stylesheet' type='text/css'>
2. buat CSSnya seperti biasa
source code
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
?
source code
<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.
?
source code
<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
?
source code
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
?
source code
<?php
if(isset($_GET[font])){
  $_SESSION['font']=$_GET['font'];
}   
set_font($_SESSION['font']);
         
?>

TAMPILAN DARI HALAMAN


Comments

Post a Comment

Popular posts from this blog

MENGENAL KOMIK

Image
Kata komik berasal dari kata  comic  (bahasa Inggris) yang artinya segala sesuatu yang lucu dan menghibur atau bisa juga kita katakan dalam bahasa kita sebagai lawakan. Ensiklopedia Indonesia menjelaskan bahwa kata komik berasal dari bahasa yunani dengan kata  komikos  yang berarti sesuatu yang lucu atau menggelikan hati, sedangkan dalam kata benda berarti pelawak. Pada awalnya komik ini dimaksudkan sebagai serangkaian gambar yang berurutan dan memiliki keterkaitan antar gambar satu dengan yang lain yang bisanya ditambah dengan tulisan untuk mempertegas maksud dari gambar tersebut.  Berikut pendapat beberapa ahli mengenai komik : 1. Will Eisner, salah seorang komikus senior di Amerika mengatakan bahwa komik merupakan tatanan gambar dan kumpalan kata yang berurutan 2. Scott McCloud, seorang komikus terkenal dan penulis buku tentang dunia komik beranggapan bahwa komik adalah gambar yang menyampaikan informasi dan menghasilkan respon estitik bagi orang yang melihat...
Keep reading

PENGERTIAN DAN FUNGSI COREL DRAW

Image
Corel Draw adalah sebuah program komputer yang melakukan editing pada garis vektor. Program ini dibuat oleh Corel, sebuah perusahaan software yang berkantor pusat di Ottawa, Kanada. Corel draw memiliki kegunaan untuk mengolah gambar, oleh karena itu banyak digunakan pada pekerjaan dalam bidang publikasi atau percetakan ataupun pekerjaan di bidang lain yang membutuhkan proses visualisasi. Keunggulan program Corel Draw Suatu program yang baik tentu saja memiliki keunggulan yang signifikan. Beberapa keunggulan program Corel Draw antara lain adalah: Gambar yang dihasilkan dengan vektor atau berbasis vektor bisa ditekan pada tingkat yang paling rendah namun hasilnya tidak kalah dengan gambar yang berbasis bitmap atau raster. Penggunaan Corel Draw, terutama pada tool-tool yang ada di dalamnya sangat mudah dipahami oleh penggunanya, bahkan oleh orang yang baru pertama menggunakannya. Corel Draw sangag baik untuk mengkolaborasikan antara tulisan dengan gambar, seperti layak...
Keep reading

Mengenal Karakter MEME (Dibaca mim)

Image
Meme (Mim) Menurut gue "Suatu   gagasan ,  perasaan , ataupun  perilaku  (tindakan) yang di ekspresikan lewat gambar" Meme juga ada karakter nyo loh... berikut karakteknya (Sumber Knowyourmeme.com) 1. Troll Face Fungsi Ekspresi tersebut sering digunakan untuk post-post dalam rage comics  Mengekspresikan bahwa seorang karakter dalam komik sedang menjahili tokoh komik lain. Menjahili seorang user (pembaca rage comics/meme) Sejarah Troll Face adalah meme yang berupa wajah yang mengekspresikan kejahilan. Penemu dari meme ini adalah Whynne (seorang user DeviantART). Yang sebenarnya, dalam post-nya, Whynne ingin menggambarkan karakter yang bernama 'Rape Rodent'. Kini, Gambar diatas pertamakalinya dibuat di MS Paint oleh user bernama Whyne di 4chan yang diupload pada 19 September 2008. Whyne menggunakan gambar ini untuk membuat komiknya yang bernama "Rape Rodent" Karena tidak semua 'troll' (kejahilan) selalu berhasil, maka diciptakan pu...
Keep reading