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;
}
Share
Improve this question
edited Sep 24, 2018 at 11:44
user107224
2052 silver badges12 bronze badges
asked Sep 24, 2018 at 6:52
Kumaresan PerumalKumaresan Perumal
533 silver badges10 bronze badges
2 Answers
Reset to default 5Please 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;
}