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": [
"styles.css",
"fonts.css"
],