How To Use Custom Fonts On Your Website With CSS

With CSS (Cascading Style Sheets) you can use custom fonts on your website. Normally your visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.

The conventional way of using custom fonts for headings and logos etc. is creating the text in a graphic editor and then using the image file. From the perspective of SEO, this is not appropriate; you must use text as much as possible.

Now there is a way around in CSS that lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say cool_font.ttf, and upload it to your remote server where your blog or website is hosted.

Then from within your CSS file (or wherever you are defining your styles) you have to refer to that custom font in the following manner:

@font-face {
	font-family: cool_font;
	src: url('cool_font.ttf');
}

After that you can use it just like a normal CSS declaration:

p.custom_font{
	font-family: cool_font; /* no .ttf */
}

This way you can use as many custom fonts as you feel like on your website.
As you can notice in the comments section, this method of using custom fonts on your website doesn’t work with Internet Explorer (but of course!).

For IE.
In order to use a custom font in your website, which may not available on your visitor PCs, you can use CSS @font-face syntax to instruct the web browser to download the custom font to the visitor PC.
The simplest form of @font-face declaration is this, you can use either TTF or OTF font file:

@font-face
{
    font-family: my_font;
    src: url('http://www.my_website.com/my_font.ttf');
}
p
{
    font-family: my_font;
}

Unfortunately, the above code works in Firefox (version 3.5+), Opera (version 10+) and Safari (version 3.1+), but not Internet Explorer. This is because Internet Explorer does not recognize TTF / OTF, it uses a proprietary format called EOT. To make your @font-face declaration works with IE as well, you must prepare two font files, one in TTF / OTF format and the other one in EOT format. To learn more about EOT, and how to convert TTF / OTF to EOT, please refer to this MSDN article.

We need to make minor adjustment to make the @font-face declaration to support both EOT and TTF font:

@font-face
{
 font-family: my_font;
 src: url('my_font.eot');
 src: local(my_font), url('my_font.ttf') format('opentype');
}
p
{
 font-family: my_font;
}

Note that we assign value to ‘src’ twice. The first time, we assign the EOT font. Then we assign a TTF font to ‘src’. The second assignment will overwrite the first assignment, hence the web browser like Firefox, Opera and Safari will download the TTF file in effect. Since Internet Explorer does not recognize the ‘local’ keyword, which is introduced in CSS3, it will ignore the second assignment and uses the first assigned value, which is the EOT file.

In another word, this solution works because IE does not support CSS3 currently. The ‘local’ keyword simply says, search the font in local PC first, if not found, then download the font from the URL specified. Without the local keyword, the web browser will always download the font even if the font exists in the local PC. So, it is always good to specify a value to ‘local’.
Hopefully, IE9 will support TTF / OTF and that will certainly make my life easier.

You can create any font as web font using Font Squirral website as WebFont