Tips Info Mengenal Mengenal Embedded Font

Hi sribuddies,

Sebagai pemain dalam dunia design, kita tentu sudah akrab dengan istilah typography. Yap, seni dan teknik dalam merangkai dan mengkombinasikan berbagai tipe, bentuk dan warna font sehingga membuat tulisan atau bahasa yang ingin disampaikan dapat lebih mudah terbaca – itulah pengertian dasar typography.

Dewasa ini, seiring dengan semakin berkembangnya jaringan internet, pengaplikasian typography ke dalam suatu karya design menjadi lebih mudah, karena semakin banyak tipe dan bentuk font yang menarik dan tersedia secara gratis di dunia. Sayangnya, kondisi itu baru dapat dimanfaatkan maksimal oleh para designer grafis. Sementara, designer web hanya bisa gigit jari, dan dipaksa bermain dengan font-font standar yang lebih “web-safe” dan kompatibel dengan beragam jenis Internet browser.

Untunglah, keberpihakan sebelah itu tidak harus berlangsung lama. Kini, dengan teknik embedded font yang dapat dilakukan dengan relatif mudah, tampilan situs web pun bisa semakin cantik, dengan font-font unik di bagian judul, badan artikel atau di variabel manapun yang sebelumnya hanya bisa dihuni font-font standar.

Jadi, tidak hanya bisa menggunakan font yang lebih menarik untuk variabel konten, namun font yang berbeda juga bisa diterapkan pada elemen-elemen yang tadinya hanya diisi dengan gambar atau ilustrasi saja. Semuanya berkat teknik embedded font, situs web yang kamu kerjakan bisa lebih mudah ditemukan lewat mesin pencari dunia maya, dan juga tampilan webnya terlihat lebih ‘bersih’ serta lebih banyak penanda semantik pada backend.

Satu fitur menarik lainnya dalam hal penggunaan font non-standar ini adalah, kita sekarang bisa ‘menanamkan’ font-font cantik ini dan menggunakan style CSS regular, seperti yang biasa kita terapkan pada font-font standar. Kompatibilitas terjaga, sementara estetika semakin prima. Tentu saja, senyum di wajah klien semakin lebar, dan pundi-pundi yang mengalir ke tabungan pun semakin lancar.

Nah, pada artikel ini, Sribu akan membahas tuntas mengenai embedded font. Semoga bisa menjadi acuan bagi sribuddies yang bergelut dalam dunia design web ya… Cekidot!

{WHAT}
Apa sih Embedded Font?

Font embedding sebenarnya sudah cukup lama ‘beredar’. Setidaknya sudah beberapa tahun terakhir ini, font embedding mulai digunakan pada aplikasi-aplikasi offline terkenal. Dan, tentu saja, jauh sebelumnya, para designer sudah bereksperimen dengan bentuk tulisan dan font yang unik dengan software-software design.

Namun, baru beberapa waktu belakangan, designer web bisa mengikutsertakan aneka bentuk font non-standar pada server web, dan kemudian menampilkan mereka pada halaman web dengan CSS. Berikut ini contoh font non-standar yang dilekatkan pada halaman web:

Contoh font di atas pada bagian slider diperlukan dalam bentuk variabel. Namun, pemilik web menginginkan font yang unik dan stylish dalam rancangan webnya. Cukup lekatkan font non-standar ini pada halaman web, dan font dapat menjalankan fungsi sebagai teks regular, tanpa perlu tambahan gambar (image).

File font-nya sendiri perlu dimasukkan ke dalam server web, sehingga kode CSS dapat terbaca dengan tepat, dan tahu di mana harus retrieve file tersebut. Tidak seperti tipe font lain yang lebih ‘aman’ untuk tampilan web, designer web harus ‘memberitahu’ CSS di mana letak file font non-standar ini disimpan dan informasi-informasi lainnya tentang font tersebut. Barulah setelah itu, designer bisa mengaitkannya dengan beberapa metode.

{WHY}
Kenapa harus menggunakan Embedded Font?

Mungkin sribuddies bertanya-tanya, kalau langkah-langkah pengaplikasiannya tergolong ribet seperti ini, lantas kenapa designer web mau bersusah-payah menggunakan embedded font untuk rancangan web mereka? Yang pasti, ada beberapa contoh kasus yang membuktikan bahwa penggunaan embedded font lebih praktis dan menghemat waktu dibanding metode-metode rancang web konvensional. Namun, apakah hal itu saja cukup? Apa tidak ada alasan lainnya? Tentu saja ada.

Embedded font dapat menjadi nilai tambah menawan dari perspektif design. Selain itu, embedded font juga memiliki beberapa fungsi praktikal lainnya, seperti di bawah ini.

* Design yang lebih baik

