My Unconscious Mind

Saya sering mendapatkan klien yang menyodorkan draft desain website mereka (dari paling sederhana dalam bentuk .ppt sampai dengan format .psd). Rata-rata mereka sangat “kreatif” dalam hal penggunaan font sebagai typografi mereka. Ketika saya jelaskan kaidah penggunaan font di website, rata-rata mereka cukup bisa untuk berkompromi dan akhirnya mengembalikan jenis font ke jenis yang “diizinkan”.

Tapi sebenarnya, saya bisa memenuhi permintaan mereka dengan memanfaatkan @font-face. Relatif bukan hal yang baru memang, karena @font-face sudah diajukan untuk standarisasi CSS2 dan bahkan sudah diimpelementasikan di Internet Explorer versi 5, meskipun implementasinya menggunakan format Embedded Open Type (.eot) yang notabene tidak semua browser menggunakan format tersebut.

OK, sekarang bagaimana cara kita memasang kaidah @font-face dalam blog/website kita?

Pertama, perlu diingat format font apa saja yang di-support oleh browser-browser yang ada.

• Internet Explorer (semua versi): EOT
• Safari (3.2+): TTF/OTF
• iPhone (3.1) SVG
• Chrome (semua versi): SVG (TTF/OTF supported sejak 25 Januari 2010)
• Firefox (3.5+): TTF/OTF (.WOFF sejak versi 3.6)
• Opera (10+) TTF/OTF

So, .eot + .ttf /.otf + svg + woff adalah format-format yang banyak di-support oleh browser. Artinya, ketika kita hendak menggunakan kaidah @font-face, sangat disarankan agar kita menyertakan format-format tersebut. Anda bisa memanfaatkan @font-face generator untuk meng-generate font pilihan dari komputer Anda (harap diperhatikan juga mengenai lisensi font yang akan Anda gunakan). Unggahlah file font yang akan Anda gunakan.

Kedua, syntax yang digunakan untuk implementasi @font-face:

@font-face {
  font-family: NamaFont; /* required */
  src: source;	/* required */
  font-weight: weight;	/* optional */
  font-style: style;  /* optional */
}

NamaFont
Nama font yang akan dipanggil untuk properti CSS kita.
source
URL tempat font tersebut kita simpan, bisa juga ditambahkan dengan local("NamaFontLokal"), dengan NamaFontLokal adalah nama yang terbaca oleh komputer lokal kita.
weight
Font weight value, misalnya bold atau normal.
style
Font style value, misalnya italic atau normal.

Note: Syntax CSS ini bisa digunakan berulang, jika kita menggunakan lebih dari 1 jenis font.

Ketiga, panggillah nama font tadi sesuai kebutuhan, misalnya:

h1{
   font-family: 'NamaFont', arial, serif;
}

Note: Tetap disarankan untuk menyertakan jenis font standar lain sebagai alternatif.

Untuk lebih jelasnya, Anda bisa membaca juga artikel-artikel berikut ini:

• @Font-face Mozilla Developer Center
• W3C – CSS Fonts Module
• @Font-face Tutorial and Guide by Milton Bayer
• @Font-face Browser Support and Tutorial