Free font tools > WEFT > Font embedding for the Web
Font embedding demo 1
title: Healthy eating recipe
designers: Si Daniels and Geraldine Wade
This IE4 specific page uses four text fonts: Monotype Garamond, Monotype Garamond Bold, Vincent Connare's Goudy Stout and Monotype Script Bold. It also uses Monotype's Pie symbol font, drawn by Geraldine Wade.
The design process
Some type designers don't allow their fonts to be embedded, so the fonts we planned to use were first checked using Microsoft free Font properties extension. Checking the embedding permissions of the fonts first is the best way to avoid disappointment later.
The page itself was designed around a simple HTML table. Cascading Style Sheet features were used to specify fonts and ensure the correct alignment of the text and symbols. At this stage the fonts used were all installed locally.
When we were happy with the copy and layout, we used a tool code-named Microsoft WEFT (Web Embedding Fonts Tool) to create 'font-objects' which were linked to the page. The WEFT tool analyzes the font usage of Web pages, gathers up the required characters from each font used and creates the compressed 'font objects'. It also modifies the HTML page by writing in the Cascading Style Sheet code linking the font objects to that page. If you use 'view source' on the demo page you'll see the format of the code added.
font-family: Goudy Stout;
src: url(GOUDYST0.eot); }
This code tells Internet Explorer 4.0 to use the 'GOUDYST0.eot' font object whenever there is text on the page specified in the Goudy Stout font. Table 1 shows the fonts used by the page, the number of unique characters used and the size of the font object that contains them.
|Goudy Stout Bold
|Script MT Bold
Table 1. The font objects used by the page
Microsoft Web Embedding Fonts Tool
Microsoft WEFT is a tool that creates embedded font objects and links them to Web pages. The technology behind WEFT has been made available to the developers of Web site authoring tools. We've made WEFT available for free download.
How the page looks in other browsers
Browsers that don't support embedding will ignore the code linking the font objects to the page. Users of browsers that support Cascading Style Sheets will see text displayed in the real font if it's installed. As Goudy Stout and Garamond come with Microsoft Office, they may be in luck. If the first choice font isn't available the browser will display the text using the second or third choice fonts (if they are installed). Users of older browsers will see all the text displayed using their default font.
Symbol fonts are quite unlike ordinary text fonts. Type designers should map their symbols to the 'private use area' of Unicode. Symbols should therefore be referenced in Web pages by &#nnnnn; (where nnnnn is a value between 65280 and 65535). Unfortunately, Microsoft Internet Explorer 4.0 doesn't currently allow access to this private use area. For this reason these demos specify symbols using '&#' values between 33 and 255.
Using symbol fonts in this way is problematic. One thing to bear in mind is that text specified in an embedded symbol font will appear in an ordinary text font in browsers other than IE4.0 - even CSS browsers will not display the symbols properly. Using symbol fonts in this way is only recommended for Internet Explorer 4.0 specific content.
this page was last updated 30 December 1998.
Top of page