Проблема с отображением шрифтов на сайте, как исправить?

Question

[Андрей]

Всем добрый день. Есть купленный лицензионный шрифт. Он используется в фигме и верстке соответственно.
Проблема с которой я столкнулся следующая:
Ширина блока в фигме например 124px
При верстке ширина блока 123.33px

Соответственно шрифт сжимается по горизонтали. Как исправить это?

Шрифт подключаю так

@font-face {
  font-family: CoFo_Sans;
  src: url(../fonts/CoFo_Sans-Regular_1.woff) format('woff');
  font-weight: 400; }

Comments

[Ankhena]

Разные браузеры и Фигма по-разному рендерят шрифты.

Для современных браузеров лучше использовать woff2

[imko]

А шрифт как сжимается по горизонтали? Ты буквы скейлишь под размер блока что и? 0_о

[Андрей]

imko, нет не скейлю. Есть прототип - сравниваем и получается, что часть слов идет некорректно. Если бы все отличалось на одни единицы вопрос не возник бы.

[Андрей]

Ankhena, Это и так понятно. К следующему комментарию прицепил скрин. Посмотрите пожалуйста.

[Lynn «Кофеман»]

А почему разница в 0.67px это проблема?

Надо просто осознать что рендеринг шрифтов это немножко «магия» в разных операционных системах происходит по разному и нет никакого смысла стремиться к идеальному пиксельному совпадению. Скорее наоборот, если у вас верстка настолько хрупкая что ломается от незначительного изменения шрифта, то значит надо чинить вёрстку.

[Андрей]

Lynn «Кофеман», Да нет. Верстка четко все. Заказчику сложно объяснить, что такое бывает. Он грешил на верстку. Я начал сомневаться и решил спросить тут. Удивило просто то, что у нас есть три версии одного и того же шрифта. Первый купленный первоначально. Второй они исправили хинтинг. Третий взяли прям тупо скачали из ресурсов их основного сайта. Все три шрифта отображаются по разному.