CODEWITHSUNDEEP
angularangular6google-font-apiangular-builder
RedAnz
RedAnz

Reputation: 89

How to add Google fonts library with angular 6?

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?

Upvotes: 7

Views: 19228

Answers (3)

codeuix
codeuix

Reputation: 1406

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

Upvotes: 8

Mustafa
Mustafa

Reputation: 1776

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"
        ],

Upvotes: 5

Akj
Akj

Reputation: 7231

Try something like this:

in index.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

</head>

<body>
    <app-root>
        Loading...
    </app-root>
</body>
</html>

Upvotes: 1

Related Questions