The @font-face property marks a revolution in web design, and is now supported by all modern browsers – it allows you to choose from a vast range of different typefaces for your website. Before the @font-face property was introduced, there was no simple and safe way to do this. The stark choice was to either stick with a very small set of ‘safe’ fonts that everyone used, or to use images for your exotic typeography, or to resort to various hacks. Now it is easy.
@font-face Syntax
The correct syntax is:
@rule-name {
font-family: "Font Name";
src: url(fontfilename.ext) format('formatname');
}
FontFace Kits
FontSquirrel.com provides a fantastic all-in-one solution. You can download pre-prepared ‘FontFace Kits’ for a huge selection of typefaces, which contain the font in several different formats to cater for all browsers, plus a ready made CSS file containing all the necessary work-arounds to deal with individual browser quirks.
It also has a FontFace Generator which allows you to upload your own font and have it automatically packaged into a ‘FontFace Kit’.
To use this on your website, all you need to do is upload the FontFace Kit, link to it’s CSS file, and then apply the font family to the required page elements on your site.