Jika pada tutorial CSS sebelumnya kita telah mempelajari cara mengubah jenis tulisan (font) text HTML dengan menggunakan font lokal, maka dalam 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.
Mengenal Perintah @font-face dalam CSS
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 http://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 : DIGITAL-7_2.TTF. Font ini saya ambil dari folder font dalam sistem Windows 7. 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html><html><head><title>Belajar Font External CSS</title><style type="text/css"> @font-face { font-family: "Font Digital"; src: url('DIGITAL-7_2.TTF'); } .digital { font-family: "Font Digital"; }</style></head> <body> <h2>Belajar Font External CSS</h2> <h3>Font reguler:</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>Font external (digital):</h3> <p class="digital">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p></body></html> |
Perhatikan bagian kode CSS :
@font-face { font-family: "Font Digital"; src: url('DIGITAL-7_2.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 ‘DIGITAL-7_2.TTF’ berada di dalam satu folder dengan file HTML tersebut, maka kita bisa 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:
.digital { font-family: "Font Digital";} |
Kode tersebut adalah cara penggunaan font yang pernah kita bahas pada tutorial sebelumnya. Namun yang menjadi perhatian adalah nama font. “Font Digital” merupakan nama yang saya definisikan pada saat pembuatan perintah @font-face.
Mengatasi keterbatasan dukungan format Font
Seperti yang telah saya bahas di awal tutorial ini, web browser IE 8 kebawah dan beberapa versi safari web browser tidak mendukung format font TTF. Lalu bagaimana cara mengakalinya?
Untuk keperluan ini, kita ‘terpaksa’ membuat kode CSS dengan menulis dan menggunakan semua format font yang ada. Berikut adalah perubahan kode CSS yang diperlukan untuk hal ini:
|
1
2
3
4
5
6
7
8
|
@font-face { font-family: 'Font Digital'; src: url('digital-7_2-webfont.eot'); src: url('digital-7_2-webfont.eot?#iefix') format('embedded-opentype'), url('digital-7_2-webfont.woff') format('woff'), url('digital-7_2-webfont.ttf') format('truetype'), url('digital-7_2-webfont.svg') format('svg');} |
Dapat dilihat dari kode diatas, saya menggunakan ke-4 format font untuk font DIGITAL-7_2. Untuk keperluan tersebut, saya harus menkonversi format font DIGITAL-7_2.TFF menjadi format lain dan menempatkannya di dalam folder yang sama.
Untuk menkonversi berbagai format font ini, anda bisa menggunakan aplikasi dari http://www.fontsquirrel.com/tools/webfont-generator.
Pembahasan tentang kode CSS diatas akan kita bahas pada lain kesempatan, namun setidaknya anda bisa memahami mekanisme yang digunakan.
Dalam tutorial belajar CSS kali ini kita telah mempelajari Cara Menggunakan Font External dengan CSS. Selain dengan cara diatas, terdapat cara yang lebih mudah dan populer digunakan saat ini, yakni menggunakan font external yang disediakan oleh Google Font. Kita akan membahasnya dalam tutorial selanjutnya.
sumber : http://www.duniailkom.com/tutorial-belajar-css-cara-menggunakan-font-external-dengan-css-font-face/
Ahmad's blog 