Embedding fonts

To add CSS web fonts, @font-faceis used. It has been around for a while now, but the drawback has always been a lack of browser support for various font formats. These options include .eot, .otf, .ttf, and .woff. Web Open Font Format(WOFF) is the latest standard that has been adopted by most font foundries and web browsers. WOFF will likely be the primary format in the future. This recipe will cover how to add a web font to your page that includes support for older browsers and then we'll discuss font services
1.  To get started, move the .eot, .svg, .ttf, and .wofffonts that you downloaded, into your /retina/folder. Then create a new HTML document called cssFonts.html inside the /retina/folder. Within the basic HTML structure we'll add our CSS code to include our web font.
<style>
@font-face {
font-family: 'BevanRegular';
src: url('Bevan-webfont.eot');
src: url('Bevan-webfont.eot?#iefix') format('embeddedopentype'),
url('Bevan-webfont.woff') format('woff'),
url('Bevan-webfont.ttf') format('truetype'),
url('Bevan-webfont.svg#BevanRegular') format('svg');
}
2.  Then we'll add a class to display our new font as a large header.
.largeHeader {
font-size: 40px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
3.  Next we'll add a final class for a small header.
.smallHeader {
font-size: 22px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
</style>
4.  Then we'll add the HTML code to display our new headers.
<h1 class="largeHeader">Our New Large Header</h1>
<h2 class="smallHeader">This header isn't as large</h2>
5.  If you run this code inside of your browser you should see the new fonts. Notice that the text looks just as sharp on a Retina device.