belajarwebdesign.com

Posted: 28 Mar 2012 04:40 AM PDT

Terdengar simpel dan sangat mendasar, tetapi inilah yang sering saya keluhkan. Isu-isu legalitas dan kompatibel atau tidaknya sebuah font untuk ditampilkan dalam sebuah website sangat-sangat membuat saya stres tingkat tinggi. Mungkin terasa hiperbola dari kalimat saya yang terakhir, ya, tapi itulah kenyataannya. Kata kompatibel yang saya maksud adalah tampil sempurnanya sebuah font terhadap semua media (browser, OS, mobile).

Artikel Terkait

Sejarah Singkat

Sedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari "TrueDoc", "EOT", "OTF/TTF", akhirnya muncul "Web Open Font Format" atau biasa disingkat "WOFF". Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah "Lisensi". Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut.

Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan.

Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan.

Generic Fonts

Ada 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut.

Hasil Render MacOS

Hasil Render Linux

Hasil Render Windows

Hasil Render iPhone

Hasil Render iPad

Hasil Render Mozilla Mobile

Hasil Render Android Mobile

Hasil Render Android Tab

Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media.

Dasar Styling Font

Pada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya

p { font-family: sans-serif;} .header { font-family: serif;}

Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya.

p { font-family: helvetica, arial, verdana, sans-serif;} .header { font-family: "times new roman", times, georgia, serif;}

Kode css diatas dapat dibaca sebagai berikut

"Tampilkan elemen p menggunakan font helvetica, jika tidak ada gunakan font arial, jika tidak ada gunakan font verdana, jika tidak ada gunakan sans-serif"

"Tampilkan elemen .header menggunakan font times new roman, jika tidak ada gunakan font times, jika tidak ada gunakan font georgia, jika tidak ada gunakan font serif"

Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya.

Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah.

Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya.

Embed Font Eksternal

Jika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang "bagaimana format font yang dapat tampil identik disemua browser". Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh).

Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML.

@font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;} p { font-family: fontsans-serif, arial, helvetica, sans-serif; }

Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed.

Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan.

www.fontsquirrel.com

www.google.com/webfonts

Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda.

Linux

Windows

MacOS

Mobile

Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff.

Untuk Squirrel font dengan tulisan "Font Mix". Font family ini menggunakan kode sebagai berikut.

@font-face { font-family: 'DroidSerifRegular'; src: url('droid/DroidSerif-Regular-webfont.eot'); src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('droid/DroidSerif-Regular-webfont.woff') format('woff'), url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'), url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); font-weight: normal; font-style: normal; }

Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat

Referensi:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://www.upsdell.com/BrowserNews/res_fonts.htm
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://en.wikipedia.org/wiki/Web_typography