Font Embedded pada Browser User

Share/Bookmark

Nah, kali ini saya akan menuliskan bagaimana cara mengganti jenis fonts untuk ditampilkan dalam suatu web. Untuk mengganti jenis fonts tersebut cukup mudah yakni menuliskan script di bawah ini.
<font face="Times New Roman, Times, serif">Coba Font Default</font>
Hasilnya: Coba Font Default

Mungkin ada yang bertanya, kenapa terdapat 3 jenis fonts dalam script di atas bingung. Sedikit saya akan jelaskan sesuai pengethuan saya. 3 Jenis fonts tersebut ditulis dengan maksud memberikan pilihan suatu browser untuk menampilkan jenis tulisan tersebut. Script diatas secara default akan menampilkan secara berurutan jenis fonts yang akan tampil. Awalnya browser tersebut menggunakan fonts Times New Roman. Jika browser tersebut tidak mendukung fonts itu, maka browser akan menggunakan fonts Times jika juga tidak mendukung, maka browser tersebut akan mengunakan jenis fonts Serif.

Secara default ketiga fonts tersebut akan muncul sesuai dengan urutannya karena dalam kebanyakan sistem operasi sudah tertanam jenis fonts tersebut. Nah pertanyaanya, bagaimana cara kita menggunakan fonts tertentu yang belum tertanam pada sistem operasi yang digunakan oleh pengunjung suatu web? Mari kita pelajari nyengir.

Ok, misalnya saja kita ingin mengganti jenis fonts kita ke "Betsy Flanagan" pada web, apakah pada komputer user, fonts tersebut akan nampak? Belum tentu, jika pada sistem operasi user tidak ada fonts "Betsy Flanagan" maka tidak akan terlihat fonts itu. Nah, dengan demikian mari kita membuat agar fonts tersebut tetap terlihat meskipun pada sistem operasi user tidak memiliki fonts jenis itu, dengan kata lain, kita tanam fonts tersebut agar bisa diakses dimanapun.

Langkah 1, kita siapakan fonts yang ingin digunakan. Jika nantinya halaman web dibuka menggunakan browser IE, kita harus meng-converter fonts manjadi berextensi *.eot karena embedded fonts di IE harus fonts berextensi .eot, kita bisa meng-converter secara online di situs ini : http://www.kirsle.net/wizards/ttf2eot.cgi setelah itu perlu diingat fonts harus juga ikut kita upload di dalam webhosting.

Lagkah 2, tuliskan script css di bawah ini kedalam code HTML anda diantara <title></title>.
<style type="text/css">
@font-face {
font-family: xinthinx;
src: url("BETSY.eot") /* EOT file for IE */
}
@font-face {
font-family: xinthinx;
src: url("BETSY.TTF") /* TTF file for CSS3 browsers */
}

body {
font-family: xinthinx;
font-size: 32px;
}
</style>

Setelah itu, coba kita ketikkan sesuatu pada halaman web setelah kode <body>. Karena pada blogspot ini saya belum tau cara meletekkan kode css tersebut agar font dapat di tampilkan di blog ini, maka anda dapat lihat contohnya di http://xinthinx.us/demo/font-embedded/. Nah, mudah bukan? Sekarang giliran anda mencoba. Selamat mencoba bagooos.

download code:
download

Tulislah Komentar Anda


Komentar anda sangat berguna bagi kemajuan blog ini.

Post a Comment

Xinthinx Blog Tutorial © 2008 Template by Dicas Blogger, emoticon from Yahoo! and KASKUS.

TOPO