In HTML3.2, this was known as the FONT FACE. By using @font-face {...}  CSS selector allow to web designers give some control over the appearance of fonts on their web pages that are not installed on the viewer's computer. CSS specification also allows the use of several generic font families.

Adding @font-face into CSS:

First, you need to Generate your font, you can use the @font-face Generator or download hundreds of @font-face kits by Font Squirrel, they have an awesome library and all their fonts are 100% free for commercial use.
Once you have the files downloaded you need to add them to your Web site. ( e.q.  Umbrage font)
Create a folder named “fonts” and place the Umbrage.eot and Umbrage.ttf files into the folder. Upload that to your site, in to the directory as your CSS location.

Now open your style sheet and add the following:

@font-face {
font-family: 'Umbrage';
src: url('fonts/Umbrage.eot');
src: local('Umbrage'), local('Umbrage'), url('fonts/Umbrage.ttf') format('truetype');
}
H1, H2, H3 { font-family: 'Umbrage', Arial, sans-serif;}