[Fixed] How to import a new font into a project – Angular 5


I want to import a new font to my Angular 5 project.

I have tried:

1) Copying the file to assets/fonts/

2) adding it to .angular-cli.json styles

but I have checked that the file is not a .css, it is an .otf that works like an .exe (it is an installer) so I do not really know how to import it. Any idea?


You need to put the font files in assets folder (may be a fonts sub-folder within assets) and refer to it in the styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");

Once done, you can apply this font any where like:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;

You can put the @font-face definition in your global styles.css or styles.scss and you would be able to refer to the font anywhere – even in your component specific CSS/SCSS. styles.css or styles.scss is already defined in angular-cli.json. Or, if you want you can create a separate CSS/SCSS file and declare it in angular-cli.json along with the styles.css or styles.scss like:

"styles": [

Leave a Reply

(*) Required, Your email will not be published