Почему не работает font-face в sass/gulp?

Question

[Mary Солнечная]

Всем привет!
Есть проблема со шрифтами в sass (использую gulp, а точнее - только начала).
Описываю действия:
1) В папке sass создала отдельный файл _font.sass для шрифтов
2) Сделала @import "font" в основной main.sass
3) Забацала туда шрифты

4) Компиляция прошла успешно:


Но возникла проблема: шрифт не работает. Если подключить какую нибудь Tahoma, то все работает. Вроде vera-crouz и kram поддерживают кириллицу. Должно быть так:

А у меня все стандартным браузерским шрифтом.

Подскажите, пожалуйста, в чем ошибка и куда рулить? Заранее всех благодарю за помощь! :)

Comments

[zooks]

Жмите F12 в браузере. Скорее всего неверные пути.

[Mary Солнечная]

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

Answer 1

[Mary Солнечная]

Проблема решена: из-за ошибки синтаксиса компиляция происходила, но происходила неправилньо

@font-face
    font-family: "kram"
         src : url("../fonts/kraM.ttf")

<---ошибка, должно быть на одном уровне

@font-face
    font-family: "kram"
    src : url("../fonts/kraM.ttf")

<---вот так

Answer 2

[Vlad Feninets]

разные браузеры подгружают разные форматы шрифтов.
поэтому нужно генерить все (ttf, otf, eot, woff, woff2, svg).

в этом вам поможет подобный сервис - https://www.web-font-generator.com/

Comments

[Mary Солнечная]

Вы немного не понимаете :) . Я уже давно знаю про генерацию всех форматов и для ишака и для вебкит, но сам факт - шрифты не работают, даже ttf в хроме.

[Mary Солнечная]

Это я для примера залила по одному формату

[Vlad Feninets]

Mary Солнечная: окей, а можно где-то посмотреть сорцы в таком случае?

[Vlad Feninets]

либо киньте скомпиленный css

[Mary Солнечная]

sass:

@font-face
  font-family: "vera-crouz"
    src : url("../fonts/vera-crouz.ttf")

@font-face
  font-family: "kram"
    src : url("../fonts/kraM.ttf")

css (скомпиленный):

@font-face {
  font-family: "vera-crouz";
    font-family-src: url("../fonts/vera-crouz.ttf"); }

@font-face {
  font-family: "kram";
    font-family-src: url("../fonts/kraM.ttf"); }
}

[Vlad Feninets]

а посмотрите во вкладке "Network" в девтулзе - браузер пытается вытащить эти ttf?

[Mary Солнечная]

Видимо нет :(

[Vlad Feninets]

Mary Солнечная: сходите прямо в css и попробуйте сгенерировать оттуда адрес, по которому цсс обращается к шрифту - если все-таки шрифт откроется, то проблема в формате, если нет - проблема в пути к файлу.

[Mary Солнечная]

т.е. в css ручками написать:

@font-face{
  font-family: "vera-crouz";
    src : url("../fonts/vera-crouz.ttf");
}

?

[Mary Солнечная]

Вот что получилось. Я прописала это в css, шрифт заработал

[Vlad Feninets]

Mary Солнечная: допустим открылся у вас цсс по адресу example.com/public/css/index.css

вы смотрите на свой относительный путь
url("../fonts/vera-crouz.ttf");
и пробуете сходить по нему за "фонтом"
http://example.com/public/fonts/vera-crouz.ttf

если откроется - проблема в формате, не откроется - проблема в пути.

[Mary Солнечная]

Если написать localhost:3000/app/fonts/vera-crouz.ttf
то Cannot GET /app/fonts/vera-crouz.ttf

А если localhost:3000/fonts/vera-crouz.ttf,
то файл шрифта скачивается :)

[Mary Солнечная]

что это значит?

[Vlad Feninets]

Mary Солнечная: значит, что проблема в пути к файлу, а не в SASS

[Mary Солнечная]

Пробовала изменить путь:

src : url('/app/fonts/vera-crouz.ttf')

тоже никаких изменений

[Егор Живагин]

Mary Солнечная: тогда уж url('/fonts/vera-crouz.ttf')
Не работает?

[Mary Солнечная]

Не работает, хотя перепробовала разные варианты :(

[Mary Солнечная]

структура у проекта такая:

[Vlad Feninets]

Mary Солнечная: а в dist шрифты есть?

[Mary Солнечная]

там нет вообще ничего

[Vlad Feninets]

ну попробуйте положить шрифты рядом с цсс и указать без "../" - должно заработать

[Mary Солнечная]

в каком смысле положить рядом с цсс? :)

[Mary Солнечная]

Я положила шрифты внутрь css - пока все работает :)

[Mary Солнечная]

А, нифига. При изменении в файле sass все пропадает нафиг, и шрифты тоже(

[Vlad Feninets]

Mary Солнечная: посмотрите, что у вас происходит в gulpfile

[Mary Солнечная]

Все, проблема решена. Спасибо вам!

[Mary Солнечная]

@font-face
font-family: "kram"
src : url("../fonts/kraM.ttf") <---- должен быть на одном уровне