How to add Google fonts library with angular 6?

18.6k Views Asked by RedAnz At 20 October 2024 at 08:44

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?

Original Q&A

There are 3 best solutions below

Akj On 04 August 2018 at 16:08

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>

Mustafa On 09 January 2019 at 01:32

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

codeuix On 25 June 2019 at 08:10

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

How to add Google fonts library with angular 6?

There are 3 best solutions below

Related Questions in ANGULAR

Related Questions in ANGULAR6

Related Questions in GOOGLE-FONT-API

Related Questions in ANGULAR-BUILDER

Trending Questions

Popular # Hahtags

Popular Questions