Answer the question
In order to leave comments, you need to log in
Font connection problem in SASS?
I use the assembly of one person on GULP and SASS, I met with the problem that fonts are not connected through the mixin.
Imports checked, work. It seems that everything is the same as that of that person, it works for him, I don’t.
file _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')
@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")
// Fonts
$default-font: "raleway-ex", sans-serif
@import "fonts"
@import "libs"
@import "vars"
body
font-family: $default-font
@font-face
font-family: font
src: url(../fonts/RalewayRegular/RalewayRegular.ttf)
body
font-family: font
Answer the question
In order to leave comments, you need to log in
@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');
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question