Не работают шрифты, где ошибаюсь (Sass, Gulp)?

Question

[Иван Гордиенко]

Доброго времени суток.

Делаю проект с помощью Gulp. Структура проекта на скриншоте.
Был создан файл font.sass, где добавлен шрифт через @font-face (сейчас написание как на скриншоте, в кавычках, но я пробовал. и в '', и без, и с ../), файл компилируется в fonts.css без проблем. В main.sass через Dmitrijs Balcers 'app/sass/fonts.sass' добавляю шрифты. В main.css они исправно компилируются и добавляются. В index.html в head ставлю путь шрифтам через link. Не работает. Голова загружена глупостями и много работы было, отдых не помогает, найти ошибку не могу. Буду рад помощи, если нужна еще информация - предоставлю.

Comments

[Ankhena]

1. Зачем подключать 3 файла стилей? Их нужно собирать в один.

2. Если пренебречь п.1., то открываете инспектор кода, в нем вкладка Console и смотрите, что у вам с путями.

Answer 1

[Иван Гордиенко]

@import "fonts.sass"
@import "libs.sass"

Именно в этих строках была ошибка, неправильный путь.

Answer 2

[akavato]

@font-face {
    font-family: 'OpenSans Regular';
    font-weight: 400;
    font-display: auto;
    src: local('Open Sans'), url('../fonts/OpenSans/OpenSansRegular.woff') format('woff');
}

url должен быть в кавычках
Для современных браузеров достаточно woff2 и woff
Почему грузится лато в робото?

Comments

[Иван Гордиенко]

url ставил, и в кавычки, и в парные. Дело точно не в этом. С загрузкой шрифтов не понял, что вы имеете в виду?

[akavato]

coresak, я про это. В src стоят разные шрифты.
1. поменять местами линки основного css и шрифтов.
2. Открыть консоль в браузере и посмотреть, что всё ок с путями.

[Иван Гордиенко]

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