CSS で Arial Narrow を使う：font-family スタックと @font-face のコード

1. 基本の font-family 指定（ライセンス不要）

この方法は無料で、ライセンスも不要です。フォント名を指定するだけで、閲覧者のブラウザが自分の端末にインストールされたコピーを使います。

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

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

フォールバックの順番に注目してください。Arial Narrow のない macOS や Linux のブラウザは、まったく無関係な書体ではなく、通常の Arial（またはメトリック互換の代替フォント）にすぐ切り替わります。

2. @font-face の実装（ライセンス取得済みの Web フォント）

すべての閲覧者に同じ表示を見せたいですか？ Monotype の Web ライセンスを購入し、ファイルを WOFF2 に変換して自前でホストし、次のように宣言します。

@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 を指定すると、ファイルのダウンロード中も文字が表示されたままになります。理由は下のよくある質問で説明しています。

3. クロスブラウザのフォールバックスタック

このスタックは、最も近いフォントから最も汎用的なフォントへと並べてあるので、どの OS でも手持ちの最適なフォントが選ばれます。

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

Liberation Sans Narrow は Linux、Helvetica Neue Condensed は Mac（太字のみ。macOS には Condensed Bold と Black しかないため）を受け止め、Arial, sans-serif がそれ以外をカバーします。

4. ブラウザの対応状況

@font-face と font-display は、Chrome・Firefox・Safari・Edge の現行バージョンすべてで対応しています。実際に気にするべきなのはフォント形式だけです。.woff2 をメインの形式にし（ファイルサイズが最小で、現代のブラウザすべてが対応）、.woff のフォールバックは 2016 年ごろより前のブラウザに対応する必要がある場合だけ追加しましょう。