angular2-cli include custom fonts

﹥>﹥吖頭↗ 提交于 2019-11-30 12:43:02

问题


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


回答1:


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.




回答2:


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.




回答3:


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



回答4:


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



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


来源:https://stackoverflow.com/questions/40884511/angular2-cli-include-custom-fonts

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!