I recently moved a big project across to Angular CLI and was going through the hoops of getting gobal SASS working when I tried to get an icon font to work but ran into a brick wall.
As it turns out custom fonts and Angular CLI are a little tricky, just take a look at the github issues:
https://github.com/angular/angular-cli/issues/1317
Tbh – I find the github issue tracker a bit hit and miss in terms of getting concrete advice to fix a problem.
After trying a few different things (and tearing my hair out), I found the way to do it actually pretty simple:
- Create a new folder inside your project and put your fonts in there: ‘src/assets/fonts’. Tip: Angular will copy these files over to your ‘dist’ folder when going into production
- Now just include the fonts css inside your project and reference the file location, for example:
@font-face { font-family: "Ionicons";
src: url("assets/fonts/ionicons.eot");
You will know you have succeeded because the CLI wont throw an error when compiling!
Another bonus tip: I use SASS with CLI, this SO thread explains it well: http://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options
