To get around this limitation designers used to create graphics for headlines, or use flash based scripts such as sifr. CSS3 allows for easy embedding of fonts on a page, surprisingly it’s supported well across all browsers.

Browser Support for @font-face

All modern browsers support the @font-face rule in some shape or form. Internet Explorer has supported it since IE4, with the only issue being that they only support embedding of their own proprietry font file – EOT. Safari, Firefox and Opera should all support True Type or Open Type fonts. Safari on the iPod/iPhone will only support SVG files. With this in mind it’s always good to pick a web safe back up font to ensure your site degrades nicely.

Fonts and Licensing

Fonts aren’t just free for everyone to use. Make sure that the font you plan on using on your site is bought and the license permits you to use it online. There are plenty of free fonts out there, use one of those if you aren’t sure. If a client insists on using Helvetica or other commercial font, make sure they buy it first!

Converting Your Font

If you have a TTF or OTF font you can convert it online to EOT and SVG using a service like Font Squirrel (who also provide some great free to use fonts, prepackaged for using on the web.) The typeface I’m using on this site is Charis which I downloaded from there.

Once you have your font files ftp them up onto your web site.

The CSS

Declare the fonts you wish to use at the top of your css file

@font-face {
	font-family: 'CharisSILRegular';
	src: url('Fonts/CharisSILR.eot');
	src: local('Charis SIL Regular'), local('CharisSIL'), url('Fonts/CharisSILR.ttf') format('truetype');
}

font-family: This can be anything you want, it’s how you will call the font later on in your CSS file.
src: This tells the browser where your font is located.url is a location on your server, local would be the name of the file if a user happens to have it already and format is the file type. It’s always good to give the local name as it would mean that if the user has the font they don’t need to download it from your server. If the browser doesn’t find the font locally it will move to the next source. Declare your EOT file seperately from the others.

So now you have declared the font you can use it throughout your CSS in the same way you use other fonts

h1 { font: 2em CharisSILRegular, Georgia, serif;}

Don’t forget to add a fall back font (in this case Georgia, then any other serif font) to ensure maximum degradability. That’s all there is to it. Just like in print design try not add too many fonts to one design (even more importantly for the web as the browser needs to download every font the user doesn’t have locally)