CODEWITHSUNDEEP
csssass
Rainier laan
Rainier laan

Reputation: 1130

SASS - font face not working with right path

I recently started using SASS and I want to import 2 fonts, Montserrat and Open Sans. Normally in CSS, you do something along the lines of

@font-face {
    font-family: 'Montserrat'
    src: url('../../webfonts/Montserrat.ttf');
}

And it works just fine. If my file structure looks like the following

CSS
   Base
     typography.sass
Webfonts
   Montserrat.ttf

But I put the following code in my SASS file.

@font-face
  font-family: 'Montserrat'
  src: url("../../webfonts/Montserrat.ttf")

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

But the font's don't load. I tried similar question on this topic but none of them were succesfull for me. What could this problem be?

Upvotes: 0

Views: 358

Answers (1)

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

If your folder name is Webfonts and you reference it with url("../../webfonts/..., then you have your answer there (lowercase vs. uppercase w/W).

Also, your code example results in a double src attribute. I don't know if it is related to the problem.

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

The code above compiles to this, where the src overwrites itself for each time:

@font-face {
  font-family: "Open Sans";
  src: url("../../webfonts/OpenSans.ttf");
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}

The src attribute should only be set once, but with multiple values instead. I think this will work in Sass:

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

Upvotes: 1

Related Questions