Tutorial Belajar CSS: Cara Menggunakan Font External dengan CSS (@font-face)

Posted on

Apabila di panduan CSS sebelumnya kita telah mempelajari cara mengubah jenis tulisan (font) text HTML dengan menggunakan font lokal, karenanya pada panduan CSS kali ini kita akan membahas mengenai cara mengubah jenis font text HTML dengan menggunakan font yang ‘diinput’ dari luar, yakni cara Menggunakan Font External dengan CSS.


Mengenal Command @font-face pada CSS

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

Bagi hal ini, CSS mempunyai fitur bagi memasukkan font external ke pada CSS, yakni dengan command @font-face dan property font-family.

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

Format dan Jenis Font pada CSS

Percaya atau tak, Internet Explorer telah mendukung pemakaian font external pada CSS sejak IE versi 5 yang dirilis 12 tahun lalu. Namun bagi merancang web browser ‘paham’ font external memerlukan cara yang sulit. Diantara penyebabnya ialah karena perbedaan format font yang didukung oleh web browser.

Terdapat beberapa jenis format font yang dapat digunakan bagi web browser:

EOT (Embedded Open Type)

EOT ialah format font yang hanya didukung oleh Internet Explorer, dan relatif jarang digunakan. Bagi dapat mengubah format font menjadi EOT, kita membutuhkan program khusus seperti yang disediakan di situs www.fontsquirrel.com

TTF (True Type) and OTF (Open Type)

Apabila sahabat membuka folder font di pada komputer, karenanya beberapa besar akan mempunyai extensi: .ttf (True Type) atau .otf (Open Type). Kedua format font ini adalah sebuah format font yang sangat 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 adalah sebuah jenis format sangat baru dan didesain secara khusus bagi kebutuhan web. WOFF di dasarnya ialah versi kompresi dari format TTF dan OTF. WOFF mempunyai 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 ialah Android. Dengan kata lain, apabila sahabat menggunakan format WOFF, web browser pada Android dan IE 8 kebawah tak akan dapat mengaksesnya.

SVG (Scalable Vector Graphic)

Format SVG bukan adalah sebuah format khusus bagi font, melainkan format bagi menyimpan gambar vector (jenis gambar yang dapat di zoom tanpa merubah kualitasnya). Format font SVG tak didukung oleh IE dan pun Firefox. Satu-satunya alasan menggunakan format SVG bagi font ialah bagi iOS Safari versi 4.1 atau sebelumnya.

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

Panduan Cara Menggunakan Font External pada CSS

Selaku panduan cara menggunakan font external dengan CSS, kita terlebih dahulu mesti menyiapkan font yang akan digunakan. Pada panduan kali ini saya akan menggunakan font : DIGITAL-7_2.TTF. Font ini saya ambil dari folder font pada aplikasi Windows 7. Sahabat boleh bebas menggunakan font jenis lain, namun letakkan di pada folder yang sama dengan kode HTML yang akan kita bikin agar gampang mengetikkan lokasi file font-nya.

Apabila telah, berikut ialah contoh kode HTML dan CSS bagi menjalankan file font external:

Perhatikan bagian kode CSS :

Command diatas ialah instruksi kepada CSS bagi menggunakan font external dengan command @font-face. Property font-family di baris kedua berfungsi selaku ‘nama’ bagi font kita. Sahabat bebas apabila ingin mengganti nama ini dengan nama lain. Property src berfungsi bagi membertahu CSS lokasi dari font yang akan digunakan. Karena file ‘DIGITAL-7_2.TTF’ berada di pada satu folder dengan file HTML tersebut, karenanya kita dapat seketika menuliskan nama file font. Namun apabila lokasi font berbeda, silahkan menggunakan tempat tinggal yang sesuai.

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

Kode tersebut ialah cara pemakaian font yang pernah kita bahas di panduan sebelumnya. Namun yang menjadi perhatian ialah nama font. “Font Digital” adalah sebuah nama yang saya definisikan di ketika penyusunan command @font-face.

Mengatasi keterbatasan dukungan format Font

Seperti yang telah saya bahas di awal panduan ini, web browser IE 8 kebawah dan beberapa versi safari web browser tak mendukung format font TTF. Lalu bagaimana cara mengakalinya?

Bagi kebutuhan ini, kita ‘terpaksa’ merancang kode CSS dengan menulis dan menggunakan segala format font yang terdapat. Berikut ialah perubahan kode CSS yang diperlukan bagi hal ini:

Dapat dilihat dari kode diatas, saya menggunakan ke-4 format font bagi font DIGITAL-7_2. Bagi kebutuhan tersebut, saya mesti menkonversi format font DIGITAL-7_2.TFF menjadi format lain dan menempatkannya di pada folder yang sama.

Bagi menkonversi pelbagai format font ini, sahabat dapat menggunakan program dari http://www.fontsquirrel.com/tools/webfont-generator.

Pembahasan mengenai kode CSS diatas akan kita bahas di lain kesempatan, namun setidaknya sahabat dapat memahami mekanisme yang digunakan.

Pada panduan belajar CSS kali ini kita telah mempelajari Cara Menggunakan Font External dengan CSS. Selain dengan cara diatas, terdapat cara yang lebih gampang dan populer digunakan ketika ini, yakni menggunakan font external yang disediakan oleh Google Font. Kita akan membahasnya pada panduan berikutnya.


eBook CSS Uncover Duniailkom

Apabila sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/