How to add font otf format in html

/*default version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font.eot'); 
	src: 
		local('Lovely Font'),
		local('Lovely-Font'),
		url('fonts/lovely_font.otf') 
		format('opentype');
}
/*bold version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font_bold.eot'); 
	src: 
		local('Lovely Font Bold'),
		local('Lovely-Font-Bold'),
		url('fonts/lovely_font_bold.otf') 
		format('opentype');
	font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

Similar codes

0 vote380 views1 answer
Remove materialize style input
CSS
0 vote351 views1 answer
How to add a photo using css beside a paragraph in html
CSS
1 vote347 views1 answer
How to create a semi circle in css
CSS
35 votes449 views3 answers
What does class="d-none d-md-block" mean in bootstrap?
CSS Bootstrap
23 votes368 views5 answers
Image rotate css
CSS
6 votes315 views2 answers
How to change text on hover
CSS
0 vote351 views2 answers
How to hide youtube watermark from embedded video :2021
CSS
0 vote422 views1 answer
Move scrollbar on element to right side
CSS
9 votes381 views3 answers
Css rotate 90 degrees
CSS
46 votes372 views6 answers
Css background image size to fit screen
CSS