Cara Menggunakan @font-face

Mungkin banyak yang sering melihat font yang unik di suatu website. Entah itu serif ataupun san-serif. Banyak website yang menggunakan jenis font yang tidak seperti biasanya (default). Font tersebut merupakan @font-face. @font-face merupakan font ‘khusus’ yang unik yang biasa digunakan agar sesuai dengan tema web.

Sebagai contoh saya download font-face yang bernama "CFJacquesCartier" di dafont.com. Lalu saya ekstrak dan hasilnya ada satu font bernama CFJacquesCartier-Regular.ttf. Untuk membuat font yang bisa didukung oleh browser, format yang digunakan pun harus bisa kompatibel dengan browsernya.

Beberapa format font yang bisa digunakan di browser :

• EOT (Embedded Open Type)
• TTF (True Type) and OTF (Open Type)
• WOFF (Web Open Font Format)

Untuk membuatnya bisa digunakan di browser, kita harus men-generate font yang berformat ttf tadi. Dengan menggunakan font face generator. Untuk melihat contohnya bisa buka link ini. Jika sudah ekstrak dan masukkan dalam 1 folder yang berada file HTMLnya.

Biasanya, saat kita ekstrak kita sudah dapat HTML dan CSSnya. Jika begitu tinggal copast ke dalam file HTML kita. Contohnya seperti berikut :

HTMLnya :

CSSnya :

Dan lihat hasilnya :

Yap, sangat mudah kan? Semoga bermanfaat :)