How to add fonts

[jeusdi]

I've installed font-awesome:

npm install font-awesome

I've added these rules on constants.js:

exports.MY_CLIENT_RULES = [
  // use this to import your own rules for Client webpack config.
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]

Into my styles.scss I've added this import:

@import "font-awesome/scss/font-awesome.scss";

font-awesome css rules are loaded but, fonts are not loaded.

It seems fonts are requested by browser:

However, the response is the main html page:

Any ideas?

[jeusdi]

Any ideas?

[Zwimber]

The most likely reason is that the path is not entirely correct but I would need more information to exactly pinpoint the problem. I would recommend just using a CDN for now.

Good luck!

[leqwasd]

I think I got it working.
In webpack.config.ts

  {
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"},
  { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: "url-loader?limit=10000" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },

And in my .scss file I just

@import '~font-awesome/scss/font-awesome.scss'

I am super new to this specific Angular file handling proccess. This was cobbled together from examples all around the web.