Menggunakan @font-face

Yang dilakukan @font-face kepada file font pada dasarnya hanyalah memanggil file tersebut ke halaman web untuk diberi nama sesuai dengan nama yang ditentukan oleh pengguna agar bisa digunakan di dalam CSS font sebagai font-family:

@font-face {
  font-family:'Nama Font';
  src:url('files/my-font.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

Fungsi masing-masing kode di atas adalah:

1. font-family berfungsi untuk menentukan nama font yang datang dari my-font.woff
2. src digunakan untuk menyatakan di mana font tersebut disimpan
3. format digunakan untuk menentukan format font
4. font-style dan font-weight tidak wajib. Bisa dibuang jika memang tidak diperlukan. Dan akan menjadi wajib untuk alasan yang akan Saya jelaskan nanti.

@font-face lebih baik dinyatakan di bagian paling awal CSS untuk memastikan agar file font bisa diunduh sesegera mungkin. Setelah itu, nama font bisa dinyatakan ke elemen mana saja yang Anda inginkan dengan nama font yang telah dinyatakan pada font-family:

@font-face {
  font-family:'Nama Font';
  src:url('files/my-font.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

body {font-family:"Nama Font"}

Jangan lupa berikan beberapa font fallback dengan nama-nama font yang sudah biasa ada pada komputer Anda untuk berjaga-jaga agar jika font eksternal tersebut gagal dimuat atau terlalu lama dimuat atau belum berhasil dimuat, maka tampilannya tidak akan hanya jatuh ke font Serif. Pastikan tampilan font lokal tersebut mirip dengan font eksternal yang ingin ditampilkan. Inilah fungsi utama dari CSS Font Stack:

body {font-family:"Nama Font","Arial Narrow",Arial,Sans-Serif}

font-style dan font-weight

Bagi para pengguna yang baru pertama kali menggunakan @font-face mungkin akan merasa baik-baik saja dengan tampilan seperti ini. Namun tidak untuk para tipografer dan juga orang-orang yang sudah terbiasa melihat berbagai jenis font:

Font italic tampak terlalu miring.

Font dengan model italic akan tampak terlalu miring. Bahkan dalam beberapa peramban, font dengan gaya bold juga akan tampak terlalu tebal. Ini adalah contoh font Ubuntu Regular yang Saya lihat melalui peramban Safari di Windows:

Ubuntu, Safari Windows.

Menurut Saya tampilan masing-masing gaya font di atas kurang stabil dan tidak menarik. Itu disebabkan karena kita hanya memuat satu model font saja yaitu font regular. Ketika kita hanya memuat satu model font saja, maka model font yang lain seperti bold, italic dan bold-italic akan disesuaikan oleh peramban. Dan hasilnya tentu saja tidak akan sebagus model font asli dari keluarga tersebut. Para pembuat font yang baik setidaknya akan membuat minimal empat model font yaitu regular, italic, bold dan bold-italic. Itulah sebabnya mengapa kita harus menggunakan keempat-empatnya:

Gaya font Ubuntu.

Satu Nama Font dengan Empat Gaya

Memanggil file font dengan jumlah gaya minimal empat buah tentu saja memiliki cara tersendiri. Setiap @font-face harus tetap diberi satu nama font yang sama namun harus tetap bisa menampilkan masing-masing font eksternal dengan benar berdasarkan gayanya. Dan sekarang adalah saatnya kita menggunakan font-style dan font-weight dalam @font-face untuk menangani setiap gaya font.

Pertama-tama, yang terpenting adalah pastikan setiap font disimpan dengan nama yang mudah dan jelas berdasarkan gayanya:

Contoh pemberian nama file pada setiap font berdasarkan gayanya.

Setelah semua file diberi nama dengan baik, maka tugas selanjutnya adalah memanggil font, kemudian memberi masing-masing @font-face dengan font-family yang sama. Perbedaan setiap gaya hanya ditentukan oleh font-style dan font-weight:

/* Regular */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-regular.woff') format('woff');
  font-style:normal;
  font-weight:normal;
}

/* Italic */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-italic.woff') format('woff');
  font-style:italic;
  font-weight:normal;
}

/* Bold */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-bold.woff') format('woff');
  font-style:normal;
  font-weight:bold;
}

/* Bold Italic */
@font-face {
  font-family:'Ubuntu';
  src:url('ubuntu-bolditalic.woff') format('woff');
  font-style:italic;
  font-weight:bold;
}

Dan ini adalah tampilan font setelah keempat gaya dimuat:

Tampilan masing-masing gaya font sudah tampak ideal sekarang.

Pengguna Google Fonts

Jika Anda adalah pengguna layanan Google Fonts, pada halaman Quick Use sudah terlihat dengan jelas beberapa pilihan gaya font. Ambil minimal empat gaya seperti ini untuk memastikan agar tampilan teks terlihat ideal satu sama lain:

Pilih gaya normal/regular, italic, bold dan bold-italic (jika ada).

Gunakan @font-face Seperlunya

Font ideal paling minimal setidaknya hanya terdiri dari dua buah tipe font dengan satu gaya pada font pertama untuk tampilan judul dan empat gaya pada font ke dua untuk tampilan teks utama (5 @font-face).

Sintaks Aman @font-face

Fontspring menyarankan kita untuk memuat beberapa font dengan tipe file tertentu secara bersamaan untuk memastikan agar @font-face bisa bekerja pada hampir semua peramban dan perangkat:

@font-face {
  font-family:'MyWebFont';
  src:url('files/my-font.eot'); /* IE9 Compat Modes */
  src:url('files/my-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('files/my-font.woff') format('woff'), /* Modern Browsers */
      url('files/my-font.ttf') format('truetype'), /* Safari, Android, iOS */
      url('files/my-font.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-style:normal;
  font-weight:normal;
}

Meski hasilnya akan lebih stabil, namun tentu saja itu akan membuat file yang dipanggil menjadi bertambah banyak. Jika target pembaca Anda hanya sebatas pada pemakai desktop, maka file font dengan format WOFF saja sudah cukup dan bisa lolos pada semua peramban modern.

Catatan Tambahan

Saat praktek, biasanya Anda akan menemui beberapa masalah seperti ini:

1. CSS @font-face Not Working with Firefox
2. CSS @font-face, Fungsi src:local('#')

Lisensi Font

Font merupakan karya seni dan itu bisa saja masuk ke dalam kategori komersial (seperti halnya komik), atau terlarang untuk ditampilkan ke dalam media berupa web, sehingga kita harus tetap berhati-hati dalam menampilkan font eksternal ke dalam halaman web. Untuk sumber font berlisensi gratis yang bisa digunakan dengan aman baik secara pribadi maupun komersial bisa dengan mudah Anda dapatkan di Google Fonts dan FontSquirrel. Beberapa ada juga yang dibuat di Deviant Art. Mungkin itu font buatan para hobiis.