A few hours ago I published a tutorial on the easy way to insert the header tag into your iWeb site, but it seems a few of you are having problems. The may not be as foolproof as first thought. The troubles seem to be arising with those of you who are using ‘Sans-Serif’ fonts (such as Arial, Verdana or Tahoma) in between your header tags. By default iWeb doesn’t include CSS for header tags within its pages so a browser will just default to a large serif font in black.
Don’t worry though, I have found a solution and it is really easy too. We just have to use a little bit of extra code in the text-box.
Before you add in this little bit of extra code however, you have to make a note of the font you are using, so just highlight the word(s) of your title and open the font viewer. In this instance I am using a black Helvetica size 30px.
That done you can now insert the following bit of code into your text-box in place of <h1> from the previous tutorial.
What’s the difference? We have simply added a bit of inline CSS styling to tell the browser what font we want to use and how we want it to look. You will notice that I have reduced the size of the title so that it all fits in the box. As we are now using CSS to control how the title will look in the iWeb page we don’t have to keep it at its original size (as I said above, black 30px Helvetica).
Of course you are not stuck to the font or it’s size and color I have used in my code snippet, you can make them whatever you want; simply change the values highlighted in red below.
<h1 style="color: #000000; font-family: verdana; font-size: 18px;">Your Title Here</h1>
For more examples of color codes you can take a look at Cloford.com which lists more than 500 of the most popular colors; the font names and sizes you can check yourself in FontBook (it’s in your Applications Folder).
Now all you have to do is follow the rest of my previous tutorial from where you have to open Rage’s iWeb SEO tool and place a tick in the right box.
And when the site is published you will see that the font is a sans-serif font as we originally planned it to be.
I hope that has sorted out the problem for all you sans-serif font users, if not leave a comment and we can try another method.