Experimen dengan @font-face

Sekarang tiba masanya untuk eksperiment dengan features CSS3 ni. Kalau dulu pernah try, tapi tak pernah menjadi, tapi tadi aku dapat buat dengan senang sekali.

Untuk yang belum faham dengan @font-face ni, sedikit penerangan untuk korang. @font-face merupakan satu feature dalam CSS3 yang mana kita boleh menggunakan font lain, selain daripada apa yang ada install dalam komputer kita, tanpa perlu install untuk menggunakannya. Faham tak? Maaf kalau tak faham. Contoh lebih mudah difahami rasanya.

Demo

Penggunaan

Syntax untuk @font-face amat mudah.

/**
 * Kita declare font yang kita nak gunakan kat sini
 * beserta dengan link kepada file font tersebut
 */

@font-face {
 font-family: 'ArmWrestlerBold';
 src:     url('fonts/ArmWrestler.ttf') format('truetype');
}

@font-face {
 font-family: 'Kontrapunkt-Light';
 src:     url('fonts/Kontrapunkt-Light.otf') format('truetype');
}

@font-face {
 font-family: 'Kontrapunkt-Bold';
 src:     url('fonts/Kontrapunkt-Bold.otf') format('truetype');
}

@font-face {
 font-family: 'AurulentSans-Regular';
 src:     url('fonts/AurulentSans-Regular.otf') format('truetype');
}

Dan kemudian, untuk menggunakannya pada mana mana selector, kita masukkan font-family macam yang kita declare kat atas ni.

h1 {
 font-family: 'ArmWrestlerBold';
 font-size: 180%;
}

h2 {
 font-family: 'Kontrapunkt-Light';
 font-size: 150%;
 color: #06c;
}

p {
 font-family: 'Kontrapunkt-Bold';
 font-size: 120%;
 color: #333;
}

p.download {
 font-family: 'AurulentSans-Regular';
 font-size: 140%;
 color: #063589;
}

Untuk lihat hasilnya, cuba masuk link kat bawah ni dengan menggunakan Firefox 3.5.x, Opera 10 atau Safari sahaja.

Senang aje kan. Cuma kekurangannya ialah hanya beberapa browser aje yang support @font-face ni, dan janganlah bermimpi sekiranya anda masih menggunakan Internet Explorer

Selamat mencuba!

Download demo files