September 12, 2007
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!
About This Article
This entry was posted by Suzanne on Wednesday, September 12th, 2007 at 12:57 PM and was filed in the FAQ category using the tags: fonts, screencast, tutorial. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.
Why does my blog entry URL use the default entry name rather than the name I gave it?
So Many Questions, So Few Answers
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
Thanks very much for this. Super helpful as always. On another topic, I’ve been searching round your site for tips on how to make an iweb blog not look like an iweb blog… do you have any posts that fit that bill?
Thanks again Suzanne :o)
You can’t do much with the blog as far as rearranging it I’m afraid. You can if you monkey with the template XML, but that’s a tedious job to say the least :-/