Как подключить локальный .otf шрифт?

Question

[dhat]

Использую скачанный шрифт Proxima Nova Regular. Пытаюсь его подключить таким способом:

@font-face {
font-family: Proxima Nova Regular;
src: url("../fonts/Proxima Nova Regular.otf") format("opentype");
}
body {
    font-family: Proxima Nova Regular;
}

Этот код в layout.css.

Подозреваю, моя проблема в неверном пути к шрифту (потому что попробовал на другом простом проекте гле все файлы в одной папке - там работает). Вот моя структура - imgur.com/a/P8a2x

Перепробовал всевозможные варианты:
"../fonts/Proxima Nova Regular.otf"
"fonts/Proxima Nova Regular.otf"
"./fonts/Proxima Nova Regular.otf"

Ничего не работает.

апд: В порядке эксперимента, чтоб исключить ошибку с неверно указанным путем к файлу, я скопировал файл шрифта в разные места проекта (т.к. не уверен какой из файлов css делает первоначальный импорт). В ИТОГЕ НЕ РАБОТАЕТ НИГДЕ. ПОлучается, проблема НЕ в указанном пути к файлу!

Может проблема в Gulp?

Comments

[Иван Соломенников]

../ - подняться на один уровень выше, то есть выйти из папки css и зайти в папку fonts. У вас где шрифты лежат?

Answer 1

[SagePtr]

А если экранировать пробелы в имени файла и имени шрифта?

@font-face {
font-family: "Proxima Nova Regular";
src: url("../fonts/Proxima+Nova+Regular.otf") format("opentype");
}
body {
    font-family: "Proxima Nova Regular";
}

Плюс, судя по скрину, там вложенность ещё глубже:
../../fonts/Proxima Nova Regular.otf

Comments

[dhat]

Не работает :( Но в другом проекте работает и без экранирования.

[SagePtr]

dhat: дополнил ответ

[dhat]

SagePtr: попробовал и так, не работает. Пооблема похоже не в пути, я обновил пост.

[SagePtr]

dhat: а браузер на вкладке Network что выводит?

[dhat]

SagePtr: выводит содержимое финального styles.css, который мне собирает Gulp. В том числе и с указанием пути к шрифту. Вот я подробнее описал - Влияют ли настройки Gulp на подключение локальных шрифтов?

Не знаю что с этой темой делать - удалять?

[dhat]

SagePtr: вы правы, выводит ошибку 404 к шрифту. не видит его

Answer 2

[Sergei Nazarenko]

./fonts должно работать или попробуйте без точки /fonts/

Comments

[dhat]

Обновил пост, проблема не в пути походу.

Answer 3

[dhat]

В порядке эксперимента, чтоб исключить ошибку с неверно указанным путем к файлу, я скопировал файл шрифта в разные места проекта (т.к. не уверен какой из файлов css делает первоначальный импорт). В ИТОГЕ НЕ РАБОТАЕТ НИГДЕ. ПОлучается, проблема НЕ в указанном пути к файлу!

Может проблема в Gulp?

Answer 4

[Алексей]

Не ломайте себе голову, укажите путь "от корня", избегайте пробелов и других подобных символов, используйте "инструменты разработчика - сеть".

Comments

[dhat]

Проблема не в пути, дописал пост.