Web Fonts

Sejauh ini font yang kita pakai terbatas pada yang terpasang di perangkat pembaca. Web fonts menghilangkan batasan itu: file font dikirim bersama halaman, sehingga desain tampil konsisten di semua perangkat. Aturan @font-face adalah mekanismenya — kita memberi nama pada sebuah file font, lalu memakai nama tersebut di font-family seperti biasa. Chapter ini membahas sintaks lengkapnya, opsi font-display yang mengatur perilaku saat font belum siap, serta alur praktis memakai layanan seperti Google Fonts.

Anotasi @font-face #

Anotasi @font-face diletakkan di dalam CSS (bukan di dalam selector) dan minimal menyatakan dua hal: nama keluarga yang kita pilih dan lokasi filenya:

@font-face {
  font-family: "Naskah Buku";
  src: url("fonts/naskah-buku-400.woff2") format("woff2"),
       url("fonts/naskah-buku-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: "Naskah Buku", Georgia, serif;
}

Mari kita telaah baris demi baris:

1. Baris 2 (font-family: "Naskah Buku";): nama ini bukan font yang ada di sistem — kita yang menamainya, dan nama inilah yang dipakai aturan berikutnya.
2. Baris 3–4 (src: ... format(...)): daftar sumber dicoba berurutan; browser memuat woff2 bila mengenal format tersebut (semua browser utama modern), dan woff hanya sebagai cadangan. Format woff2 memberi kompresi terbaik, jadi satu format ini lazimnya cukup untuk proyek baru.
3. Baris 5–6 (font-weight dan font-style): menyatakan bahwa file ini adalah varian bobot 400 tegak. Bila desain membutuhkan bobot 700, kita mendaftarkan file berbeda dengan deklarasi @font-face lagi, atau menuliskan rentang seperti font-weight: 100 700 untuk file variable font.
4. Baris 7 (font-display: swap;): kebijakan tampil selama font belum selesai dimuat — kita bedah di bagian berikutnya.
5. Baris 10 (font-family: "Naskah Buku", Georgia, serif;): stack tetap disertai cadangan; bila file font gagal dimuat, teks tetap tampil dalam Georgia.

font-display: Mengatur Periode Menunggu #

Selama file font sedang diunduh, browser harus memutuskan: menampilkan teks dengan font cadangan dahulu, atau menyembunyikan teksnya sejenak. Kebijakan ini dikontrol font-display dengan tiga nilai utama:

Nilai swap adalah pilihan standar untuk teks isi karena pembaca tidak pernah kehilangan konten, dan biasa dipadukan dengan preload di <head> untuk font utama: <link rel="preload" href="..." as="font" type="font/woff2" crossorigin>. Nilai optional menarik untuk halaman yang mengutamakan kestabilan layout, karena teks langsung tampil final tanpa pergantian font.

Alur Memakai Google Fonts #

Layanan seperti Google Fonts menyederhanakan seluruh proses di atas. Alurnya: pilih keluarga huruf dan bobot yang dibutuhkan di situsnya, salin potongan <link> yang disediakan ke <head> halaman, lalu sebutkan nama font tersebut di font-family lengkap dengan cadangan. Layanan tersebut mengurus @font-face, pemilihan format, dan pembagian file secara otomatis — kita hanya perlu memastikan stack cadangan tetap tertulis dan jumlah bobot yang diminta tetap hemat.

Demo chapter ini menunjukkan sisi ketahanan mekanisme tersebut. Demo mendeklarasikan @font-face bernama "Naskah Fiktif" yang sumbernya sengaja tidak tersedia, sehingga browser melompat ke font berikutnya dalam stack — Georgia — dan halaman tetap tampil utuh.

Hasil di Browser:

Judul dan paragraf demo memakai stack "Naskah Fiktif", Georgia, serif.
Karena file "Naskah Fiktif" tidak tersedia, browser menggambar teksnya
dengan Georgia. Nilai computed font-family tercatat persis
"Naskah Fiktif", Georgia, serif — daftar yang kita tulis, bukan font
yang benar-benar dipakai. Judul tercatat font-size 24px dan
font-weight 700; paragraf tercatat 16px.

Perhatikan fakta terakhir di atas: computed font-family tetap menampilkan daftar lengkap meski font pertamanya tidak ada, sebagaimana kita amati pada Chapter Font Family. Selanjutnya, Variable Fonts memperluas @font-face ini dengan satu file untuk semua bobot.