Custom Fonts using @font-face

Introduction

The @font-face rule allows you, the designer, to specify a particular font to render text in. You can use any font you like, not just Verdana, Arial etc...

Creating an @font-face rule

Once you have opened the page you want to work on, add a @font-face rule to one of your attached CSS files.
Simply choose 'font-face' from the 'CSS Rules' sub menu. This menu is accesible from the '+' icon at the bottom of the Styles list.

Configure the custom font

Once the font has been setup, you need to fill in a few details....
The font-family property is how the font will be referenced.
The src property is where the font is stored. This value is very important as it's how the users web browser knows where to get the font.

Using the custom font

Once the font has been setup, you simply need to select it in the 'font-family' property of the CSS style (or element) you want to apply it to.

Note : The font will be listed at the top of the pop up menus.

Done

Now the font will display wherever the CSS style is used, or, in this example, it's applied directly to the element.

Get cool fonts

http://www.dafont.com/ is great source for free fonts.