Home arrow DHTML arrow Page 4 - Understanding Embedded Fonts

Weft And Warp - DHTML

Gone are the days when Web sites were designed entirely in Arial Bold and Times New Roman. New embedded font technology allows Web developers to embed fonts directly into a Web page, thereby ensuring that it looks the same on all browsers. This article looks at previous workarounds to the problem, together with Microsoft and Netscape's new and competing approaches to the problem.

TABLE OF CONTENTS:
  1. Understanding Embedded Fonts
  2. The How Of Embedded Fonts
  3. Be True, My Doc!
  4. Weft And Warp
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 4
October 30, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
If you prefer doing things the Microsoft way, you can use WEFT to build embedded font files which are natively supported on Internet Explorer 4.x and above.

The first time you install WEFT, it will scan your system and build a list of all available fonts; these fonts are then displayed to you in a neat table with icons indicating whether or not they can be embedded into your Web page (many font authors do not permit their fonts to be embedded, preferring instead to charge users for the privilege). Once the database has been built, WEFT will ask you for a list of HTML pages to scan, and will build a list of all the fonts used in those pages.

At this point, you can select a subset of glyphs to be encoded into the embedded font file (identified with the .eot extension), and have WEFT generate the font files for you. Your decision on which glyphs to encode (because more glyphs means a larger file) should be based on the extent to which you plan to use the font; if you're using it for only a single line of text, it makes more sense to encode only a few specific characters.

WEFT's documentation states that the program can also edit your HTML files to include the HTML code necessary to get the font files to work; however, my experience was that the program ended up corrupting the HTML file instead. It's advisable to copy the code from WEFT's template, and paste it into your Web documents yourself.

Here's what a typical WEFT-enabled page looks like:
<html>
<head>
<style type="text/css">
<!-- /* $WEFT -- Created by: me (me@me.co.m) on 19-10-00 -- */
@font-face {
font-family: Staccato222 BT;
font-style:  normal;
font-weight: normal;
src: url(http://www.melonfire.com/staccat0.eot);
}
-->
</style>
</head>
<body>
<font face="Staccato222 BT" size="+1">Am I looking good today or
what?</font>
</body>
</html>
The CSS rule above will use the font located at the URL "http://www.melonfire.com/staccat0.eot" to render the characters on the page. Caveat: don't expect this to work in Netscape's browser.

Of the two approaches above, the TrueDoc format is preferable at the current time, since it allows users of either browser to view your embedded fonts correctly - a problem the OpenType format is yet to address. The WEFT tool is still under development, though, so keep checking the Microsoft Web site at http://www.microsoft.com/typography/ for updates on this issue.

Till next time...stay healthy!

This article copyright Melonfire 2000. All rights reserved.

 
 
>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: