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

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 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.

Copy font digital dari folder font Windows

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

<!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>

Tutorial Belajar CSS - Cara Menggunakan Font External @font-face

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:

@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.

Cara Merubah Format Font dari Font Squirrel

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.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

56 Comments

  1. Info Menarik
    13 Jan 15
    • Andre
      14 Jan 15
  2. Heri Afrizal
    20 Apr 15
  3. Heriyanto sirait
    13 May 15
    • Andre
      13 May 15
  4. Heriyanto sirait
    13 May 15
    • Andre
      13 May 15
  5. Raden
    30 May 15
    • Andre
      30 May 15
      • Raden
        01 Jun 15
        • Andre
          02 Jun 15
  6. Raden
    02 Jun 15
    • Andre
      04 Jun 15
  7. Heriyanto sirait
    05 Jun 15
    • Andre
      05 Jun 15
  8. eidlasam
    01 Aug 15
  9. agus rona
    06 Sep 15
    • Andre
      06 Sep 15
      • agus rona
        08 Sep 15
      • Andre
        10 Sep 15
        • agus rona
          15 Sep 15
        • agus rona
          15 Sep 15
        • Andre
          16 Sep 15
    • Andre
      26 Sep 15
  10. jose
    08 Mar 16
  11. Robby
    29 Mar 16
    • Andre
      30 Mar 16
  12. rian
    07 Apr 16
    • Andre
      07 Apr 16
  13. anas
    25 Sep 16
    • Andre
      25 Sep 16
  14. alya
    20 Oct 16
    • Andre
      21 Oct 16
  15. Andri
    13 Jan 17
    • Andre
      14 Jan 17
  16. Alva
    04 May 17
    • Andre
      04 May 17
  17. EGI
    31 Mar 18
    • Andre
      01 Apr 18
  18. Fahri
    01 Jun 18
    • Andre
      01 Jun 18
  19. ReX
    03 Sep 18
    • Andre
      05 Sep 18
  20. TakuZa
    03 Sep 18
    • Andre
      05 Sep 18
  21. Hilman Restu
    26 Mar 19
    • Andre
      26 Mar 19
      • Hilman Restu
        30 Mar 19
  22. Benny
    03 Jul 19
  23. Asep
    09 Oct 22

Add Comment