Menggunakan Custom Font dengan typeface.js

Deny Sri Supriyono — Wed, 29 Oct 2008 09:09:11 +0000

Pernah menggunakan sIFR atau FLIR sebelumnya? Mungkin banyak yang sudah pernah menggunakan satu diantaranya.

sIFR dan FLIR digunakan untuk membuat tampilan text menjadi lebih menarik, karena dengannya kita bisa menampilkan text dengan font apapun yang kita inginkan.

Yang membedakan antara keduanya adalah sIFR menggunakan media flash untuk me-replace text yang kita inginkan dan menampilkannya dengan font pilihan sedangkan FLIR dengan membuat image dari text yang diinginkan.

Satu lagi solusi yang bisa digunakan sebagai alternatif dari 2 opsi di atas adalah dengan menggunakan typeface.js.

typeface.js

Cara menggunakan typeface.js adalah dengan menyisipkan typeface.js library dan satu atau beberapa typeface.js font lalu gunakan CSS untuk mengatur jenis font-nya, seperti contoh di bawah ini:




	Text here in Helvetiker font...

Contoh penggunaannya bisa dilihat di halaman demo.

Untuk jenis font, kita bisa menggunakan 3 jenis font yang saat ini tersedia di webnya atau dengan menggunakan font koleksi kita yang harus diubah terlebih dahulu ke dalam format typeface.js.

typeface.js ini diklaim berjalan dengan baik di Firefox 1.5+, Safari 2+, dan Internet Explorer 6+.

Harap diperhatikan pada saat men-download font yang tersedia di websitenya, semakin banyak memilih opsi (mathematical operators, greek, latin extended dan lainnya) maka akan semakin besar pula ukuran file .js. Ukuran file .js yang besar bisa mengakibatkan waktu loading website kita bertambah lama.

Penggunaan yang berlebihan/terlalu banyak juga bisa membuat halaman menjadi lambat dibuka.

Sayangnya, sama seperti FLIR — text yang direplace dengan typeface.js tidak bisa di-select (untuk keperluan copy paste).

Saya sendiri lebih terbiasa dengan sIFR. Menggunakan sIFR juga membuat text yang direplace tetap bisa di-select.

Ada yang mau menambahkan?

display:inline » FLIR

Menggunakan Custom Font dengan typeface.js

Related posts