Font not found with angular-cli, sass and materialize-css

Question

I'm working in a project when I'm using angular-cli and materialize-css, for the styles I'm using sass by default. When I import the sass files from the lib: @import "~materialize-css/sass/materialize";

The app find the styles but not the roboto fonts

I tried to put it directly in the styles inside of the angular-cli.json file and I have the same error. I think that materialize-css sass cannot resolve the Fonts path.

Answer 1

The Roboto font will be not automatically loaded by AngularJS Material itself.

The developer is responsible for loading all fonts used in their application.

You can host it yourself or include it from Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

please see the link.

https://material.angularjs.org/latest/CSS/typography

If you want to use NPM you can use Webpack+NPM

For more info please see the link

https://github.com/pablorsk/test-generator-fountain-webapp-angular-material

$ npm install --save-dev file-loader
$ npm install --save roboto-fontface

Hope this helps