Arial Narrow в CSS: стек 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;
}

Обратите внимание на порядок запасных шрифтов: браузеры на macOS и Linux без Arial Narrow перейдут сразу к обычному Arial (или его метрически совместимой замене), а не к совершенно постороннему шрифту.

2. Подключение через @font-face (лицензионный веб-шрифт)

Хотите, чтобы все посетители видели одно и то же? Купите веб-лицензию Monotype, переведите файлы в 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. Кроссбраузерный стек запасных шрифтов

Этот стек упорядочивает шрифты от самого похожего к самому общему, чтобы каждая операционная система получила лучший доступный ей вариант:

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 года.