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 vote143 views1 answer
Woocommerce product_cat apply to custom post type
CSS
3 votes139 views1 answer
Css image fit in div with aspect ratio
CSS
0 vote133 views1 answer
Dict to sql python
CSS
0 vote143 views1 answer
Tailwindcss init full
CSS
145 votes182 views6 answers
Add bootstrap to react
CSS
0 vote130 views2 answers
Nativescript hr
CSS
-1 vote134 views1 answer
Input focus css default
CSS
1 vote137 views1 answer
Out transition does not ease
CSS
0 vote133 views1 answer
Understanding '+' sign in css selector
CSS
51 votes126 views6 answers
Text overflow ellipsis css
CSS