google - angular-cli custom fonts




angular2-cli include custom fonts (3)

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.

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

NOTE: I am using angular-cli: [email protected]

  1. I put the fonts in folder

    src/assets/fonts/Roboto-Regular.tff

  2. I add in src/styles.css

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

  3. I use it in a component .scss

    font-family: "Roboto-Regular";

  4. 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

  5. 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 how to include my Roboto-Regular.tff font ?

Best regards


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.


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




angular2-cli