Почему не подключается шрифт font-face?

Question

[ravlex]

Подключаю шрифт таким образом, но он не подключается. Почему так?

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

Comments

[HamSter]

Александр А: пути, обычно вся проблема в них!

Answer 1

[artgranat]

Сомнительные советы.
Не достаточно подключить один woff. Для корректной работы шрифта во всех браузерах и на всех устройствах - нужны eot, woff2, ttf

С синтаксисом у вас все в порядке. Все возможные причины, по которым шрифт мог не подключиться:

1. Неверно указан путь к папке с шрифтами(../). Здесь может быть несколько точек, может одна, может не быть вовсе, в зависимости от положения папки.
2. Не корректные шрифты. Некоторые генераторы конвертируют шрифты с ошибками
3. Банально не положили шрифты в папку fonts
4. Банально не прописали свойство font-family:"Open Sans" нужному классу

Не уверен на счет вложенности fonts/OpenSans/OpenSans-Regular. Лучше все шрифты класть в папку fonts без создания доп. папок в ней.

Советую использовать https://ffont.ru/fonts/favorites
Вместе с шрифтом скачивается готовый css код. Шрифты точно корректные, проверялись

Answer 2

[VsWeb]

Если не забыл указать в body(font-family), и шрифты находятся в корневом каталоге, попробуй убрать .. / и кавычки убери.

Comments

[VsWeb]

почитай про относительные а абсолютные ссылки, браузер мог неправильно преобразовать относительные ссылки