Mempercantik Website dengan @font-face

Posted by Tembra Variantoro Monday, August 30, 2010
Di CSS, ada suatu atribut yang dinamakan font-family. Atribut ini berfungsi untuk menentukan jenis huruf mana yang harus ditampilkan oleh browser. Seringkali kita harus menentukan beberapa value untuk font-family ini (misalnya, font-family:arial, verdana). Mengapa? Karena font-family ini hanya akan mencari jenis huruf yang tersedia di komputer pengakses web!

Sebut saja, untuk contoh font-family:arial, verdana, roman, helvetica; misal di suatu komputer tidak terinstall jenis huruf arial dan terinstall jenis huruf Verdana, maka browser akan menampilkan huruf pada webpage dengan jenis huruf Verdana. Dan begitu seterusnya.

Value pada font-family sebenarnya cukup banyak. Diantaranya:
Times New Roman, Roman, Arial, Garamond, Palatino, Antiqua, Minion, Helvetica, Swiss, Impact, Script, Decorative, Blackletter, Fraktur, Comic Sans, Modern, Courier, Calibri, Verdana, Frosty, Georgia, Avqest, Monospace.

Namun, terdapat keterbatasan yang paling mendasar, jika komputer yang mengakses website tidak memiliki jenis huruf tersebut, maka jangan harap komputer tersebut menampikan website kita dengan jenis huruf yang kita inginkan.

Selain itu, jenis hurufnya juga sangat terbatas! Coba saja tengok Microsoft Word. Ada begitu banyak jenis huruf bukan? Rasanya website kita jadi agak membosankan dengan jenis huruf yang itu-itu saja.

Oleh karena itu, CSS3 mengizinkan kita untuk menggunakan berbagai jenis huruf dengan mendeklarasikan @font-face pada CSS.

Cara mendeklarasikannya cukup mudah.
Letakkan attribut @font-face itu didalam CSS dengan value-value sebagai berikut...

@font-face{
font-family: varisphere_font;
src: url('..../varisphere_font.ttf'); }
Penjelasan:
src: url('.......') => ('.......') merupakan tempat disimpannya file font. Sangat direkomendasikan untuk menghost file tersebut di hostingan sendiri. Untuk pengguna blogspot/wordpress gratisan, silakan scrolling ke bawah...
*.ttf, kepanjangan dari True Type Font, merupakan extension file dari suatu huruf. Contoh simpelnya, untuk pengguna Windows, cobalah untuk membuka Control Panel > Fonts. Disana kamu akan menemukan banyak file *.ttf yang telah terinstall di komputer kamu. Ada banyak huruf-huruf gratis yang tersedia di internet, seperti yang tersedia pada situs ini. Silakan download ^^.
Perhatikan baik-baik value pada font-family diatas, nantinya itu akan menjadi "value font-family baru' yang dikenal oleh browser.
Ini tidak berlaku untuk browser Internet Explorer (tapi, who care dengan IE? :p), karena Internet Explorer tidak mengenal format .TTF. IE mengenal format EOT. Nah, untuk kustomisasi dengan IE, silakan baca-baca link ini.


Cara menggunakannya?
Seperti deklarasi CSS font-family pada umumnya!
Misalnya, kamu ingin membuat suatu paragraf menjadi berjenis huruf varisphere_font (seperti yang sudah dideklarasikan diatas), maka kamu cukup menambah value varisphere_font pada CSS untuk tag p kamu.
Misal, pada CSS:
p{
font-family: varisphere_font, arial, verdana;  /* ingat, tanpa .ttf, cukup namanya saja */
}


Ada cara yang lebih mudah,
terutama untuk pengguna blog blogspot dan wordpress gratisan!

Sudah ada beberapa web yang menghost huruf secara gratisan, dan kita tinggal menggunakannya saja!
Ceklah link ini:
http://kernest.com/
http://code.google.com/webfonts/

Penjelasan pada website tersebut sudah cukup OK, namun tak mengapalah saya jabarkan lagi disini..


Oiya, sebagai demonstrasi, mulai paragraf ini, saya menggunakan huruf baru. ^^

Disini saya akan mencontohkan penggunaan huruf yang diambil dari http://code.google.com/webfonts/
Cara untuk http://kernest.com/ kurang lebih sama.

Hal pertama yang harus dilakukan adalah click to embed "......." kemudian get the code.
Misalnya, kode berupa:
<link href = 'http://fonts.googleapis.com/css?family=Reenie+Beanie' rel = 'stylesheet' type = 'text/css'>

Ada bugs pada kode pada code google ini, yaitu tidak tidak ditempatkannya closing tag. Untuk itu harap lengkapi dengan tanda / sebelum akhir tanda kurung tutup(>) agar tidak terjadi error pada XHTML; menjadi seperti ini:

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

Cara menggunakannya,  mirip seperti cara diatas! Dengan mendeklarasikan value pada font-family seperti biasa!

Hope you enjoy it :)

0 comments:

Post a Comment

Daripada menggunakan "Anonymous" untuk memberi comment, sebaiknya gunakan "Name/URL". URL bisa dikosongkan jika memang dikehendaki.. :)

Terima kasih :)