Mengganti Font Web dengan @Font-face

Salah satu trend desain web saat ini adalah penggunaan font-font tertentu yang tidak selalu dimiliki oleh pengguna internet. Tujuannya adalah agar desain web kelihatan unik dan font sesuai dengan tema desain yang diharapkan. Ada beberapa cara yang bisa kita gunakan untuk melakukan font replacement ini, diantaranya adalah menggunakan @font-face yang akan saya bahas pada tulisan kali ini.

@font-face membuat font yang kita sertakan bisa didownload dari server web ke komputer pengguna internet yang nantinya akan dirender menjadi sebagaimana font yang diberikan. Oleh karena itu font yang diinginkan tidak akan langsung muncul seketika, tetapi membutuhkan waktu beberapa saat sampai font selesai didownload. Bagi pengguna browser berbasis WebKit semisal safari dan chrome, tulisan tidak akan muncul sampai font selesai didownload. Sedangkan pada firefox, sebelum font selesai didownload, tulisan akan muncul dalam bentuk font default yang kemudian akan berubah menjadi font yang diinginan setelah font selesai didownload. Perubahan inilah yang lebih dikenal dengan Flash of Unstyled Text (FOUT), dan beberapa desainer web tidak menyukai adanya FOUT ini.

CSS

@font-face sudah muncul cukup lama, jadi untuk saat ini sudah bisa digunakan pada mayoritas browser. Font dalam bentuk TTF bisa bekerja pada mayoritas browser kecuali IE dan iPhone. Pada iPhone dan iPad kita membutuhkan font dalam bentuk SVG sedangkan untuk IE kita gunakan font dalam bentuk EOT. Namun ada sedikit masalah pada IE yang agak tua, meski kita sertakan font EOT jika deklarasi @font-face jadi satu IE tetap tidak akan merendernya, hal ini bisa kita selesaikan dengan membuat dua deklarasi @font-face, pertama hanya menggunakan EOT dan yang kedua deklarasi @font-face biasa.

@font-face {
	font-family: 'QuickEndJerkRegular';
	src: url('quick_end_jerk-webfont.eot');
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}
@font-face {
	font-family: 'QuickEndJerkRegular';
	src: local('☺'), url('quick_end_jerk-webfont.woff') format('woff'), 
	url('quick_end_jerk-webfont.ttf') format('truetype'), 
	url('quick_end_jerk-webfont.svg#webfontuXAMUfqh') format('svg');
	font-weight: normal;
	font-style: normal;
        font-variant: normal;
}

h1 { font-family: QuickEndJerkRegular, Arial, sans-serif; }

Dengan kode CSS diatas maka semua yang dideklarasikan sebagai h1 akan menggunakan font Quick End Jerk.

Lihat Demo Download

Semoga tutorial ini bermanfaat, jangan lupa subscribe ke Painthink RSS feed, follow saya di Twitter atau klik untuk berlangganan artikel via e-mail.