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?

I always link these in the head of index.html and have not had an issue? — Brad Axe, Aug 04 '18 at 16:02
It should work if you add the link in `
` of your `index.html` file. There could be a url or path reference error when you build it with `--base-href` — micronyks, Aug 04 '18 at 16:02
you think. build your project local and run it. , how to use that command `ng build --prod --base-href` — RedAnz, Aug 04 '18 at 16:08
can you share screenshot of network tabs of chrome developer tool to see if browser actually send request for fonts? — alt255, Aug 04 '18 at 16:09
Clear your browser cache and app data. I just tested this with and without using --base-href /test/ and it works fine. — Brad Axe, Aug 04 '18 at 16:26
Beautifully explained here https://golb.hplar.ch/2019/06/google-fonts-download.html — Ravindra, Mar 31 '20 at 09:58
@RedAnz How did you finally sorted this ? I am batteling the same issue. — foo-baar, May 22 '20 at 20:01

codeuix · Answer 1 · 2019-06-25T09:07:29.587

8

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

edited Jun 25 '19 at 09:07

answered Jun 25 '19 at 08:10

codeuix

1,366
1
12
18

1

[link](https://google-webfonts-helper.herokuapp.com/fonts) It is a convenient little helper to select the fonts you like from google. – FuzzyTemper Nov 17 '19 at 08:51

score 5 · Answer 2 · answered Jan 09 '19 at 01:32

5

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

answered Jan 09 '19 at 01:32

Mustafa

1,738
2
24
34

3

or put it in styles.scss `@import "~roboto-fontface/css/roboto/roboto-fontface.css";` – Kyle Krzeski Jan 24 '20 at 15:03
Could this be used with any Google Font?? – JoeCool Aug 31 '20 at 21:55

Akj · Answer 3 · 2018-08-04T16:11:58.907

1

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>

edited Aug 04 '18 at 16:11

answered Aug 04 '18 at 16:08

Akj

7,038
3
28
40

have u added as given above?? – Akj Aug 04 '18 at 16:13
your code and my code same, but one thing is different, that is ``. '' When the project is implemented the project does not work – RedAnz Aug 04 '18 at 16:27
can u remove base and just use simple link instead. its working fine for me. – Akj Aug 04 '18 at 16:38

How to add Google fonts library with angular 6?

3 Answers3