Почему могут не подгружаться шрифты?

Question

[romaro]

У меня в CSS:

@font-face {
  font-family: "Overpass Mono", monospace;
  src: url(fonts/637c2fa6a13ffa8d18f0.woff2) format("woff2"), url(fonts/ba947e367d9bfe844d5d.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.p-main ._slogan span {
  color: #9747ff;
  font-family: "Overpass Mono", monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 70px;
}

На одних устройствах шрифт подгружается, на других вместо Overpass Mono отображается дефолтный monospace.

Шрифты лежат в директории /fonts и я проверил (через логи Nginx), что браузер даже не пробует обратиться к этой директории, чтобы загрузить шрифт а сразу устанавливает дефолт.

Как диагностировать проблему?

Comments

[ThunderCat]

Шрифты лежат в директории /fonts

url(fonts/637c2fa6a13ffa8d18f0.woff2)

...

Answer 1

[romaro]

Причина все-таки в некорректном объявлении @font-face. Вместо:
font-family: "Overpass Mono", monospace;

Нужно указать одно семейство:
font-family: "Overpass Mono";

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

P.S. Мой вариант без ведущего слеша (так генерирует вебпак по умолчанию), работает исправно.

Comments

[Антон Литвиненко]

шрифты проверяются слева направо, что первый вариант, что второй должен сначала найти шрифт Overpass Mono

[romaro]

Вроде бы это когда мы объявляем шрифт для селектора. А у меня в самом правиле @font-face получилось, что объявлено не семейство Overpass Mono, а '"Overpass Mono", monospace'. То есть он наверное все, что до ; преобразовал в строку и посчитал это названием семейства.

Затем, когда я сослался на Overpass Mono, браузер его просто не нашел, т.к. не было ссылок на загрузку шрифтов с таким семейством и применил второе по приоритету.

Answer 2

[wadowad]

В путях слэша не хватает:

src: url(/fonts/637c2fa6a13ffa8d18f0.woff2) format("woff2"), url(/fonts/ba947e367d9bfe844d5d.woff) format("woff");

Подробнее https://developer.mozilla.org/ru/docs/Web/CSS/url