Шрифт где-то работает, а где-то нет

144

27 июня 2022, 18:20

Подключаю шрифты следующим образом:

@font-face {
  font-family: "Gilroy";
  font-display: swap;
  src: url("../fonts/Gilroy-800.woff") format("woff"), url("../fonts/Gilroy-800.woff2") format("woff2"), url("../fonts/Gilroy-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  font-display: swap;
  src: url("../fonts/Gilroy-300.woff") format("woff"), url("../fonts/Gilroy-300.woff2") format("woff2"), url("../fonts/Gilroy-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

На локальной машине, хостинге и телефоне всё нормально. На двух ноутбуках (в разных браузерах) 800 шрифт просто пропадает и текста как будто нет, то есть выделяется прямоугольная область и все. До загрузки шрифта текст отображается в стандартном шрифте, после загрузки текст исчезает. Пробовал конвертировать шрифты на разных сервисах, менять название, толщину, но не помогает. Другие шрифты подключаются корректно, но нужен именно этот.

Что делать?

Проблема оказалась в файле шрифта, просто скачал из другого источника и перегнал в разные форматы и везде заработало.

Answer 1

Я думаю, не хватает форматов для шрифта. Вот пример подключения Gilroy с разными форматами, рабочий, попробуйте.

  @font-face {
  font-family: "Gilroy";
  src: url("../fonts/gilroy/Gilroy-Regular.eot");
  src: url("../fonts/gilroy/Gilroy-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/gilroy/Gilroy-Regular.woff2") format("woff2"), url("Gilroy-Regular.woff") format("woff"), url("../fonts/gilroy/Gilroy-Regular.ttf") format("truetype"), url("../fonts/gilroy/Gilroy-Regular.svg#Gilroy-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}