How to add Google fonts library with angular 6?

Question

I added Google fonts link in styles.scss file of Angular project.

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');

But It already works with Angular CLI command ng serve, but, trying to build up command ng build --prod --base-href deployed the project. Then noticed the issues.

The issue is it "didn't work with import google font".

I'm researching for this issue on google. but I didn't find a good solution.

I want to know how do apply the google font in an angular project?

Answer 1

This is best way to use google font locally with angular 2,4,5,6,7 and more, First Download Google Font and this in 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;
}

Answer 2

If you want to include your own version of Roboto font from google inside your angular app

npm install roboto-fontface

then inside your angular.json file add the font file in the styles list like this

"styles": [              
          "node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
        ],