Using Font-face A-Z: code and required tools

Need font-face for that

Interesting fonts looks great in Photoshop, but problems starts on web – not all users will have font you’re using. One solution is Cufon, that requires Javascript and makes text non-selectable. Other [better] option – Fontface.

Getting font files.

To get font-face work on all browsers (hello IE), you need 4 files:
font-name.eot, font-name.svg, font-name.ttf, font-name.woff
From font directories (like Dafont.com) you will get font-name.otf or .ttf, so how to get others?This free font converter www.font2web.com will convert uploaded .otf file (or .ttf) to .eot, .svg and .ttf files. Quality is good, no advertisements but you are welcomed to share your favorite font converter in comments.

.woff can be converted here: http://orionevent.comxa.com/otf2woff.html. Process is same – upload .otf and get .woff font file.

Once you’ve downloaded .zip packages with font files, extract, change all filenames to ‘webfont’ and upload to server (I find it useful to create new folder named ‘fonts’).

CSS code

First, let’s load font files with those CSS lines (add to somewhere in the beginning of CSS file), instead of font-name you need to have actual name of font:

@font-face {
font-family: "font-name";
src: url("font/font-name/font-name.eot");
src: url("font/font-name/font-name.eot?#iefix") format("embedded-opentype"),
url("font/font-name/font-name.woff") format('woff'),
url("font/font-name/font-name.ttf") format("truetype"),
url("font/font-name/font-name.svg#font-name") format("svg");
font-weight: normal;
font-style: normal;
}

Second, define which elements will use this font, for example link in menu div

#menu a {
font-family: "font-name";
}

That’s all. Save CSS, refresh browser and enjoy!