In the past, your Web pages could only display fonts the user had installed on their computer. This meant that whatever font you specified in your CSS code, your site may still not have appeared the way you wanted it to because you had no way of knowing in advance whether any particular user would have that font.You could of course specify fonts to use if your chosen font was not installed, and could use generic descriptions of fonts so that the browser could use whatever font of that type the user did have, for example sans serif. However, even the best case scenario meant an unpredictable user experience.
The font you use in a Web page can have a massive impact on the visual style and usability of the site as a whole, so being able to choose fonts freely is a huge step forward for Web design.
Providing Fonts
CSS3 allows you to use any font because you essentially provide that font as one of your website resources, deploying it from the Web server in the same way you would other style elements such as images.
To include the fonts you want, upload them to your server along with your other resources, taking a note of the location you have them stored at, relative to your site. You can use True Type Fonts, which are saved with ".ttf" extension, OpenType Fonts, which are saved with ".otf" extension and Embedded OpenType Fonts, which are saved with ".eot" as the extension. However, Internet Explorer only supports EOT, while Firefox, Opera, Safari and Chrome support OTF and TTF.
As with most CSS3 properties, older browsers do not support the use of CSS3 fonts in this way at all.
The Font Face Rule
CSS3 uses the font-face declaration to support fonts stored on the server within your Web page designs. The first step in using this technique is defining a font face within the CSS code for your page. You can use the following outline to define a font:
@font-face {
/*give the font a name*/
font-family: productDescriptionFont;
/*tell the browser where to find it*/
src: url('fonts/Really_Cool.ttf'), url('fonts/Really_Cool.eot');
}
Notice that the source URL is provided twice, once for Internet Explorer (with ".eot") and once for the other supporting browsers. In this case the fonts are stored in a directory named "fonts" that is itself in the same directory as the Web page/ CSS file - wherever this code is stored. The font is named "Really_Cool" just as an example. You should of course alter your code to suit the name and location of your own fonts.
So far we have defined a font, but have not applied it to any Web page elements yet.
Applying the Font
You can apply the font you defined to Web page elements using the usual CSS identifiers. To apply it to all div elements with "description" as the class name, for example in a retail website, use the following code:
div.description {
/*use the font name defined earlier*/
font-family:productDescriptionFont;
}
Additional Options
You can use additional options within your font-face definition section. For example, if you use a bold font within your site, you need to include a bold specifier for font-weight within your font-face declaration, if you want italics, you can include it within a font-style declaration and so on. These are optional - the only required ingredients in a font-face section of CSS3 code are the name you want to use to refer to your font and the URL indicating its location on your server.
Whatever rules you apply to your font within the font-face section will be displayed within any Web page elements you apply the font to using its name. This can help to keep your CSS3 code tidy, as you only need one line to apply the font and can apply it within as many CSS declarations as you like. If you decide you want to make a change to the font, you only have to do it within the font-face declaration and it will be reflected throughout your site.
Conclusion
It might seem a bit soon to get excited about emerging technologies and standards such as HTML5 and CSS3, but many of your website users will already have supporting browsers. While it's vital to make sure you accommodate those users without the most recent browser programs, there's absolutely no reason you can't start providing the improved visual effects such as CSS3 fonts to everyone else.
Useful Links
