Memperbaiki Tampilan Font-face pada Internet Explorer
June 11th, 2012, Written by: | Categories: Programming, Tutorial

Font-Face adalah aturan CSS yang sangat berguna sekali. Kita dapat menggunakan font-font yang diinginkan dan tampilkan di Web kita. Jadi Web kita tidak terbatas hanya times ataupun verdana. Tapi ada satu yang terpikir oleh penulis, bagaimana dengan IE? Apakah IE mendukung font-face? Atau cuma IE9 saja yang jalan? Akhirnya penulis mencari tahu dan ajaibnya IE MENDUKUNG FONT-FACE SEMENJAK IE6!

surprice rage face

Perasaan penulis saat mengetahui bahwa IE mendukung font-face

Setelah menenangkan diri, penulis akhirnya merasa akhirnya bisa bebas menggunakan font-face sesuka hati. Untuk menggunakan font-face dan supaya font-nya bisa berjalan di semua browser (termasuk IE) kita membutuhkan 4 jenis font yaitu: .ttf, .eot, .svg dan .woff. Sedangkan dari penulis cuma mempunyai 1 jenis font yakni .ttf. Jadi, tentu harus kita ubah dulu ke format lainnya. Untuk convert, penulis menggunakan Web http://www.font2web.com/.

Setelah selesai di-convert dan font-face jadi, saatnya menguji font-face-nya jalan atau tidak. Tes pertama di Firefox, MANTAP. Tes kedua di Google Chrome, NICE! Tes ketiga di Opera, LUMAYAN. Tes ke empat di IE9, ..OK. Tes ke lima di IE8, IE7, IE6…..WTF?! Font-facenya tidak berjalan dengan benar di IE8 sampai IE6.

Wajah penulis saat melihat font-face tidak jalan di IE6~8

Penulis segera mencari cara untuk mengatasinya. Pertama, dari melihat apakah ada kesalahan penulisan pada kode font-face-nya, nama font-nya. Penulis bahkan mencoba mengubah cara penulisan dengan cara mengubah karakter spasi menjadi setrip dan sebagainya. Tetapi tetap saja tampilan font-nya tidak keluar di IE6 sampai IE8. Tinggal satu hal yang penulis curiga, yakni file format .eot-nya (asal tahu saja, .eot adalah format font yang digunakan oleh IE) pas konversinya ada masalah.

Setelah bertanya-tanya ke Om Google, dugaan penulis benar! Ada beberapa Web seperti http://www.font2web.com/ dan http://www.kirsle.net/wizards/ttf2eot.cgi tidak me-render format .eot dengan format yang dipahami oleh IE. Sehingga IE6 sampai IE8 tidak dapat menggunakan font tersebut. Akhirnya penulis mencoba mengkonversi font-nya di Web http://www.fontsquirrel.com/fontface/generator. Hasilnya,  IE6 sampai IE8 berhasil menampilkan font dengan baik!

Akhirnya font-face bisa berjalan lancar di semua browser dan penulis juga menjadi tenang. Akhir kata dari penulis, semoga artikel ini dapat membantu pembaca dalam mengatasi masalah-masalah tampilan font-face. Sampai ketemu di artikel berikutnya ^_^

One Response to “Memperbaiki Tampilan Font-face pada Internet Explorer”

Leave a Reply