Arial Narrow di CSS: Stack font-family & Kode @font-face

1. Pemakaian Dasar font-family (Tanpa Lisensi)

Cara ini gratis dan tidak butuh lisensi. Anda hanya menyebut nama font, lalu browser setiap pengunjung memakai salinan yang terpasang di perangkatnya jika ada:

.text-arial-narrow {
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.text-arial-narrow-bold {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
}

Perhatikan urutan fallback-nya: browser di macOS atau Linux yang tidak punya Arial Narrow akan langsung beralih ke Arial standar (atau pengganti yang metriknya kompatibel), bukan ke jenis huruf yang sama sekali berbeda.

2. Implementasi @font-face (Web Font Berlisensi)

Ingin semua pengunjung melihat tampilan yang sama? Beli lisensi web dari Monotype, konversi filenya ke WOFF2, host sendiri, lalu deklarasikan seperti ini:

@font-face {
  font-family: 'Arial Narrow';
  src: url('/fonts/ArialNarrow.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arial Narrow';
  src: url('/fonts/ArialNarrow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

font-display: swap menjaga teks tetap terlihat selama file diunduh. Alasannya dijelaskan di FAQ di bawah.

3. Stack Fallback Lintas Browser

Stack ini mengurutkan font dari yang paling mirip hingga yang paling umum, sehingga setiap sistem operasi mendapat font terbaik yang dimilikinya:

font-family: 'Arial Narrow', 'Liberation Sans Narrow',
             'Helvetica Neue Condensed', Arial, sans-serif;

Liberation Sans Narrow menangkap Linux, Helvetica Neue Condensed menangkap Mac (hanya untuk teks tebal, karena macOS hanya menyertakan ketebalan Condensed Bold dan Black), dan Arial, sans-serif mencakup sisanya.

4. Dukungan Browser

@font-face dan font-display didukung semua versi terbaru Chrome, Firefox, Safari, dan Edge. Satu-satunya hal praktis yang perlu diperhatikan adalah format font: sajikan .woff2 sebagai format utama (ukuran file terkecil dan didukung semua browser modern), dengan fallback .woff hanya jika Anda masih harus mendukung browser dari sebelum sekitar tahun 2016.