Best practice/Style for importing font into angular 4 cli web application

There is better way to include fonts to the website, not only to angular app.

Checkout https://fonts.google.com

Why it is better?

• higher performance
• higher chance, that your customer will have font in his cache
• you don't have to worry about attaching files, and use yours origin bandwidth

In your case you would import following in your css file:

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

You can place it in the main .css file, included by index.html. Or you can use <link> tag and include fonts in your headers (also in index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

This is best way to use google font locally with angular 2,4,5,6,7 and more, First Download Google Font and add this inside the assets folder and use it is as per your requirement.

In angular.json call this in src/assets

"assets": [
    "src/assets"
 ],

In css file add this font-face in top

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

At Last use it as per your requirement like

body{
 font-family: 'Montserrat', sans-serif;
}