• Tweet

With the new CSS property @font-face you can use the remotely hosted custom fonts in the web design. The font will be displayed properly on every computer even if it is not installed.

Finding the fonts:

You should choose carefully the font to use because of the licensing concerns. There are lots of websites which provide free fonts which you can use with @font-face.
You can find list of fonts with demo on Font Squirrel page available for embedding. Another list of fonts available for @font-face embedding can be found here.

Converting fonts:

Different browsers support different font formats. For example, Firefox and Safari support TTF or OTF format, while the Internet Explorer supports EOT format. Therefore you will need to convert the font to these formats for the cross browser support.
You can convert the font to EOT format using Web Embedding Fonts Tool (WEFT), however there are some very good online tools to convert the fonts, for example Font Squirrel’s @font-face Generator. This tool allows to convert the font in different web formats including WOFF, and SVG. The WOFF is a new proposal for a web font file, and is supported by Firefox 3.6.
The SVG fonts are basically embedded inside of SVG documents, therefore any browser that support SVG supports SVG fonts. Some browsers also allow to use SVG files in @font-face, for example Google Chrome, and iPhone’s Safari.

Using with CSS:

Once you have converted the fonts in the required format, you can use them with CSS @font-face property in following way:

@font-face {
font-family: DeliciousRoman;
src: url('DeliciousRoman.eot');
src: url(DeliciousRoman.otf);
}

The @font-face has three declaration as you can see above:

font-family: Name of the font you want to use.

src: Path to the font file. First src property is for Internet Explorer while the second is for all other browsers. If you think that the font could be already installed on the visitors computer, then you can use local instead of src. For example, local('Delicious Roman'). This method checks whether the font is already installed on the visitor’s computer.

format: Format of the font file, for example .ttf or .otf.

You can use the font along with fall-back options in case if @font-face is not supported, for example:

h1 {
font-family: DeliciousRoman, Arial, sans-serif;
}

Google Web Fonts:

Google Web Fonts is a great resource for using web fonts. The biggest advantage of Google Web Fonts is that all fonts in the directory are available for use under an open source license and are served by Google servers and its really very easy to use these fonts.

You can select the font you would like to use from the Google Font Directory.
When you click on any font, you can find more details of the font. Some fonts have several families to choose from, which you can find on the font details page. Select the font family you would like to use.

On the font details page, you can find ‘Use this font’ tab. In that tab you can find the embeding code for the font. The Google fonts API generates the necessary CSS code automatically, which you can use in your CSS file.