Belajar CSS Dasar Part 7 : Menggunakan Font External Dengan CSS(@font-face)

tutorial CSS kali ini kita akan membahas tentang cara mengubah jenis font text HTML dengan menggunakan font yang ‘diinput’ dari luar, yakni cara Menggunakan Font External dengan CSS.

Pengertian

Property font-family yang telah kita pelajari dalam tutorial sebelumnya, membatasi jenis font yang dapat dipilih kedalam beberapa font umum yang terinstall di dalam komputer, seperti font arial, helvetica atau times new roman. Namun, bagaimana caranya jika kita ingin menggunakan font ‘khusus’ yang unik agar sesuai dengan tema web?

Untuk hal ini, CSS memiliki fitur untuk memasukkan font external ke dalam CSS, yakni dengan perintah @font-face dan property font-family.

Namun sebelum membuat kode CSSnya, kita akan membahas sedikit tentang tipe-tipe format font yang didukung oleh web browser.

Format dan Jenis Font dalam CSS

Percaya atau tidak, Internet Explorer telah mendukung penggunaan font external dalam CSS sejak IE versi 5 yang dirilis 12 tahun lalu. Namun untuk membuat web browser ‘mengerti’ font external memerlukan metode yang sulit. Salah satu penyebabnya adalah karena perbedaan format font yang didukung oleh web browser.

Terdapat beberapa jenis format font yang bisa digunakan untuk web browser:

EOT (Embedded Open Type)

EOT adalah format font yang hanya didukung oleh Internet Explorer, dan relatif jarang digunakan. Untuk dapat mengubah format font menjadi EOT, kita membutuhkan aplikasi khusus seperti yang disediakan pada situs www.fontsquirrel.com

TTF (True Type) and OTF (Open Type)

Jika anda membuka folder font di dalam komputer, maka sebagian besar akan memiliki extensi: .ttf (True Type) atau .otf (Open Type). Kedua format font ini merupakan format font yang paling banyak digunakan. Format TTF dan OTF didukung oleh banyak web browser seperti: IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, iOS Safari (versi 4.2 dan diatasnya), Android, dan Blackberry Browser.

WOFF (Web Open Font Format)

Format font WOFF merupakan jenis format paling baru dan didesain secara khusus untuk keperluan web. WOFF pada dasarnya adalah versi kompresi dari format TTF dan OTF. WOFF memiliki ukuran lebih kecil dan akan didownload dengan lebih cepat. WOFF di dukung oleh web browser seperti: IE 9 dan diatasnya, Firefox, Chrome, Safari, Opera, Blackberry browser, and iOS Safari versi 5 dan diatasnya. Namun yang menjadi catatan adalah Android. Dengan kata lain, jika anda menggunakan format WOFF, web browser dalam Android dan IE 8 kebawah tidak akan bisa mengaksesnya.

SVG (Scalable Vector Graphic)

Format SVG bukan merupakan format khusus untuk font, melainkan format untuk menyimpan gambar vector (jenis gambar yang bisa di zoom tanpa merubah kualitasnya). Format font SVG tidak didukung oleh IE dan juga Firefox. Satu-satunya alasan menggunakan format SVG untuk font adalah untuk iOS Safari versi 4.1 atau sebelumnya.

Dengan berbagai jenis format font tersebut, untuk dapat menggunakan font external dengan CSS, kita terpaksa akan menggunakan ‘trik’ khusus.

Tutorial Cara Menggunakan Font External dalam CSS

Sebagai tutorial cara menggunakan font external dengan CSS, kita terlebih dahulu harus menyiapkan font yang akan digunakan. Dalam tutorial kali ini saya akan menggunakan font : farcry. Font ini saya ambil dari situs http://www.dafont.com/farcry.font. Anda boleh bebas menggunakan font jenis lain, namun letakkan di dalam folder yang sama dengan kode HTML yang akan kita buat agar mudah mengetikkan lokasi file font-nya

jika sudah , berikut adalah contoh kode HTML dan CSS untuk menjalankan file font external :

Perhatikan bagian script CSS :

@font-face {
         font-family: "farcry";
         src: url('farcry/FARCEB__.TTF');
}

Perintah diatas adalah instruksi kepada CSS untuk menggunakan font external dengan perintah @font-face. Property font-family pada baris kedua berfungsi sebagai ‘nama’ untuk font kita. Anda bebas jika ingin mengganti nama ini dengan nama lain. Property src berfungsi untuk membertahu CSS lokasi dari font yang akan digunakan. Karena file ‘FARCEB__.TTF’ berada di dalam  folder farcry , maka kita bisa harus menuliskan 'farcry/FARCEB__.TTF' selanjutnya langsung menuliskan nama file font. Namun jika lokasi font berbeda, silahkan menggunakan alamat yang sesuai.

Untuk dapat menggunakan font external tersebut, kita membutuhkan ‘pemanggilan’ property CSS tambahan dengan kode:

.font {
         font-family: "farcry";
}

Script tersebut adalah cara penggunaan font yang pernah kita bahas pada tutorial sebelumnya. Namun yang menjadi perhatian adalah nama font. “farcry” merupakan nama yang saya definisikan pada saat pembuatan perintah @font-face.


Dalam tutorial belajar CSS kali ini kita telah mempelajari Cara Menggunakan Font External dengan CSS.

Kesimpulan : 
Menggunakan script css dan html unutk menggunakan font external sangat membatu , dan kita tidak usah meinsatalnya terlebih dahulu .