Skip to content


Menggunakan Custom Font dengan typeface.js

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

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:

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>

<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>

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?

Related posts

Posted in Javascript.

Tagged with , , , .


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. ndop says

    wow, sampeyan nggak nulis yang sIFR??

    saya makek yang itu deh… hehehe…

    tapi untuk sekarang, saya pakek plugin wp ttftitle.. bkerja sih, tapi aku nggak bisa mengubah huruf di judul wijednya.



Some HTML is OK

or, reply to this post via trackback.