I used to be afraid of @font-face css. Why, well, because I didn’t know how to use it. Well last night I tried it out on a contest I entered over at css-tricks.com. The CSS-Off. Basically, they give you a psd and you have to build it. Well, I didn’t have one of the fonts they used.

So I went over to this site I saw in a video tutorial over at nettuts. Check the link out if you find my short tutorial not to your liking. You should get the hang of this though, since it really is quite simple.

Once you are over at FontSquirrel.com, click on @font-face kits, choose a kit, and click on its Get Kit link. This will then download the kit to your desktop.

After you unzip the file, copy the font files (you will need the .eot, and the .ttf) to your website folder, and put them in new folder called fonts… or whatever you want to call it. It doesn’t really matter. Open the stylesheet that comes with the kit, copy the @font-face style, which will look like this:

@font-face {
	font-family: 'CloisterBlackLight';
	src: url('CloisterBlack.eot');
	src: local('Cloister Black Light'),
local('CloisterBlack-Light'), url('CloisterBlack.ttf')
format('truetype');
}

See that font-family: there in the style? Change it to whatever you want. Doesn’t matter…could be called font-family: ‘Awesome’;. Then change the src: url to the correct path on your server. So it would possibly be this: src: url(‘../fonts/CloisterBlack.eot’);.

Do that for the second src url as well. The first one is for IE, because Internet Explorer hates true-type for some reason and needs its own font file. The second src is for all the other browsers.

Then, if you want to use that font family, say on an h1 tag you do this:

h1 {
font-family: Awesome;
}

I would add default familys onto the end of that just in case, but this works in most browsers: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+,
EOT fonts for Internet Explorer 4+.

Have fun with it, and aren’t you ticked it was easier than you thought? You could have been using this for ages!