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

2 Answers 2

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