Некорректное отображение стиля шрифта Open Sans "Sofia Sans"

Question

Пытался добавить на сайт шрифт SofiaSans regular, но заметил что некорректно отображаются некоторые символы, если в теге html установлено lang="ru", но при lang="en" все работает корректно. Пытался исправить ситуацию с помощью font-feature-settings: "ss02" 1;, но ничего не меняется.

Проблема именно в выборе языка. Как-то можно исправить ситуацию? Просто писать lang="en", когда у тебя сайт на русском, только чтобы шрифт работал как надо, как-то неправильно.

На скриншотах показал как это работает

Answer 1

Можете использовать font-feature-settings. Нужно корневому элементу (то-есть <html>) установить CSS свойство font-feature-settings, со значением 'ENG', вот так:

html {
    font-language-override: 'ENG';
}

Тогда иероглифы будут отображаться в соответствии с указанным языком, то-есть в данном случае, английским. Сам font-language-override переопределяет поведение отображения шрифта и работает независимо от атрибута lang в корневом элементе.

@import url(https://fonts.googleapis.com/css?family=Sofia+Sans);

html {
  font-language-override: 'ENG';
}

.sofiasans-regular {
  font-family: 'Sofia Sans', sans-serif;
}

<html lang="ru">

<body>
  <div class="sofiasans-regular">12133 Лл А ываыа ывВ</div>
</body>

</html>

Answer 2

Попробуйте отключить локализованные формы:

<html lang="ru">

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sofia+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <style>
    .Sofia-Sans {
      font-family: 'Sofia Sans', sans-serif;
      font-feature-settings: 'locl' 0;
    }
  </style>
  <div class="Sofia-Sans">12133 Лл А ываыа ывВ</div>
</body>

</html>

БЛОГ НА HUSL

Некорректное отображение стиля шрифта Open Sans "Sofia Sans"

Ответы (2 шт):