angular2-cli include custom fonts

Question

I am trying to include some custom fonts in my project with no success.

NOTE: I am using angular-cli: angular-cli@1.0.0-beta.21

1. I put the fonts in

Answer 1

If using SCSS you can:

Install roboto-fontface

npm install roboto-fontface --save

Import on your styles.scss file

@import '~roboto-fontface/css/roboto/roboto-fontface.css';

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

Answer 2

For the people arriving here by searching:

Install with npm:

npm install roboto-fontface --save

Add to styles in .angular-cli.json (apps[0].styles):

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

That's all!

Edit: since Angular 6 this file is called angular.json instead of angular-cli.json. Adding fonts still works the same way as before.

Answer 3

What you have done was correct, but with a small error:

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }

You have given tff instead of ttf

Try this :

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.ttf"); }

Answer 4

Have you tried using the googlefont url from https://fonts.google.com?

In your styles.css:

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

Then use the font-family in styles.css or wherever you need:

body, html {
  font-family: 'Roboto';
}

I'm using this in my project and it works nicely.

Answer 5

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: 'Roboto';
  src: url(/assets/Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
}

At Last use it as per your requirement like

body{
 font-family: 'Roboto', sans-serif;
}