Connecting fonts in Sass

Question

Connecting fonts in Sass

I have a problem. I have connected all the fonts in fonts.sass (located in the root of the folder app) but they are not visible from the file header.component.sass. I put the fonts themselves in the assets/fonts folder and now I get this error:

Failed to compile.

./src/app/header/header.component.sass
(Emitted value instead of an instance of Error) CssSyntaxError: X:\projects\BranD\src\app\fonts.sass:15:9: Can't resolve '.../assets/fonts/LatoBold/lato-bold.eot' in 'X:\projects\BranD\src\app\header'

  13 | @font-face {
  14 |     font-family: 'latobold';
> 15 |     src: url('.../assets/fonts/LatoBold/lato-bold.eot');
     |         ^
  16 |     src: url('.../assets/fonts/LatoBold/lato-bold.eot?#iefix') format('embedded-opentype'), {
  17 |          url:'.../assets/fonts/LatoBold/lato-bold.woff' format('woff'),

 @ ./src/app/header/header.component.ts 22:21-55
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:0 ./src/main.ts

0

javascript css angular2 sass

Author: Vadizar, 2018-04-02

Source

1 answers

score 0 · Accepted Answer

Delete the line src: url('.../assets/fonts/LatoBold/lato-bold.eot');.

Does not compile due to duplication of the src property. Do you even know why it's listed there? This is a fix for IE 8. I don't know what version AngularJS you have, but since version 2.0 it doesn't support IE 8.

And the font formats you have are old. No one uses them anymore. Now we need three formats: woff2, woff and ttf.

Here is an example of a proper and modern font connection:

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'),
         url('../fonts/latobold.woff2') format('woff2'),
         url('../fonts/latobold.woff') format('woff'),
         url('../fonts/latobold.ttf') format('truetype');
}