CODEWITHSUNDEEP
angular
Er.Kaudam
Er.Kaudam

Reputation: 91

How to import a new font into a project - Angular 6

I need to include new font family in my angular 6 project

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

import the google font in my scss file but it doesn't work well

Upvotes: 0

Views: 5462

Answers (3)

Mateo Randwolf
Mateo Randwolf

Reputation: 2920

There are two main ways of adding fonts in angular:

  1. Install it with 

npm install roboto-fontface --save
and add it to styles in .angular-cli.json:

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

  1. Insert it from the web 

@import url('https://fonts.googleapis.com/css?family=Roboto');

and then use it in you scss file as Roboto.

However, using CDN might cause some problems as Angular treats this as low priority and some browsers might fail to load the font. In that case the safest way is to go with the first way of doing it. Here is an article that explains further this issue and the comparison of CDN and hosting the fonts yourselve

Upvotes: 1

Er.Kaudam
Er.Kaudam

Reputation: 91

Step #1

Create a scss file with font face and place it somewhere, like in assets/fonts

font_name.scss

@font-face
{
    font-family: Futura Bk Bt;
    src: url("./FuturaBookfont.woff") format("woff");
}

woff file converter link https://www.font-converter.net/en

Step #2

Paste the .woff file into the src url path.

Step #3

Include the scss file into your angular.json file

{
 ...
 "projects": {
 "project-name": {
  ...
   "architect": {
     "build": {
       ...
       "options": {
        ...
        "styles": [
          ...
          "src/assets/fonts/font_name.scss",
          ...
        ],
        ...
      },
      ...
    },
    ...,
    "test": {
      ...
      "options": {
        ...
        "styles": [
          ...
          "src/assets/fonts/font_name.scss",
          ...
        ],
        ...
      }
    },
    ...
   }
 },
}

It is Also Used For All Fonts Include Paid Fonts Also(Ex: Futura Bk Bt,..)

Upvotes: 0

niranjan kishan
niranjan kishan

Reputation: 1

Try to import in index.html

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Upvotes: 0

Related Questions