One of the winners of a free copy of Magazine Premium (see this article) suggested implementing @font-face kits to the theme. I had read about @font-face but never actually attempted to use it before. I did a bit more research and finally figured it out. Now 10 @font-face kits are available with Magazine Premium and I thought it would be a good idea to show you how I did it.

Adding @font-face fonts to your Web site is not that difficult. It just takes a few steps.

First, you need to download some @font-face kits. I like to use kits supplied by Font Squirrel because they have an awesome library and all their fonts are 100% free for commercial use. For this example I’m going to use Riesling.

Once you have the files downloaded you need to add them to your Web site. Create a folder named “fonts” and place the riesling.eot and riesling.ttf files into the folder. Upload that to your site, in to the same directory as your style sheet.

Now open your style sheet and add the following:

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Bright Ideas
 * @licenseurl: http://www.fontsquirrel.com/license/Riesling
 *
 *
 */

@font-face {
	font-family: 'RieslingRegular';
	src: url('fonts/riesling.eot');
	src: local('Riesling Regular'), local('Riesling'), url('fonts/riesling.ttf') format('truetype');
}

Everything is in place for you to use Riesling as a font on your Web site. Just add it to your CSS like you would any other font-family:

h1 {
  font-family: 'RieslingRegular', Arial, sans-serif;
}

The one thing you need to realize when using @font-face kits is that only modern browsers recognize it.

This is a sample paragraph that uses @font-face kits and CSS. If you see this paragraph in Riesling then your browser supports @font-face. If not, you might need to upgrade your browser to take advantage of @font-face kits.