October 6, 2008
Every so often I get this question so I think it’s worth revisiting the topic. I know I’ve written about it previously but it’s likely buried in the archives somewhere. So grab something to drink and let’s review.
First, the problem: You can design your iWeb pages with any font you want, but unless that font is installed on the computer of the person that’s viewing your site, they will NOT see that font the way you see it. Sometimes iWeb converts your fonts to an image to preserve the way they look, but that’s not always the case. If the viewer’s PC doesn’t have the font installed, some other font, a font less interesting or even out of place, will be displayed.
With iWeb 2.0, Apple includes a file that allows you to manage this situation. The file is not exposed through the iWeb interface yet, but that doesn’t mean you can’t open it, edit it and take advantage of its magic. The file is named FontMapping.plist and it’s located within the application itself at this path:
/Applications/iWeb.app/Contents/Resources/FontMapping.plist
If you go to Finder and select Go, Go to Folder… from the menu, you can open the Resources directory in once quick step.
WARNING: MAKE A BACK UP OF FILES YOU EDIT - YOU’VE BEEN WARNED.
Open FontMapping.plist with TextEdit. If you know what you’re doing here, you can use any text editor or code editor.
This plist contains entries for all of the fonts installed with iLife and many other popular fonts you might use in your iWeb pages. The plist maintains a kind of reference library that tells iWeb what to do when you use any of the fonts listed here. If you use the Cracked font (which is definitely not on any PC) what should iWeb do when a PC user visits your site? Should it create an image to preserve the look of the font? Should it default to a standard web font? Should it substitute a font you specify? FontMapping.plist provides all of these rules to iWeb and you can set them yourself.
Let’s take a look at how the font entries are structured. Here’s the basic pattern you’ll find for each listing.
<key>AmericanTypewriter</key>
<dict>
<key>Generic</key>
<string>serif</string>
<key>Image</key>
<false/>
<key>Windows</key>
<string>Courier</string>
</dict>
You’ll notice that each entry for each font starts with <key> and is followed by its own <dict> or dictionary. The <dict> section for each font entry has three keys or what I would call rules. Let’s look at those keys, but let’s look at them in reverse order.
The Windows Key
The Windows key, or rule, asks, “If the font on your iWeb page is not installed on the visitor’s PC, which PC font should I use?” It’s best to use web fonts here because those are the only fonts that are guaranteed to be on a PC. They include Times New Roman, Georgia, Arial, Verdana, Comic Sans MS, Trebuchet MS, Impact, Brush Script MT, Arial Black, and Andale Mono.
The Image Key
The Image key, or rule, is a true/false setting. This setting tells iWeb whether or not to convert the text to an image to preserve the look of the text. If it’s an image, every user on any computer anywhere will see the text exactly how you created it. No fonts are necessary - it’s now an image. There are major drawbacks to having your text converted to an image however so this key should not be set to <true/> unless it’s a highly decorative or creative font (likely used only for headings).
The Generic Key
The Generic key, or rule asks, “Which font family should I default to if 1) we’re not converting to an image and 2) the visitor’s computer does not have the specified font installed?” Font families are standardized classifications for fonts and they include: serif, sans-serif, monospace, cursive and fantasy. If the visitor’s computer does not have the font you specified and your text was not converted to an image to preserve its look, then iWeb will tell the computer to choose any font it does have from the font family you specify. For example, if you specify the serif family, fonts like Georgia or Times New Roman will be used. If you specify sans-serif, fonts like Arial and Verdana will be used.
Knowing how these three keys, or rules work, you can edit this plist file to meet your needs and the needs of those viewing your web site. Be very careful not to make mistakes however. One small type-o in a plist file and the entire application will throw very confusing errors. So 1) make a back-up copy of the file before you edit anything and 2) if you get errors, you have a type-o. Don’t write to me asking for help finding it :-b
After you’ve made your changes, save the file and exit. To force the change into your iWeb pages, you need to republish your entire site - every page.
I’m betting that you will see access to this file through the iWeb interface in coming releases of iWeb so the manual editing of this file should be short-term. That shouldn’t stop you however, from making the necessary edits that make your site appear as best as possible on all computers.
Create Cool Stuff!
About This Entry
Pre-Releases Posted for Three Themes
Troubleshooting Theme Installation Problems
Here’s a tip for those that want to ensure fonts get converted to images but might be wary of making changes to their FontMapping.plist.
1) Create a rounded rectangle.
2) Change it’s Fill and Stroke to None.
3) Use the dot near the corner to make it’s corner radius zero (a square corner).
4) Type in your text.
The reason why you should use a rounded rectangle instead of a rectangle is because a rectangle with a Fill and Stroke of None gets recognized by iWeb as a text box which is again subject to what iWeb feels should or should not be rendered as an image. Using a rounded rectangle with no corner curve gives the layout you’d expect from a text box, PLUS the sure knowledge that it’s going to be converted to an image!
Hey that’s a great tip Ken - thanks!