About This Article •
Folks there’s a great new hidden feature lurking in iWeb 2.0 that will allow you to control how fonts are used and displayed for PC’s! I’m not actually going to write this out because it will take a long time to explain it. But you have this cool video to watch instead… fair deal no??? [...]
September 12, 2007 12:57 PM
« Why does my blog entry URL use the default entry name rather than the name I gave it?
So Many Questions, So Few Answers »
Folks there’s a great new hidden feature lurking in iWeb 2.0 that will allow you to control how fonts are used and displayed for PC’s! I’m not actually going to write this out because it will take a long time to explain it. But you have this cool video to watch instead… fair deal no??? Watch and learn how to conquer the PC font war!
Great job, thanks.
You’re welcome :)
Ok, so is there something in that plist file that will determine whether a font is changed to an image? Or, can you say for Mac users, use the font, for Windoze users use an image instead?
That I don’t know. I don’t even know if that file contributes to whether something is converted to an image or not. I haven’t had a chance to tinker in that area yet. Perhaps some of you guys can test those theories. If anyone finds definitive answers, I’ll do a little video on it.
To answer Bryan: set value of Image key to true in the plist will force iWeb to produce text (of the changed font) as image instead of text.
iWeb even label the text box as image, in its canvas.
Ah, right… I mumbled about that setting in the video but mentioned I wasn’t sure what it did. Here it is. Change the word “false” to “true” (in red).
<key>AmericanTypewriter</key>
<dict>
<key>Generic</key>
<string>serif</string>
<key>Image</key>
<false/>
<key>Windows</key>
<string>Courier New</string>
</dict>
Thanks for the great info. A couple of questions though:
1. After changing the plist file as you suggest, how do you get iWeb to update the entire site? Publish All?
2. I’m using Hoefler Text on one of my sites. I modified the plist to tell windows to use Georgia since its a very similar font. I’m still very disappointed with how the fonts look on windows. Granted its been a year since I’ve given up on windows but do fonts really look that much worse on windows?
Hum… you know I’ve never tried that so I’m not sure. Your guess sounds logical though… a publish all logically *should* take care of that, but I’m guessing with you. If you try that, let me know what you find.
Here’s the thing with Windows. By default, the operating system shipped with rough fonts as the default. This applies to earlier versions by the way. I believe Vista has font smoothing enabled by default.
Anyway, in the earlier versions of Windows, you always had to go into the settings and enable what they call ClearType. Now why they didn’t just ship with that enabled I don’t know but I suppose that had something to do with memory optimization when PC’s still shipped with 64 or 128 megabytes of RAM.
So, the moral of the story here is, fonts won’t look bad on every PC, just the ones that haven’t been properly configured and you’ll find those in every business building on the planet. Corporately managed PC’s are always crap. JavaScript is turned off, font smoothing turned off, security applications blocking features that Mac people have come to love and depend on… PC users get none of those luxuries, particularly in business because those can all be “management hassles” and “unnecessary features”.
You never know exactly what to blame when it comes to the PC world. There are numerous things that contribute to poor display and you never really know which combination is in effect on the particular machine you’re using to view your site. It’s a crap shoot. That’s why I just do not get my undies in a bundle when someone says, “Oh my god everything looks like crap in IE!” It’s most likely just that machine or those machines at that company.
Window wisdom for the day :)
Hi all,
Thanks Suzanne for the plist “how to”. But I like to point out another not so hidden feature in iWeb 2.xx which enables to use whatever fancy font you like.
-Go to the preferences i iWeb and check the box where it says something like “show textboxes that will be converted to graphics” (I’m not at my mac right now)
-Next grab one of this text boxes in your iweb page (most likely a heading)
-If it is in the header part of the document you have to hold down the Apple key at the same time and alt- if you wont to copy it rather than drag the original.
-Change the font, size, style or whatever at your leisure
-When published Iweb will now make a graphic of your text.
-Now you will see the original font on a PC, in Firefox or whatever, regardless of the original font you choose.
-Works great, even if you cant chang font size manually when you view the page in your web browse.
-I use it for making menues with the same font as well. Just remember that you have to mark the box, not the text in the box, when you create the link.
Well let’s clarify a couple of things here… You’re implying that by turning on the option in the preferences (show text imaging indicator), the conversion to an image will now happen and that’s not true. The option in the preferences is not the switch that controls whether text gets converted to an image. It’s just an indicator symbol that appears if the font you used is configured in the plist to be converted to an image.
The conversion happens becuase the setting in the PLIST file tells it to. For each font listed in the PLIST, there are two lines that control whether that font will be converted to an image or not. They are:
<key>Image</key>
<true/>
A value of true means that font will be converted to an image. A value of false means it will remain as text and the font used on computers that do not have that font installed will default to the font family specified in the published CSS, generally “serif” or “sans serif”.
So let’s put that all together now. If you have the option “show text imaging indicator” enabled in your preferences and you use a font, specified in the PLIST file FontMapping.plist, that has an Image value of “true”, and if you use that font on your iWeb pages, you will see the text imaging indicator in the upper right corner of the text box as shown here.
Again, that option in preferences does NOT dictate whether fonts get turned to images. It only “indicates” when a font will be converted. The conversion rule is stored in the plist file and can only be controlled from there.
Suzanne,
I beg to differ, it works for me.
Look at this dummy:
http://www.tongang.se/Bulstrode/Bulstrode/Om_Bulstrode.html
It’s in Swedish but never mind.
I used the font JSL ancient which is a most uncommon font bases on a 17th century typeface. I followed the workflow described earlier and I can see the font displayed - as graphic - in IE on my PC (which definitley does not have this font installed)
JLS is btw not listed in my Iweb plist….
JSL is not listed in the plist file Jan - any font that has no entry will automatically be converted to an image if it doesn’t fit the generic font families - neither you nor iWeb has any control over it at that point. This has absolutely NOTHING to do with the option in the preferences. Your “workflow” is NOT the reason that font is converted to an image at all.
Thank you very much for this - I have followed it on the edge of my understanding but your clear unhurried explanation has got me there!
I use a font that is not in the plist [papyrus] which will be converted to an image. Does that mean that my site will download more slowly on a PC than if I used a Windows known font?
Well, technically yes, it will download more slowly on any machine, Mac or PC because the text will be an image, not text.
One thing you can do Mark is add Papyrus to your FontMapping.plist file. You can duplicate an entry that already exists and change the “key” (font name) to Papyrus.
I would suggest you duplicate the entry for Copperplate. Copperplate is already set up with values that would work nicely for Papyrus. It uses the generic family, Fantasy, and substitues Trebuchet MS for windows machines. It’s also set NOT to generate images so you’ll always get text. Here’s how your finished entry would look:
<key>Papyrus</key>
<dict>
<key>Generic</key>
<string>fantasy</string>
<key>Image</key>
<false/>
<key>Windows</key>
<string>Trebuchet MS</string>
</dict>
You can, of course, specify any font you wish. You do not need to specify Trebuchet MS, but you need to pick a font that you know will be on every windows machine. Trebuchet is a great choice if the font you’re using is Papyrus though. Not to mention, Trebuchet renders very nicely - better than Arial when you’re talking about block text at small font sizes.
Great - thank you for that Suzanne,
However I called at my local Public Library today and looked for the first time to see what the type-face looked like on a PC.
It didn’t seem to be a graphic - it was very similar to the Papyrus that I used but blocky and the capital letters dropped below the base line of the text.
Does this imply that the Library’s machines have a version of Papyrus on them? If so this is hopeful because they are bog standard machines without anything fancy on them - not even IE 7 or QuickTime - so perhaps it is a common Windows font.
I will check with a Windows user and try to get a screen-shot to see what’s going on on another machine before I make the alteration to the FontMapping.plist file that you suggest.
Did jwalther420 ever get back to you on the updating question? [above 3 weeks ago]
If you’re seeing the little “text to image” indicator in iWeb then your text is being converted to an image by iWeb. I’m not sure what you meant by it “seemed” to be text when you viewed it on the windows machine, but if it looked like Papyrus, it likely was an image.
Papyrus is not an uncommon font however. There are a few Windows applications that provide that font. Nevertheless, you’ll have to decide what’s best for you and your viewers… preservation of the look of the font or setting up a conversion entry in the FontMapping.plist file.
No, the previous user hasn’t said anything more about that topic.
When I need a font to become a graphic, I do it right there in iWeb by putting a shadow on the text and setting the opacity of the shadow as low as it will go (1%). IWeb converts the text into a graphic.
For a lot of text, I agree it’s better to use a PC friendly font (and for people to be able to size, copy & paste your text). But when it has to be right, it has to be right.
Is this an OK workaround?
Hey that works as well as anything else. Using that approach, you’re getting full control over which blocks of text change to images so yes, I would say it’s a perfectly good work-around.
Hi Suzanne,
Just joined as your How-To are just what the doctor ordered. I am helping a friend by creating her website. Nothing fancy I used the Herculanum font which she likes but..yep here’s the but…the font is not present on a PC. For now I applied Apple’s suggestion to add a shadow w/ 5% opacity which converts the text ino an image.
Here’s the link:
http://homepage.mac.com/myself.with3rarities/test/Site/SubCulArts.html
Now to do this for the whole website would bog it down so here’s what I’m planning and appreciate your opinion.
I found a Herculanum equivalent for PC called slayer here:
http://www.urbanfonts.com/fonts/Slayer.htm
I’d ask PC visitors to install this font so they can view the website; I’d have them d/l it at the welcome page.
Using your method and Text Wrangler I saw that Herculanum is not listed in the FontMapping.plist so is I’d add it as such:
Herculanum
Generic
fantasy <==(am not sure what to put here)
Image
Windows
slayer11
Thanks for reading and any pointers
Frank
Hi Frank - okay this is a great case study as far as font usage is concerned.
First, yes, you’re right. Converting a lot of text to an image will create an overload on the site.
Second, the approach you’re considering here is probably the best choice - I agree. I’m not sure you’re going to get people to install a font though… most people probably don’t know how to do that and of those that do, I don’t think many would just to see the site as it was intended. I’m a visual person like that and even I wouldn’t bother. But assuming people will, yes, your approach is probably the most efficient.
Your fontmapping entry should look like this:
<key>Herculanum</key>
<dict>
<key>Generic</key>
<string>fantasy</string>
<key>Image</key>
<false/>
<key>Windows</key>
<string>Slayer11</string>
</dict>
However, I’m not sure, and maybe someone can confirm this… The “generic” specification there may or may not apply to both Mac and PC. In other words, if the user does not have Herculanum OR Slayer11 installed, then default to the fantasy font category.
I think that’s the case because without the image key enabled, no images will be created. The PC will have to default to something if Slayer11 is not there. I’m guessing it WILL using the fantasy setting but if it does not, the user will see the default font set in their browser preferences…. generally Times New Roman if they have not set it to something else.
The font that’s used first for the Fantasy category is Papyrus. If that font does not exist, they system will look for the next font designated in the fantasy category. I’m guessing it does this alphabetically, but I’m not sure.
In any case, you’ll have to accept the fact that those that do not download Slayer11 will likely see Papyrus instead. If that font does not work well with the theme, you might want to consider specifying a known web font instead of “fantasy” for your generic specification.
Let me know when you have this ready to go and I’ll check it out on Windows IE6 - bland installation.
Suzanne, hi
Ok, maybe I am a little slow…
Your video was great, very easy to understand… the problem I have is that when I open fontmapping.plist it get converted to OmniOutliner (tried open it with other applications - did not work).
How do I open the plist like you did to make changes?
In the mean time, I added a 1% shadow…looks great, but does slow down the viewing - too many images.
Thanks,
Jenn
Suzanne,
first, let me add my voice to the chorus singing your praises for the fantastic help you provide.
While I’ve used other web creation software (WordPress, GoLive, Dreamweaver, etc.), I decided to use iWeb for my blog. As is the case for many, I wish I could create an amalgam from all the web creation software, using the best features from each.
I love iWeb’s ease of use, but I have stumbled upon certain oddities and such.
In reference to this thread, the font I’m using for all my headline text is Hipster. I have no idea where I got it - just one of those fonts you see, like, and throw into the folder.
Problem is, iWeb is not converting Hipster to a graphic. I am using a drop shadow but still no graphic.
I opened the .plist file and found no entry for the font, so I did as you suggested - I copied the font mapping code for another font, made the necessary changes and added the code.
I used the fantasy category and had image set to true. Still no luck. Any ideas? I can post the font for download or e-mail it to you if that would help, as I’m at a loss figuring out why it won’t generate an image. My workaround is making the graphic in Photoshop and saving as PNG.
I’d be greatly appreciate for any help.
Thanks,
crooner
Jennifer - use TextEdit to open the file.
Darin, I checked out your site. Your headings are images. Is that because you created them? I’m not sure how iWeb isn’t creating images for that font. There’s no way anyone has that font without downloading it from the net and iWeb would know that.
Let me know if the headings you have out there are images *you* created and dropped in there. I’d like to have you publish an entry where you simply type your text, using the Hipster font and then publish it.
Remove the entry from your plist first though - go back to default there. Then I’ll view it from my end. I just don’t know how else iWeb could handle it without converting to an image when I don’t have that font (or do I?) If it appears in Arial or Verdana, then that will tell me something as well.
Suzanne,
thanks for the fast reply!
Yes, the images in the headers are PNGs that I made in PhotoShop. I simply added them to the page wherever I used Hipster, as iWeb was not generating them as graphics.
Now for the weird part.
Have you ever had a problem with something not working, such as your mouse not tracking or your car’s directionals not behaving, that lead you to have a repair person take a look, only to find that the problem is gone and everything is working fine?
Yesterday, PhotoShop was quitting every time I clicked into the font list. I scanned for bad fonts but that did nothing. Finally, I cleared out all caches on my Mac and restarted. The next time I opened Photoshop, I saw the type tool re-initialize and lo and behold, no more quitting.
I mention this as I now think that clearing the caches fixed my iWeb problem. Yep, after reading your reply, I opened up my site and deleted a few homemade graphics and replaced them will normal text boxes. Sure enough, when published, iWeb generated the PNG for me. I also replaced my modified font mapping file with the original.
Just to confirm, if you could swing by again and test this out I’d be most appreciative. The first page is the place to look, as is the about me page (who? me?). All headers were created by iWeb text boxes and no PhotoShop made images are on that page.
One stupid question… by generating the PNG, will iWeb display that universally for the site or will it display a substitute font on windows or other OS’es?
Thank you so much again,
Darin
P.S. Off topic, but is there anything on horizon that will allow for categories in iWeb? I wish that was in there!
Okay on your Who? Me? page, I see only one Hipster-based block of text and that happens to be the page heading that reads:
Just who do you think I am?
There are no other instances of that font on the page so if you have some in your page design, then iWeb is definitely substituting a web font for me because I don’t have that font.
For your blog entries, when you view the actual entry, the title appears in the Hipster font as an image. I did not expect the Blog index / main summary page to display images for the summaries - those are generated by some clever HTML and CSS embedded in the XML.
Report back.
Suzanne,
Just wanted to let you know that all is now well as far as text appearing properly goes.
Thanks so much for your help.
Darin
(Still hoping for a way to have categories listed on your “home” page in iWeb.)
Suzanne,
Thanks for some great insight into iWeb! I’m currently using it to completely redesign my company’s website.
I’m having issue with adding fonts to the plist file. Specifically, Abadi MT Condensed Extra Bold and #HeadLineA.
I’ve tried many different combinations of font families, but no luck. iWeb just won’t turn the fonts into graphics.
Is there any way to find out if I’m inputting all the info correct? Here is what I have currently:
#HeadLineA
Generic
sans-serif
Image
Windows
Courier
Abadi MT Condensed Extra Bold
Generic
sans-serif
Image
Windows
Verdana
Thanks!
-Michael