|
CSS Tip:
Get Any Font You Want
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
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:
Locate the font and use it on your Web page.
Create an embedded font file.
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:
- 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.
- 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.
|
