Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 
Updated October 22, 2001

CSS Tip:
Get Any Font You Want

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
November 2000
Vol. 3, No. 15
 • CSS Tip
 • JavaScript Tip
 • Beginner Tip
  

Have your heart set on using a particular font on your site? You may think your online video sales Web site won't be complete without the "Showtime" font. But what if your visitors' browsers don't have Showtime installed and default to Times Roman instead?

If your page requires an unusual font, you can embed it with a Cascading Style Sheet (CSS). But beware: this technique has some significant downsides.

Why Use Embedded Fonts?

Because a font is an operating system resource, not a browser resource. If you have an unusual font installed on your PC, it's easy to design a Web page and include that font. You can see it because the font is installed on your operating system. But if your visitors don't have it installed too, their browsers will display their default font instead.

From a page designer's perspective, this is a big weakness. You want pages to display like you intend, but can't control an individual browser's display. No matter how carefully you lay out your page with a particular font, you're at the mercy of the user's browser when the page is displayed.

That's where embedded fonts come in: with them, you don't have to worry about browsers defaulting to a more common font. Instead, your font downloads along with the page.

Apply the font by name to your page using either the <FONT FACE> tag or the FONT-FAMILY property in CSS1.

Embedding a font is a 3-step process:

  1. Locate the font and use it on your Web page.

  2. Create an embedded font file.

  3. Attach the font to your style sheet.

1. Locate And Use The Font

Finding fonts is easy. Open your favorite search engine or directory and search on terms like "free fonts" or "downloadable fonts." A recent search on Google under the term "free fonts" returned 112,000 hits. Once you've found the perfect font, you're ready to download it to your computer and use it in your page design.

Do some research first though: some designers don't allow their fonts to be embedded. TrueType fonts have embedding permissions encoded within them. Please respect the designer's wishes to avoid any potential copyright problems!

2. Create An Embedded Font File

You have to use a third-party application that creates an embedded font file using the font you installed locally on your hard drive. This task may be time-consuming because Netscape and Explorer both use different formats.

Recently though, Netscape updated its method to support Explorer browsers. Microsoft continues to use a proprietary technology.

Create embedded fonts using one of 2 available formats:

  1. Portable Font Resources (.pfr): TrueDoc technology was developed by Bitstream and licensed by Netscape. It can be viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac, and Unix platforms.
  2. Embeddable Open Type (.eot): Compatible only with Explorer 4.0+ on the Windows platform. Create .eot files using Microsoft's free Web Embedding Font Tool (WEFT).

After you've created the embedded font file, you're ready to attach it to a CSS.

3. Attach To Your Style Sheet

Instructions for this step depend on the type of file you created in step 2:

    Attaching A TrueDoc File

Insert a LINK tag between the opening and closing HEAD tags to attach a TrueDoc font:

<LINK rel = "fontdef" src="url/YourFontName.pfr">

If you want this to work in Explorer 4.0 and above, you need to add a pointer to an ActiveX control immediately after the LINK tag. TrueDoc.com has a tutorial on their web site that discusses this process. Otherwise, you can create an OpenType file for Explorer and refer to both on your page.

TrueDoc fonts stay within the browser: you can't download them to your system to use for other applications. This security feature protects visitors from inadvertently downloading malicious code and also protects the developer who may have designed the font or paid to use it.

     Attaching An OpenType File

Attach an OpenType file inside your style sheet:

<STYLE TYPE="text/css">
<--!
@font-face {
  font-family: Arial;
  font-style:   normal;
  font-weight: normal;
  src:url(http://www.SiteAddress.htm/EOTfileName.eot);
}
-->
</STYLE>

Unlike TrueDoc, OpenType files are accessed by the user's operating system. This means that users have the ability to download and use fonts on their own systems. This is a problem only if you're using a proprietary font.

Consider The Downsides

Embedded fonts may seem like the answer to a Web designer's dreams, but some visitors might not agree. There are two significant issues you need to consider before including embedded fonts:

  • Download Time: You could lose visitors because now they have to wait for the font to download before the page displays. For example, some sample .eot files we downloaded had an average size of 20-25k. That can significantly affect your page download time.

    Minimize this problem by only embedding unusual or obscure fonts, not common fonts that users probably already have installed.

  • Security Warnings: Depending on their individual browser settings, visitors may receive a security warning every time a page accesses an embedded font. Besides being disruptive, the warnings may scare visitors away from your site.

After you complete your page, let NetMechanic's HTML Toolbox analyze it. Toolbox will check your page load time so you can see how the embedded files affect your page speed. It will also alert you if you've used any other CSS properties that are browser-specific.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.