Как подключить шрифт в sass?

Question

[Ever-Green]

Никак не могу найти полноценный пример подключения шрифта в sass, даже если нахожу, он у меня не работает.
Например:

@font-face
    font-family:'Font' // Коала ругает эту строку
    src: url('Font.eot')
    src: url('Font.eot?#iefix') format('embedded-opentype'),
        url('Font.woff2') format('woff2'), // И эту
        url('Font.woff') format('woff'),
        url('Font.ttf') format('truetype'),
        url('Font.svg#SF UI Display Bold') format('svg')
    font-weight: 700
    font-style: normal
    font-stretch: normal
    unicode-range: U+0020-00FE

Многие показывают это в качестве примера, но лично у меня он не работает.
Подкиньте готовый пример, пожалуйста

Answer 1

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

Вот так у меня работает:

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

все объявления шрифтов должны быть друг за другом, + без запятых
тоже была проблема, я задавала здесь этот вопрос:
Тыц

Comments

[Ever-Green]

Рано я ответил, этот пример тоже не пашет у меня....

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

вы можете отменить ответ) но в общем суть та же - была та же проблема, но все из-за расположения

[Ever-Green]

Mary Солнечная: Я уже все вариации попробовал, ничего не работает(( И на оф. источниках 0 инфы, везде только scss

[Nikolassera]

Ever-Green, Установить, если не установлено, или же переустановить Ruby пробовали??? Sass на ruby написан, если нет на ПК, или, возможно версия старая, элементарные задачи на sass хромают на обе ноги.

[Александр Навальный]

Я вставил себе проверить твой код. У меня тоже заругался и я нашел проблему:
font-family:'Font' - нужно было пробел воткнуть после двоеточия и все сразу заработало.

Answer 2

[Максим]

@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')
		@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')