How to make Angular CLI work with custom fonts (i.e. fontawesome)

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:

  1. 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
  2. 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

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top