Font Embedding using CSS3 @font-face Selector
Font merupakan bagian penting dari sebuah design. Dengan menggunakan variasi font yang tidak standart (unik) semakin menambah nilai estetika design dari website kita. Untuk seorang designer, penggunaan typography yang menarik akan menghasilkan design yang mengagumkan. Namun dukungan jenis font yang dapat digunakan dalam sebuah web sangatlah terbatas, akibatnya muncul beragam pengembangan yang memungkinkan kita menggunakan beragam jenis font yang kita inginkan. Misalnya Cufon dan sIFR.
Kini CSS3 mulai menggembangkan penggunaan beragam jenis font dengan embed font atau @font-face. Cukup menggunakan css dan file font yang kita upload tanpa bantuan javascript maupun flash.
Sayangnya penggunaan @font-face belum didukung oleh semua browser terutama untuk font jenis OpenType. Embed font dengan jenis TrueType atau OpenType hanya bekerja pada Firefox 3.5, afari 3.1, dan Opera 10. IE dapat membaca dengan baik jenis font TrueType dengan cara merubahnya dari ttf ke eot.
Contoh penggunaan @font-face :
<html>
<head>
<title>Font Embeded</title>
<style type="text/css">
@font-face {
font-family: "Graublau Sans Web";
src: url("tempat_menaruh_font/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf") format("truetype");
}
h1 { font-family: "Graublau Sans Web", serif }
h2 { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
<h1>Font Graublau Sans Web</h1>
<h2>Font Bitstream Vera Serif Bold</h1>
</body>
</html>
Lebih jelas lagi tentang penerapan @font-face dapat dipelajari di:
Becoming a Font Embedding Master
Pertama (x). Coba dulu ah….
mantep nih..
keep posting, om.
tapi kalo pake font embedded bisa menyebabkan bandwith melonjak
karena tiap buka web nya ikutan download file font nya
sedikit solusinya pake 3rd party hosting khusus font, kayak typekit
Pertama (x). Coba dulu ah….
keren mas! di coba yach… makasih sharingnya