Home arrow DHTML arrow Understanding Embedded Fonts

Understanding Embedded Fonts

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.

  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


For a designer working in the Web medium, perhaps the most frustrating thing is the difference between the design he's created on his whiz-bang 32-million colour SGI workstation, and the way it looks in Netscape 3.0 running on a 256-colour PC. Sometimes the colours don't look right; sometimes the text is too large or too small; and sometimes those fancy dHTML effects don't just refuse to function, they can actually break the browser.

One of the most common problems, though, has to do with the fact that when a user visits a Web page which has been designed using non-standard fonts, the browser will use default fonts to display the content on the page. Now, if the page was designed using 26-point Argus120 Bold Italic and the browser's default font is 10-point Times New Roman, you can understand why the designer would be pulling his hair out in frustration...and why the user would be so turned off, he wouldn't come back for a second visit.

In the past, a number of attempts - some of them quite ingenious - have been made to find a solution to this problem. One of the most common is to use an image instead of regular text for the content which is to be displayed in non-standard fonts. Since all browsers can display GIFs and JPEGs, many designers simply create an image containing text written in the special font, and stick it into the page at the appropriate points.

The downside of this approach is that it's not very elegant - imagine a page which contains "regular" text and "image" text combined together, and then imagine how ugly that page would look to users on a slow connection. Even worse - what if the user's browser is entirely text-based, or has images turned off? The page would be completely unreadable...

Another approach is to clearly state - as some foreign-language sites do - that the Web site requires special fonts to be correctly viewed, together with a link to the font files and installation instructions. The problem: most Web surfers don't have the patience to download and install font files, and are more likely to click out of the site instead.

Finally, of course, you can just restrain your designers to designing with the fonts available on most machines. This is not a perfect solution - try telling a designer he can't use orange PineTreeTop Bold and you'll see what I mean - but it does offer the most practical solution to the problem to date. It also doesn't address the issue of non-Windows browsers - for example, Windows PCs may have Verdana installed by default, but Linux boxes don't.

Ideally, what is needed is a method to include the font file with the Web page, such that the font is rendered correctly in the client browser, regardless of platform or browser type, or of whether the font file is already present on the target client.

Enter embedded fonts.

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


- 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: