how to add font otf format in html

1/*default version*/
2@font-face {
3	font-family: 'lovelyFont';
4	src: url('fonts/lovely_font.eot'); 
5	src: 
6		local('Lovely Font'),
7		local('Lovely-Font'),
8		url('fonts/lovely_font.otf') 
9		format('opentype');
10}
11/*bold version*/
12@font-face {
13	font-family: 'lovelyFont';
14	src: url('fonts/lovely_font_bold.eot'); 
15	src: 
16		local('Lovely Font Bold'),
17		local('Lovely-Font-Bold'),
18		url('fonts/lovely_font_bold.otf') 
19		format('opentype');
20	font-weight: bold;
21}
22/*container element*/
23div { font-family: 'lovelyFont', sans-serif; }
24/*span elements inside the container div*/
25span { font-weight: bold; }

1font-family: