Почему некорректно отображается шрифт?

Question

[Николай]

Начертание кириллицы и латиницы отличаются. В чем проблема?

<div class="product-item__name">Комплект Reike Smart fox purple 80,86.92
            </div>

@font-face {
  font-family: "Ubuntu";
  font-weight: 700;
  font-style: normal;
  src: local("Ubuntu");
  src: url("../fonts/ubuntu-bold-webfont.woff2") format("woff2"), url("../fonts/ubuntu-bold-webfont.woff") format("woff"); }

@font-face {
  font-family: "Ubuntu";
  font-weight: 500;
  font-style: normal;
  src: local("Ubuntu");
  src: url("../fonts/ubuntu-medium-webfont.woff2") format("woff2"), url("../fonts/ubuntu-medium-webfont.woff") format("woff"); }

@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  font-style: normal;
  src: local("Ubuntu");
  src: url("../fonts/ubuntu-regular-webfont.woff2") format("woff2"), url("../fonts/ubuntu-regular-webfont.woff") format("woff"); }

@font-face {
  font-family: "Ubuntu";
  font-weight: 300;
  font-style: normal;
  src: local("Ubuntu");
  src: url("../fonts/ubuntu-light-webfont.woff2") format("woff2"), url("../fonts/ubuntu-light-webfont.woff") format("woff"); }

Answer 1

[Пащук Илья]

• Убедись что реально шрифт поддерживает латиницу!
  
• Сгенери на https://transfonter.org/
  
• Скачай архив после генерации и проверь там есть отображение если все четко то подключи!
  

Также как вариант подключи c гугл фонт, ну или скачай и проделай все как выше : Здесь

Также не забывай задавать для более четкого отображения :

-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';

Comments

[Николай]

Я качал шрифт с google fonts и из ttf в fontsquirrel сделал woff и woff2. Видимо fontsquirrel как-то некорректно преобразовывал, потому-что через https://transfonter.org/ все работает как надо.
Не мог бы по подробней разъяснить про:

-moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';

Никогда не видел такого..

[Пащук Илья]

Николай, Бро font-smoothing и text-rendering эти свойства влият на рендеринг шрифтов верней задают вариацию как производить рендериг браузеру, вот почитай https://habr.com/post/122269/ и https://wp-mix.com/font-smoothing-chrome-firefox/, если не понимаешь то ты просто примени это свойство и в девелоп тулс в браузерее попробуй отключить и вновь включить это свойство и ты все сам увидишь!
Применять глобально вот так:

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

А вот это свойство font-feature-settings, используется реже, но иногда взависимости от шрифта стоит иметь на уме что оно есть, почитай: https://xsltdev.ru/css/font-feature-settings/

Answer 2

[азаза]

шрифт не поддерживает кирилицу
автоматом подставляет скорее Arial

Comments

[Пащук Илья]

Соглашусь возможно данная версия шрифта без кирилици, но а вобще семейство хорошо даже очень отображает кирилицу Ubuntu

[азаза]

font face generator в помощь

[Пащук Илья]

Да я бы не заморачивался просто напрямую с гугл фонтс подключить и все!
Ну если уж надо сгенерить то я юзаю https://transfonter.org/ как по мне очень хорошо генерит!

[азаза]

можно и так
но
шрифты извне - не стабильная хуйня
лучше вообще делать if else
если нету доступа к гуглю, то загружать с папки

[Serj-One]

Andrey, И часто "нету доступа к гуглю"?

Answer 3

[Никита Черемисин]

Шрифт с кириллицей скачай например тут: https://webfonts.pro/templates/fonts/download/Ubun...
Думаю проблема решится.