Have you ever thought of making a custom styled font on your website, which may not available on your visitor PCs, well there is one solution!! you can use CSS @font-face syntax to instruct the web browser to download the custom font to the visitor PC.
The easiest way of @font-face declaration is this, you can use either TTF or OTF font file:
@font-face
{
font-family: your-fontname;
src: url('http://www.your-websitename.com/your-font-name.ttf');
}
p
{
font-family: your-font-name;
}
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 (Embedded OpenType developed by Microsoft). 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: you-font-name;
src: url('your-font-name.eot');
src: local(your-font), url('your-font-name.ttf') format('opentype');
}
p
{
font-family: "your-font-name";
}
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 other 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, 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’.
No more image replacements for your Typography. Have fun with your Website Typography!! 100% SEO friendly!!!