Permana Jayanta

Web Developer

Menyimpan font didalam file CSS

embeddable-font Saat kita mendesain halaman web, salah satu unsur yang bisa membuat halaman web tersebut terlihat menarik adalah penggunaan font. Font yang menarik akan membuat tampilan halaman web lebih menarik pula. Tapi, jika orang yang membuka halaman web tersebut tidak memiliki font yang kita gunakan maka akan diganti secara otomatis oleh browser dengan font lain. Beberapa web designer mengatasi hal ini dengan cara menampilkan pesan kecil seperti “download font Myriad untuk tampilan terbaik” supaya orang yang membuka halaman men-download font yang disarankan terlebih dahulu baru kemudian melakukan refresh halaman. Tapi berapa orang yang bersedia melakukan hal tersebut ? Tidak banyak, paling-paling hanya mereka yang mempunyai kecepatan akses internet yang tinggi, atau mereka yang memang ingin membuka halaman tersebut dengan tampilan maksimal.

Berikut ini ada cara agar halaman web bisa tampil menggunakan font yang kita inginkan walaupun orang yang membukanya tidak memiliki font tersebut. Nah lho, bagaimana bisa ? Ya bisa aja. Hal ini bisa dilakukan dengan bantuan CSS, hanya saja tehnik ini masih terbatas pada beberapa browser. Saat ini hanya browser Safari saja yang bisa melakukannya, yahhhSad firefox ga bisa ya. Tehnik berikut memang bukan hal baru, saya hanya ingin memberi tahu bagi yang belum tahu Big Grin.

Seperti apa kira-kira caranya ? Well, coba lihat kode dibawah ini. Potongan kode ini saya dapat dari A List Apart.

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

Yup, kita menggunakan perintah font-face pada CSS untuk menyimpan URL dimana font tersebut bisa didownload oleh browser. Penjelasan kodenya (yang udah ngerti silahkan dilewati) :

  • Perintah font-face memberi tahu browser nama font yang akan didownload.

  • Perintah src untuk memberi tahu browser dimana font bisa didownload. Dan perintah format untuk memberi tahu browser apa format dari font yang akan didownload, apakah OpenType, TrueType, atau bisa juga Type lainnya.

  • Sedangkan perintah h1 {font-family: "Kimberley", sans-serif} gunanya adalah menampilkan semua Heading 1 dengan font Kimberley. Kalau tidak bisa, maka gunakan font dengan tipe sans-serif.

Nah, seperti yang sudah bisa kalian bayangkan. Sebenarnya yang dilakukan oleh browser untuk menampilkan font yang tidak ada pada komputer adalah dengan melakukan download terhadap font yang dispesifikasikan pada perintah font-face, baru kemudian menampilkan halaman web tersebut dengan font yang sudah didownload tadi. Jadi sebaiknya berhati-hati menggunakan tehnik ini karena akan menambah lama loading halaman (tapi masih lebih cepat daripada membuka halaman profile Friendster yang ada lagunya Big Grin.

Oh iya, seperti yang sudah saya katakan tadi, tehnik ini cuma bisa dilakukan dengan browser Safari. Firefox belum bisa (udah saya coba), ga tau lagi dengan Internet Explorer dan Opera.

Sumber : A List Apart , Surfin’ Safari , Beebo

2 Comments

  1. He he he, bagus nih….coba’in ah 😉
    Thanks udah bagi-bagi info nih!

  2. Saya ada problem, dengan terbatasnya font pada Dreamweaver, ingin menambah font dari luar takutnya nanti saat dibuka oleh pengunjung font-nya berubah. Kelihatannya tulisan ini memberi solusi, akan saya praktekkan. Semoga berhasil. terima kasih atas info-nya.

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.

© 2019 Permana Jayanta

Theme by Anders NorenUp ↑