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. After 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;
}