You are here:About>Computing & Technology>Web Design / HTML> About.com Web Design A to Z> Web Design Articles A-H> Web Design/HTML Articles D> Dynamic Fonts: Using OpenType and TrueDoc to Embed Typography
About.comWeb Design / HTML
Newsletters & RSSEmail to a friendSubmit to Digg
Related Font Resources

Changing Font AttributesCSS Font PropertiesHow to Change the Font

Font Resources Elsewhere

Web FontsMicrosoft Web TypographyTrueDoc

Dynamic Fonts

From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

Using OpenType and TrueDoc to Define the Fonts in Your Page

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.

Previous Features
Las Vegas on a Budget

Find a BargainHotel DealsCheap EatsFree AttractionsEntertainment for Less

 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.