CODEWITHSUNDEEP
angularsassfonts
vinayofficial
vinayofficial

Reputation: 482

Angular 9 error while adding fonts in scss file

I am developing an Angular 9 project for which I created an icon font library from icomoon and downloaded the font and scss files to add icons in the project.

Now when I am importing the project_icon.scss file in my main.scss file, I am getting Angular Failed to compile error.

Here below are my codes where I am getting the errors:

styles.scss

@import 'project_icons/project_icons.scss';

project_icon.scss

icomoon default code:

@font-face {
  font-family: '#{$icomoon-font-family}';
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?2y7g5o');
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?2y7g5o#iefix') format('embedded-opentype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?2y7g5o') format('truetype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?2y7g5o') format('woff'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?2y7g5o##{$icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

then, I simplified it without variables:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?2y7g5o');
  src:  url('fonts/icomoon.eot?2y7g5o#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?2y7g5o') format('truetype'),
        url('fonts/icomoon.woff?2y7g5o') format('woff'),
        url('fonts/icomoon.svg?2y7g5o') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

But still getting error.

Please refer the image to see the error:

Thanks for the attention and help :)

Upvotes: 0

Views: 1337

Answers (1)

Hernán Giraldo
Hernán Giraldo

Reputation: 146

Maybe it's too late and you solved your problem, but I saw that this question doesn't have and answer and maybe this response could help someone in the future.

To solve this, I just put the font inside the assets folder and add the references like this:

 @font-face {
  font-family: 'icomoon';
  src:  url('assets/icomoon/icomoon.eot?tsdoda');
  src:  url('assets/icomoon/icomoon.eot?tsdoda#iefix') format('embedded-opentype'),
  url('assets/icomoon/icomoon.ttf?tsdoda') format('truetype'),
  url('assets/icomoon/icomoon.woff?tsdoda') format('woff'),
  url('assets/icomoon/icomoon.svg?tsdoda#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Upvotes: 2

Related Questions