Reputation: 2520
In my project it is set scss->css compiling. And I can't pick up my custom fonts from the scss folder. Here's my folder structure for a better understanding.
| scss/
|-- basics/
|--_fonts.scss
|-- fonts/
|-- lineto-circular-book.woff
|-- lineto-circular-medium.woff
| www
|-- lib/
|-- ionic/
|-- css/
|-- fonts/
That's how the _fonts.scss looks like:
@charset "UTF-8";
@font-face {
font-family: 'Circular-Medium';
src: url('fonts/lineto-circular-medium.woff');
}
@font-face {
font-family: 'Circular-Medium-Book';
src: url('fonts/lineto-circular-book.woff');
}
I'm getting not found status. How can I solve this problem?
Upvotes: 7
Views: 11985
Reputation: 1173
Add the format
value, like this:
@font-face {
font-family: 'Circular-Medium';
src: url('fonts/lineto-circular-medium.woff') format('woff');
}
@font-face {
font-family: 'Circular-Medium-Book';
src: url('fonts/lineto-circular-book.woff') format('woff');
}
Upvotes: 2
Reputation: 7654
First, move the fonts/ folder into the www/ folder, so it looks like this.
| scss/
|-- basics/
|--_fonts.scss
| www
|-- fonts/
|-- lineto-circular-book.woff
|-- lineto-circular-medium.woff
Then, if you aren't minifying the resources, then the paths might be off by one level. This should fix the references.
@font-face {
font-family: 'Circular-Medium';
src: url('../fonts/lineto-circular-medium.woff');
}
@font-face {
font-family: 'Circular-Medium-Book';
src: url('../fonts/lineto-circular-book.woff');
}
Upvotes: 10