1. Upload your webfonts
You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
2. Include the webfont stylesheet
A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:
@font-face {
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
We’ve already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
3. Modify your own stylesheet
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called “font-family.” The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the “font-family” property, inside the selector you want to change. For example:
p { font-family: 'WebFont', Arial, sans-serif; }
4. Test
Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren’t loading in a particular browser.