xxxxxxxxxx
/*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; }
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.my-text {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="my-text">This text has a custom font.</p>
</body>
</html>