Essex web design

@font-face is an extremely useful css rule which allows you to use non-standard fonts on your website to replace the use of title images and graphics. There are a lot of benefits using @font-face over images and graphics, like reducing page loading times & saving bandwidth.

The great thing about using @font-face is just how easy it is to implement it. All it take is you to place your chosen font into your website directory and add the following css rules to your stylesheet.

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

And to apply it to your title's simply use the following.

h1, h2 { font-family: Delicious, sans-serif; }

It's as simple as that, 3 lines of css and you can start replacing your images with pure css and html. You can download more fonts at Font Squirrel, they offer a download service specially for @font-face which allows you to download a kit, be sure to check that out.

Keep in ind that font's are licensed just like images, so you'll need to make sure that if you're using a font commercially that it comes with the license.