When you use a custom font in iWeb and then publish the page, your visitors most likely will not see that font because it is not installed on their computer.

iWeb usually provides an alternative font or if that alternative is not specified, the browser will use a substitute font that is on the visitor's computer.

The result will be different from your design in iWeb.

Note that this is not iWeb specific and will occur with every webpage you design.

A solution is to use an embedded font.

Here's how to do that.

For ease of use we'll use a Google font. These fonts are provided free of charge and are accessible from the internet. There's no need to put the font on your own server, although it's possible to do so if you want.

To use the font in iWeb you have to download it and install it on your own computer. Otherwise you cannot select it to format text. But for your visitors there's no need to install it on their computer.

So go to Google to select the font of your choice :

http://www.google.com/webfonts

To use the font, click the quick-use icon and read the instructions.

For our purpose we use this line of code in step 3 :

Add the font to your collection and download it.

After installing the font on your computer, you can now select it in the font palette to format text as usual.

To make the font available on your webpage after publishing, paste this JavaScript in a HTML Snippet.
As cssNode.href the URL to the font is used.

<script language="JavaScript" type="text/javascript">

<!--

var headID = parent.document.getElementsByTagName("head")[0];

var cssNode = document.createElement('link');

cssNode.type = 'text/css';

cssNode.rel = 'stylesheet';

cssNode.href = 'http://fonts.googleapis.com/css?family=Sonsie+One';

headID.appendChild(cssNode);

// -->

</script>

Publish your webpage and display it in a browser window.

Of course the font will display, because it's on your computer. To really test it, use another computer or delete the font on your computer first. When you open iWeb again, you'll get a message that the font is missing. So it's up to you to verify that the font is properly displayed in the browser.

Here's the result :