agungprasetyo blog's

It's about technology and life experience

Memasang/Menggunakan Font Kesukaan Anda di Web/Blog Dengan Mudah

Tentunya anda pernah mengalami masalah dimana font kesukaan/favorit anda tidak bisa ditampilkan dibrowser komputer lain karena pada komputer tersebut tidak mempunyai font yang sama dengan komputer anda.

Sekarang anda tidak perlu bingung lagi, karena hal ini sekarang bisa diatasi dengan menggunakan cufon-yui. Ngomong-ngomong, apa sih cufon-yui ini??? Cufon-yui adalah suatu script (javascript) yang bisa mengganti teks/font secara cepat dengan menggunakan fungsi canvas dan VML dari browser kita, tanpa perlu flash atau gambar. Caranya sangat gampang dan cepat, karena dari website cufon sudah disediakan generator yang siap untuk merender font anda. Sebagai contoh, ini saya berikan perbedaan menggunakan cufon-yui dan tidak.

Dari contoh diatas, bisa dilihat bahwa dengan menggunakan cufon-yui, kita bisa menampilkan font yang biasanya harus kita convert dulu ke bentuk gambar atau dalam bentuk flash.

Sebagai langkah awal, buatlah folder testing-cufon pada drive C: anda dan buatlah folder js sebagai sub-direktorinya. Ok, tidak panjang lebar, kita langsung praktek aja 🙂

Langkah 1 : Convert Font

Agar proses berjalan dengan sempurna, kita harus menggunakan converter yang disediakan oleh website Cufón. Pertama-tama, pilih font favorit/kesukaan anda dari folder C:\Windows\Fonts dan tempatkan di drive C:. Untuk bisa mengcopy font, anda langsung menekan Crtl+C pada font yang dipilih. Sebagai contoh, saya menggunakan font Jokerman.

Sebagai langkah awal, kita gunakan settingan default saja. Anda hanya perlu melakukan centang pada The EULAs of these fonts allow Web Embedding (without Adobe Flash) dan I acknowledge and accept these terms, setelah itu klik Let’s do this!. Setelah itu, simpan file anda pada folder js yang sebelumnya sudah anda buat yang berada pada folder testing-cufon.

Langkah 2 : Download Cufón

Dari halaman depan Cufón, klik kanan pada menu Download, lalu pilih Save As dan letakkan pada folder js.

Langkah 3 : Menyiapkan Dokumen HTML

Langkah terakhir, kita buat file html. Buka editor favorit anda, masukkan kode html standar, dan sebelum tag<head> masukkan kode berikut :

Penjelasan :

Baris 1 & 2 : adalah file yang dibutuhkan agar cufon bisa berfungsi dan merender font kita.

Baris 3 : adalah skrip yang mengaktifkan cufon agar mengganti semua h1 dengan font Jokerman.

Langkah 4 : Preventif Terhadap Browser IE

Untuk browser Internet Explorer, anda harus menambahkan script berikut agar proses render berjalan lancar.

Selesai : Download artikel

Jika anda masih bingung, silahkan download file berikut : source code

Previous

Bagaimana Mengukur Jarak melalui Alat Pengukuran Jarak Jauh (Distance Measurement Tool) di Google Maps

Next

Membuat Template Pada Postingan Kita

6 Comments

  1. CUFON emang mantap

  2. Salam kenal mas!!!!! bagus infonnya. .

  3. Apakah bisa digunakan untuk wordpress mas

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by Lovecraft & Theme by Anders Norén

Policy Privacy | Disclaimer