If you have spent ages on your iWeb site design, the last thing you want is to be restricted to which fonts you can use. In iWeb it is simple to change all of your text into images so that you can use that totally funky font that you always wanted and all your site’s visitors will see it exactly how you planned it.Before I start this tutorial I must stress that a balance must be met between how much text you turn into an image and how much you leave as plain ol’ type fonts. iWeb does not add ‘alt-tags’ to images so converting all of your text into graphics will have a serious effect on your search engine standings. Because your all of your copy will become one big image all of your long thought-out keywords will be lost.
Additionally, images take longer to download than plain text so if your page takes too long to load, there is a good chance you will lose visitors to your site.
Personally I would restrict changing fancy fonts into images to just major items such as headings or the site header. That way all of your keyword rich copy text is left intact for search engines to find. So let’s get on with the tutorial.
Once you have opened iWeb and navigated to the page you want the text/image to appear on, open up ‘Inspector’.
You can see from the image above I have selected a font that isn’t a standard web-design font and so if a non-mac user visited my site they would probably see the header in Arial, Verdana or another sans-serif font. This is not what I want as the font is vital to my corporate image.
Once ‘Inspector’ is open I select the Graphic tab from the top. Select the text you want to change so that the handles appear around it then set the shadow settings to those shown in the Inspector example below.
When you now save your page, iWeb will convert your text into a PNG image rather than leave it as plain text. That’s it, job done. You can now be sure that your iWeb site’s visitors will see your header text exactly the way you planned it.
After having received an e-mail about this not working with certain fonts and if you are having problems a little tip to ensure that your text will be saved as an image is to click on the ‘iWeb’ menu (top left) and select ‘Preferences’. Then add a tick in the box that highlights when your text will be saved as an image. Each time you follow this method in the future a little yellow icon will appear in the top right corner of the text box and you can then lower or higher the Opacity settings to suit.
Of course, you don’t have to copy my settings exactly. If you like a bit of shadow on your header image leave a little there. Let us know how you get on with your text, leave a link in the comments so we can take a look.