Проблема подключения шрифта в SASS?

Question

[Pavel Spirin]

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

файл _mixins/font-face.sass

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false )
	@font-face
		font-family: $font-family
		font-weight: $weight
		font-style: $style

		@if $asset-pipeline == true
			src: font-url('#{$file-path}.eot')
			src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), font-url('#{$file-path}.woff') format('woff'), 
   font-url('#{$file-path}.ttf') format('truetype'), font-url('#{$file-path}.svg##{$font-family}') format('svg')
		@else
			src: url('#{$file-path}.eot')
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), url('#{$file-path}.woff') format('woff'), url('#{$file-path}.ttf') format('truetype'), url('#{$file-path}.svg##{$font-family}') format('svg')

файл _fonts.sass

@import "_mixins/font-face"

+font-face("raleway-ex", "../fonts/RalewayRegular/RalewayRegular")
+font-face("raleway-ex", "../fonts/RalewayBold/RalewayBold", bold)
+font-face("raleway-ex", "../fonts/RalewayExtraBold/RalewayExtraBold", 800)
+font-face("raleway-ex", "../fonts/RalewayLight/RalewayLight", 300)
+font-face("raleway-ex", "../fonts/RalewaySemiBold/RalewaySemiBold", 600)
+font-face("raleway-ex", "../fonts/RalewayThin/RalewayThin", 100)
+font-face("firasans-ex", "../fonts/FiraSansRegular/FiraSansRegular")

файл _vars.sass

// Fonts
$default-font: "raleway-ex", sans-serif

файл main.sass, который компилится в main.min.css

@import "fonts"
@import "libs"
@import "vars"

body
	font-family:  $default-font

По идее все должно сработать, но не пашет. В браузере шрифт стоит который указал, но выводится стандартный.

Делал в main.sass просто конструкцию:

@font-face
    font-family: font
    src: url(../fonts/RalewayRegular/RalewayRegular.ttf)

body
    font-family:  font

Работает. Но это не дело, нужно чтобы через тот способ работало.
В чем может быть проблема?

Comments

[Александр Лысенко]

Консоль хрома не ругается на отсутствующий файл?

[Pavel Spirin]

AlexanderZe:
В консоли только вот что:


я вообще отключил fontawesome, консоль теперь вообще чиста, но результат тот-же.

[Pavel Spirin]

Вроде нашел решение, но не знаю на сколько хорошо оно будет работать.

В миксине font-face был такой код (рис 1)
почему-то второй src компилировался как src-src: url (рис 2)
(рис 1)
(рис 2)

Исправил миксин на вот такой: (рис 3)

компилированный он получился такой, и шрифт запахал, правда не знаю на сколько это здравое решение, и будет ли теперь где-то некорректно отображаться шрифт. (рис 4)
(рис 3)
(рис 4)

Если у кого-то будет подобная проблема, можете так сделать.

[Pavel Spirin]

Блин, картинками залить было не лучшим вариантом, ну думаю поняли.

[Александр Лысенко]

Pavel Spirin:
1) Вы проверили? В конечном css пути отображаются корректно?
2) Заданные пути точно ведут к шрифту?
3) Вы пытались подключить шрифт в обход sass напрямую в css?
4) Ваша версия шрифта поддерживает кириллицу?

[Pavel Spirin]

1) Проверил, редактор сам путь к файлу показывал, значит правильно.
2) Да.
3) Нет, не пробовал, но скорее всего получилось бы, ибо даже если напрямую в sass(главном файле) получилось подключить.
4) Да поддерживает.

Answer 1

[Time578]

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) {
	@font-face {
	    font-family: $font-family;
	    font-weight: $weight;
	    font-style: $style;
	    src: url('#{$file-path}.eot');
	    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), url('#{$file-path}.woff') format('woff'), url('#{$file-path}.ttf') format('truetype');
	}
}

Отредактируйте свой mixin таким образом и все заработает