how to add a font to a webpage in html code example

Example 1: 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; }

Example 2: use font on website html

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>