Mari kita mulai dengan yang paling jelas terlihat. Dengan semakin popularnya design berbasis typography, kita mulai semakin sering mendapati situs web, baik yang berbasis typography maupun yang tidak, yang menggunakan font dengan tampilan lebih menarik. Menggunakan font standar yang seragam dan tampak datar, yang telah digunakan selama bertahun-tahun sebelumnya, hanya akan membuat rancangan design tampak tidak menonjol dibandingkan web-web lain yang menggunakan font non-standar. Font web standar tetap baik digunakan untuk mengisi sebagian besar isi konten, namun untuk bagian judul, font non-standar yang lebih ‘bersih’, terlihat profesional dan dirancang dengan lebih baik akan menjadi nilai tambah. Fakta inilah yang perlu disadari oleh para penggelut dunia design web.

Plus, dari perspektif design, designer bisa mendapatkan kebebasan kreatif yang lebih luas. Tidak perlu merancang PSD dengan hanya menggunakan font-font standar yang monoton dan cenderung membosankan. Kreasi design semakin baik dengan memanfaatkan aneka bentuk font, baik yang bisa diperoleh secara gratis maupun menggunakan lisensi resmi. Dan, bagian pengembangan web pun tidak akan mengalami kesulitan mengerjakannya. Hal ini akan melahirkan design yang lebih beragam, dan kesempatan yang lebih luas bagi para designer web untuk menampilkan daya kreativitas mereka seluas-luasnya.

* Search-Engine Optimizer yang lebih baik
Mesin pencari dunia maya menemukan dan memprioritaskan situs web berdasarkan tanda-tanda yang disematkan padanya. Inilah salah satu alasan utama mengapa designer web perlu memperlajari semantik dengan lebih baik. Penanda header akan menjadi pendorong yang lebih baik ketimbang penanda alt dari tautan image. Jadi, sangat mudah kan untuk memahami mengapa penggunaan embedded font pada header, judul blog post, dan bagian penting lain dari sebuah konten akan membawa pada hasil SEO yang lebih baik, ketimbang image yang ditautkan? Lagipula, jika suatu kali kita lupa dengan image yang ditautkan atau tanda judul, mesin pencari tetap tidak akan mengalami kesulitan untuk mencarikan konten yang dimaksud dengan menggunakan embedded font – yang berfungsi sebagai teks regular.

* Pengaplikasian yang mudah
Cukup memastikan font yang akan kamu pakai masuk dalam pengaturan pada saat proses pengembangan web, dan kamu pun hanya perlu pemeliharaan minor setelahnya. Tidak perlu lagi kamu susah payah membuat gambar baru untuk header, slider, atau variabel web lainnya. Kamu cuma perlu mengkreasikan dan mengetikkan teks apapun yang kamu perlukan. Pun, jika suatu hari konten tersebut perlu diubah, akan lebih mudah untuk kamu meng-updatenya. Dan, poin tambahan lainnya adalah, dari sisi klien, penggunaannya juga sangat mudah dan sederhana.

{HOW}
Bagaimana mengaplikasikan Embedded Font?
Jadi, pertanyaannya sekarang: Bagaimana kita dapat mengaplikasikan embedded font ke dalam design web kita? Ada beberapa metode yang bisa digunakan:

* Menggunakan @font-face

Sejak sekitar setahun lalu, metode CSS @font-face untuk embedded font yang telah siap pakai sudah menjadi kode standar di hampir semua Internet browser. Hal ini berarti, semua jenis browser sejak dari update terakhir hingga seterusnya bisa membaca @font-face tanpa perlu pekerjaan atau kode tambahan lainnya. Sejak saat itu jugalah, para pengembang web menilai @font-face sebagai metode font embedding yang paling baik, karena paling efisien, paling mudah diimplementasikan, serta juga paling kompatibel.

Menggunakan @font-face untuk melekatkan font pada web semudah langkah-langkah berikut ini:

@font-face {
font-family: CreamPuff;
src: url(‘fonts/creampuff.eot’);
}

h2{
font-family: CreamPuff;
font-size: 22pt;
}

Cukup gunakan rumusan @font-face di dalam stylesheet CSS kamu, beri nama dengan menggunakan properti font-family standar CSS, berikan alamat URL sumber (lokasi file font disimpan di dalam server), dan berikan referensi seperti yang biasa kamu lakukan pada font lain sepanjang sisa kode CSS. Pada contoh di atas, setelah mengunggah font, kemudian diatur menjadi font yang digunakan pada tags H2. Namun demikian, seperti rumusan font lainnya, pastikan untuk menyimpan customized font di belakang font-font standar yang web-safe.

Bagi pengguna Internet Explorer, percaya atau tidak, sebenarnya sudah sejak lama mendukung metode @font-face. Sayangnya, browser ini hanya dapat membaca font yang disimpan dalam ekstensi .EOT (lihat contoh kode di atas). TTF dan OTF kemungkinan besar akan dapat ditampilkan dengan cukup baik di berbagai jenis browser. Namun, untuk amannya saja, lebih baik simpanlah file font dalam ekstensi .EOT. Cukup mudah kok untuk mengkopi dan menyimpan kembali file font TTF dalam bentuk EOT. Toh, sudah tersedia berbagai aplikasi pendukung, seperti aplikasi yang satu ini: TTF to EOT Font Converter.

Selain itu, untuk mendapatkan kualitas yang terbaik dan kompabilitas yang semakin besar, tak ada salahnya juga menampilkan kedua ekstensi file font dalam kode CSS (lihat contoh kode di bawah). Biarkan saja si browser yang memilih ekstensi file yang terbaik.

@font-face{
font-family: CreamPuff;
src: url(‘fonts/creampuff.eot’); /* For IE */
src: local(‘creampuff’), url(‘fonts/creampuff.ttf’) format(‘truetype’); /* For non-IE */
}

* Font yang tersedia bebas untuk digunakan secara komersial

Salah satu isu utama yang harus dipertimbangkan sebelum menggunakan @font-face ataupun metode font embedding lainnya adalah, siapa saja bisa dengan mudah menempelkan font berbayar yang mereka simpan dalam komputer, tanpa lisensi ataupun kewajiban membayar. Hal ini tentu saja bisa mendatangkan masalah hukum. Jadi, untuk menghindarinya, memang font yang digunakan sebaiknya font yang tersedia bebas untuk penggunaan komersial.

Masalahnya adalah, kadang tidak mudah membedakan mana font yang dapat digunakan secara cuma-cuma dan mana yang harus mengantongi lisensi terlebih dulu. Untuk itulah, hadir situs-situs web seperti FontSquirrel.com yang menyediakan layanan berbasis web, yang menyajikan dan menyortir font-font terbaik yang bebas digunakan untuk tujuan komersial dan siap diunduh.

Caranya gimana? Gampang kok, cukup pilih font yang kamu mau, unduh format TTF-nya, lalu kamu bisa dengan bebas menggunakan generator @font-face dari FontSquirrel untuk membuat kode dan file font. Generator ini secara otomatis mengubah font ke dalam bentuk terbaik dari segi performa di antara berbagai platform, dan memberikan format font yang memadai dari segi kompatibilitas dan performa antar browser.

Selain FontSquirrel, ada juga beberapa situs lain yang menyediakan layanan serupa, beberapa diantaranya berbayar. Beberapa situs ini terkadang memberikan pilihan yang lebih beragam, atau pun menyediakan opsi untuk membeli lisensi bagi font-font premium yang ingin kamu gunakan dalam @font-face. Kamu bisa cari tahu lebih banyak di FontSpring.com, TypeKit.com, TypeFront.com.

* SIFR, Cufon dan FLIR
Yang perlu kamu ketahui, dalam menghadapi beberapa jenis font, kode CSS tidak mampu menampilkan dengan sempurna. Beberapa jenis font bisa tampak lebih kabur, atau tidak terlihat terancang dengan baik jika diaplikasikan dengan metode @font-face.

Meskipun @font-face dapat bekerja dengan baik pada sebagian besar tipe font, namun jika suatu hari kamu bertemu dengan font yang bandel seperti ini, tenang saja. Masih bisa diakali dengan metode-metode penggantian image dengan menggunakan Flash dan JavaScript, seperti SIFR, Cufon ataupun FLIR.

Setiap cara ini memiliki metode pengaplikasian dan kelebihan-kekurangan sendiri-sendiri. Namun, kesemuanya 100% ramah-SEO, dan memiliki beberapa keuntungan lain dari font embedding.

Tapi, sebelumnya maaf nih sribuddies, karena Sribu tidak bisa menjelaskan secara terperinci semua metode tersebut di artikel ini. Sebagai gantinya, Sribu berikan tautan ke artikel-artikel terkait ya…
- How To Implement sIFR3 Into Your Website
- Cufon: The Easiest Way to Use Any Font You Wish
- How To Use Any Font You Wish With FLIR
- Cufon vs sIFR vs FLIR

Fiuh, cukup panjang juga ya artikelnya. Tapi, Sribu percaya artikel ini bisa menginspirasi sribuddies untuk semakin bebas berkreasi dalam platform apapun. Selamat berkarya, sribuddies. Jangan lupa pejeng hasil karyamu di Facebook fan page Sribu.com atau mention Twitter @sribudotcom ya.

Salam,
Tim Sribu - Pembuatan Logo

* Credits to:
- Wikipedia.org
- TutsPlus.com
- ThinkClay.com
- Kirsle.net
- FontSpring.com
- TypeKit.com
- TypeFront.com
- FontSquirrel.com
- OneXtraPixel.com