3

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;
}
user107224
  • 205
  • 2
  • 12
Kumaresan Perumal
  • 53
  • 3
  • 10

2 Answers2

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

Dolar
  • 423
  • 2
  • 10
1

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;
    }
Kumaresan Perumal
  • 1,926
  • 2
  • 29
  • 35
  • Hello, you can perfectly make self-answered questions, though it seems you are using 2 different accounts. I have a feeling that will be frowned upon by moderators, not completely sure though. – Pac0 Sep 24 '18 at 11:59
  • 1
    Solved my issue. Thank you. – Chandan Y S Aug 04 '20 at 07:11