P
P
Pavel Spirin2017-06-02 09:45:03
css
Pavel Spirin, 2017-06-02 09:45:03

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

_fonts.sass file
@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 file
// Fonts
$default-font: "raleway-ex", sans-serif

main.sass file, which compiles to main.min.css
@import "fonts"
@import "libs"
@import "vars"

body
  font-family:  $default-font

In theory, everything should work, but it does not plow. In the browser, the font is the one indicated, but the standard one is displayed.
I made a simple construction in main.sass:
@font-face
    font-family: font
    src: url(../fonts/RalewayRegular/RalewayRegular.ttf)

body
    font-family:  font

Works. But this is not the case, it is necessary that through that method it works.
What could be the problem?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
T
Time578, 2018-01-23
@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');
  }
}

Edit your mixin like this and it will work

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question