Just how sick are you of Arial and Times New Roman in websites? Don’t you wish you could easily use new and interesting typefaces for your headings and even your body text? Now there is an easy way to do that and you don’t need anything special.

You can use any font on your computer (provided you have the legal right to use it). The font you use should be either OpenType Font or a TrueType Font. The problem up to now has been that Internet Explorer only uses Embedded OpenType, while other browsers use Scalable Vector Graphics fonts. So what is a web designer to do?

Here is an easy solution. It looks complicated but it is very easy. The Font Squirrel Page '@font-face Kit Generator' builds everything you need, you just have to put it in the right place:

1. Go to the Font Squirrel Page to the @font-face Kit Generator.

2. Click the add a font button and browse to the font you want to use - I just copy a font from my font folder, in the Control Panel, to the desktop (On a MAC, navigate to your computer/Library/Fonts and select the one, or more fonts you want to use). Make sure you have read and understand the 'Agreement' before checking the agreement box.

3. Once your font has been uploaded, the field will turn green. Download your kit. It is a zipped file in which you will find (after unzipping it) there is a demo.html file, the css file and the files you will need for the different browsers (files with the extensions 'eot', 'svg', 'ttf' and/or 'woof').

4. Upload the font files you want to your website. A good location would be to create a new folder in the 'wp-content' folder called 'fonts' and put them there.

5. The 'stylesheet.css' file contains what you need to put into 'ATO->Add HTML/CSS inserts->CSS Inserts' - change the 'src:...' to reflect the folder where you upload the font files. For example:

HTML Code:

@font-face {
font-family: 'EurostileRegular';
src: url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.eot');
src: url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.eot?#iefix') format('embedded-opentype'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.woff') format('woff'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.ttf') format('truetype'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.svg#EurostileRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'EurostileBold';
src: url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.eot');
src: url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.eot?#iefix') format('embedded-opentype'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.woff') format('woff'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.ttf') format('truetype'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.svg#EurostileBold') format('svg');
font-weight: normal;
font-style: normal;
}


6. Now all that remains to be done is to use the font-family name in your CSS Inserts or in the 'ATO->Body, Text & Links->Body Style' or any of the theme's styling locations. Here is a sample that could go in the 'CSS Inserts':
HTML Code:
<blockquote>
h1 { font-size: 26px; line-height: 1.2; margin: 0.3em 0 10px; color:#3B5D07; font-family: 'EurostileBold';}
h2 { font-size: 20px; line-height: 1.3; margin: 1em 0 .2em; color:#6B9C19;font-family: 'EurostileRegular'; }
h3 { font-size: 12px; line-height: 1.3; margin: 1em 0 .2em; font-family:font-family: 'EurostileRegular'; }
</blockquote>

You can see the results here:
www.sidewalkproperties.ca (titles) (don’t blame me for the design or colour of this one, they insisted).

Or here: http://www.taiji.ca/ (body text)

The Font Squirrel site also has ready made kits to download and you can view them here.
http://www.fontsquirrel.com/fontface

http://nicewebtype.com/notes/2009/10...css-font-face/ It explains the process in great detail.

Great post! Came in handy when I was trying to figure where exactly to put the fonts.

I wanted to add google has some fonts which are very easy to incorporate at http://www.google.com/webfonts
By Clicking the Quick use they give you HTML to link to a CSS file. Saves folks hassle of getting all the versions of the file created and uploaded. The trade off is the load time.

You'll have similar load-time issues with @font-face, as I understand it.

I've been very happy with google fonts, though i try to just incorporate one or two. Some really nice fonts, and you can download them to use when making comps for clients (IE photoshop designs).

I'll keep this post in mind though - some clients have really specific font usage and this could get one away from images.

I have not noticed the load time being affected with @font-face, have you?