how to add fonts on 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: how to link fonts css

@import url(//fonts.googleapis.com/css?family=Open+Sans);
/*When not hosting on my own server use the @import rule which is Google Fonts Versionn and hosted on their server*/

Example 3: css how to embed fonts

/************* How to embed fonts using GOOGLE FONTS? ******************
This will ensure that the Font type of your choice will appear for all 
users, regardless of whether or not they have this Font installed!


1º -  Go to https://fonts.google.com/


2º - Choose a Font and, for that particular choice, you mark the option: 
     "Select this style". Do this for every Font you wish to incorporate


3º - In the page of your "Selected Family", go to the option "Embed"


4º - Copy the link and paste in the <header> of your html file: */
<link href="https://fonts.googleapis.com/css2?family=..." 
  rel="stylesheet"> /*


5º - Finish by copying the "CSS rules to specify families" that the site 
gives you and (in your css file) pasting a new property to your element, 
for exemple: */

h1 {
  font-family: "Sacramento", cursive;
}