javascript - How do I load custom font in angular 6? - Stack Overflow

admin管理员组

文章数量:1315952

I am currently working in angular 6. I wanted to load my fonts in style.css, but it is not working. My code is shown below. Could someone suggest how I may reproduce this issue?

Note: I used the same syntax which was working in angular 5. What is wrong with it?

style.css:

@font-face {
  font-family: 'Expert Sans';
  src: url('assets/fonts/ExpertSans-Regular.ttf');
}


body {
  font-family: 'Expert Sans' !important;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  margin: 0;
}

I am currently working in angular 6. I wanted to load my fonts in style.css, but it is not working. My code is shown below. Could someone suggest how I may reproduce this issue?

Note: I used the same syntax which was working in angular 5. What is wrong with it?

style.css:

@font-face {
  font-family: 'Expert Sans';
  src: url('assets/fonts/ExpertSans-Regular.ttf');
}


body {
  font-family: 'Expert Sans' !important;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  margin: 0;
}

• javascript
• typescript
• angular5
• angular6

Share Improve this question Follow edited Sep 24, 2018 at 11:44 user107224 20522 silver badges1212 bronze badges asked Sep 24, 2018 at 6:52 Kumaresan PerumalKumaresan Perumal 5333 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Please add format('opentype') in your code

 @font-face {
  font-family: 'Expert Sans';
  src: url('assets/fonts/ExpertSans-Regular.ttf') format("opentype");
}

For More detail information Please follow this link How to import a new font into a project - Angular 5

I was trying body element that is why it did not affect. Finally i added a *(star). it worked for me. please try it.

    @font-face {
      font-family: Expert Sans;
      src: url('assets/fonts/ExpertSans-Regular.ttf');
    }
    
    * {
      font-family: Expert Sans !important;
      font-size: 14px;
    }

本文标签： javascriptHow do I load custom font in angular 6Stack Overflow