One of the most common uses of graphics on Web pages are to create titles with the specific fonts you want displayed on your Web site. The problem is, when you use a font tag or the font-family CSS property, you have to hope that your readers have the fonts that you specify on their computer.
For example, a company might have a font developed for them for use as their official typeface, say "Company Font A". In order to get the most return on the
investment of creating a new font, the company wants the Web site to be displayed
using that font. The Web developers could use the CSS property:
font-family : Company Font A;
But this would only work on those computers that had that font installed. In other
words, only corporate computers would see the font.
Enter Dynamic Fonts
Using dynamic fonts or embedded fonts, a Web developer can use any font they wish to (Note: not all fonts can be embedded or used as dynamic fonts) on their Web pages and have them embedded so their readers can view them as well. What this basically means is that the font definition is downloaded when the page downloads.
But There are Drawbacks to Dynamic Fonts
- increases page size
fonts can be large, and will increase the download time - doesn't work on both browsers
there are two methods to embed fonts, but one only works in Internet Explorer and the other doesn't work on Netscape 6 or IE for the Mac.
OpenType
- This is the method developed by Microsoft and Adobe.
- Works as an extension to CSS to download the font.
- Not supported by Netscape.
OpenType Code
Use CSS tags in the <head></head> of your HTML document:
<style type="text/css">
@font-face {
font-family: Font Name;
font-style: normal;
font-weight: normal;
src: url("Font File.eot");
}
.classname {
font-family: "Font Name";
}
</style>
And then you can call out that style in your HTML as you would any other
style class:
<p class="classname">...</p>
TrueDoc
- This is the method developed by Bitstream and Netscape.
- Uses either CSS or a <link/> tag in the <head/>.
- Not supported by Netscape 6 or Internet Explorer on the Mac.
TrueDoc Code
Use either the @font-face attribute (as used in the OpenType code above), or
link to the URL of your font with the <link/> tag:
<link rel="fontdef" src="fontname.prf" />
Call out the font using
<font face="fontname"/>tags or CSS properties.
