Чиню шрифт

На сайте клиента вместо & вдруг появился ₪. Виноват оказался шрифт. Вот как я нашёл причину и выкатил исправление за один день.

6 июня 2026 г.Guide1мин чтения

История начинается как обычно: старый сайт, WordPress, пересобранный уже раз 20 ещё большим числом разработчиков. Сегодня клиент обнаружил, что символ & заменяется на ₪. К этому моменту я уже был знаком с описаниями шрифтов и диапазонами Unicode

Вот пример, который определяет семейство шрифтов “Practica” и где его искать. Но обратите внимание на диапазон — он включает только иврит.

@font-face {
  font-family: "Practica";
  src: url("/fonts/PracticaNarrow-Regular.woff2") format("woff2");
  font-weight: 700;

  unicode-range: U+0590-U+05FF /* << Это странно */
}

PracticaNarrow-Regular.woff2

Tom & Jerry, R&D, AT&T, Ben & Jerry's, rock & roll.

Ни один амперсанд не пострадал. Пока.

Первым делом я отключил шрифт:

p {
        font-family:"Practica";
        font-family:unset;
}

На этот раз & появился — проблема действительно в шрифте.

Тогда, по наитию, я зашёл во вкладку network, отфильтровал по шрифтам, идущим из ‘themes’, и скачал виновника — PracticaNarrow-Regular.woff2. После быстрого гугления я нашёл сайт, который позволяет просмотреть шрифт:

viewing the font on ontdrop.info

Чёрт, и что теперь? Я могу переопределить описание шрифта для амперсанда вот так:

@font-face {
  font-family: "Practica";
  src: url("/fonts/Practica.woff2") format("woff2");
}
@font-face {
  font-family: "Practica";
  src: url("/fonts/Practica-Regular.woff2") format("woff2");
  unicode-range: U+20AA /* << Это странно */
}

Вот и всё. & вернулся, исправление ушло в прод в тот же день и прошло все тесты, а с дизайнером мне так и не пришлось разговаривать. В тот день починились две вещи: шрифт и моё настроение.

Смотрите также: как grayscale-фильтр сломал все мои попапы, ещё один CSS-баг на ещё одном старом сайте на WordPress.

Комментарии