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

I put the fonts in the folder

src/assets/fonts/Roboto-Regular.tff

I add in src/styles.css

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

I use it in a component .scss
```
font-family: "Roboto-Regular";
```

I get 404 error:

Cannot find module "./assets/fonts/Roboto-Regular.tff"
client?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
  using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
    using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src/assets/fonts/Roboto-Regular.tff)
      as directory
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js doesn't exist
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts]
[D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js]
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 6:793-837
 @ ./src/styles.css
 @ multi styles

If I add the font-face definition in app.component.scss I get 404 error as well
```
jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404
```

Any ideas on how to include my Roboto-Regular.tff font?

Died you maybe mean ttf (TrueTypeFont) instead of tff? – Bernhard Nov 30 '16 at 09:36 — Bernhard, Nov 30 '16 at 09:36
you can include a font in your index.html – Vinay Pandya Nov 30 '16 at 09:37 — Vinay Pandya, Nov 30 '16 at 09:37
@Bernhard you are the man ... great spot :) – mp3por Nov 30 '16 at 09:56 — mp3por, Nov 30 '16 at 09:56

score 67 · Accepted Answer · edited Mar 05 '19 at 13:21

67

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.

edited Mar 05 '19 at 13:21

Stéphane GRILLON

11,140
10
85
154

answered Feb 17 '17 at 12:48

Gideon

1,954
3
22
29

1

With a newly created project, one must add "../node_modules....." as the `root` is set to `src` by default. When doing this, building errors because the referenced font files cannot be found. How to do this with latest angular? – ohcibi Aug 11 '17 at 12:23
@ohcibi I checked and you are right. Updated the answer, thanks! – Gideon Aug 15 '17 at 07:22
3

What if the npm package has no css/scss files?, just ttf. – afboteros Aug 25 '17 at 20:30
2

This increases a build by 15 mb! – Robin Dijkhof Sep 11 '17 at 19:11
@RobinDijkhof The size increase has nothing to do with how it is implemented. The only thing this does is move an asset. So choose your assets wisely! – Gideon Sep 12 '17 at 08:40
4

Instead of fiddling with `.angular-cli.json` on that matter I would rather do `@import '~roboto-fontface/css/roboto/roboto-fontface.css';` in `styles.scss`, this way it is more explicit – angularrocks.com Jan 07 '18 at 08:51
im completed all the above process , but the font is not changed , any other changes is there , like index.html files changes or something like that , pls help. – Ramees V P May 22 '21 at 04:29

score 20 · Answer 2 · answered Jan 03 '17 at 15:25

20

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.

answered Jan 03 '17 at 15:25

RichieRock

1,138
1
8
13

1

Thee problem was misspelled name off the font – mp3por Jan 03 '17 at 16:19
1

Not the best solution if you are doing a "stand-alone" which needs to be independent from the internet and has to work without any internet access. However works fine if your project is hosted online (and is actually better as many clients would have this font already cached because they have visited other sites which might have this font). :) – tftd Jul 21 '18 at 16:03

score 12 · Answer 3 · answered Jan 27 '18 at 21:00

12

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

answered Jan 27 '18 at 21:00

BrunoLM

97,872
84
296
452

score 7 · Answer 4 · answered Jun 25 '19 at 09:20

7

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

answered Jun 25 '19 at 09:20

codeuix

1,366
1
12
18

1

This is the correct answer for me as my requirement is for an enterprise app that doesn't want to be pulling in remotely hosted fonts. – cfranklin Aug 17 '19 at 21:15
for downloading google fonts: https://google-webfonts-helper.herokuapp.com/fonts – P Marecki May 27 '20 at 20:41

score 3 · Answer 5 · edited Jul 14 '17 at 22:01

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

edited Jul 14 '17 at 22:01

lealceldeiro

14,342
6
49
80

answered Jul 14 '17 at 14:11

Ushodaya Nallola

31
1

Someone had mentioned that in the comments on the post – jhhoff02 Jul 14 '17 at 14:42

angular2-cli include custom fonts

5 Answers5

Linked