iWeb for Musicians

Web Safe Fonts and Colors

Main Navigation:



If you use fonts that are not from the web safe list, when your page is download to a PC that doesn’t have this font, it will substitute and screw up your layout.

For special occasions, when you must have that really sharp font, convert it to an image. The iWeb Help Menu will tell you how.

If you don’t have it, create a new collection called “Web-safe Mac/Windows in your fonts window and drag all these fonts into it to save you time.

Web Safe Fonts & Colors

Web Safe Fonts

For Mac & Windows:


Arial Black

Comic Sans MS

Courier New





Times New Roman

Trebuchet MS


You can create beautiful colors and gradients on your Mac but the poor old PC users will never be able to appreciate them.

So that your website doesn’t look inspid to the rest of the world, use web safe colors.

Click on the middle icon in the color window menu bar and then navigate the “Palette:” drop down to “Web Safe Colors”.

You can see that I have saved a few in the swatch boxes at the bottom of the Color window. This is done by selecting a color in the color box and dragging it down. When you click on a saved color it appears in the main color box.

The standard view shows only 15 swatch boxes. Click on the small dot at the bottom of the color window and drag down to expand this to accommodate up to 150 swatches.

You can overwrite any swatch by dropping another color onto its box.

I’ve added Hex Color Picker to my Color Window.

This useful plugin will give you the color # of any color in the main color box or, conversely, give you the color that relates to any number you enter.

The plugin is added to the ColorPickers folder in your user library.

If you don’t have this folder then just create it.

The plugin can be downloaded by clicking the icon.

Please donate if you find yourself using this incredibly time saving plugin.

Hex Color Picker

Click the icon for more info

Copyright © Roddy McKay - 2009 - All Rights Reserved

Next Page

Color #s are used to customize the projects in the How To Build A Custom Website ebook...

Example Code to pasted into an HTML Snippet:



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Font Face Demo</title>

<link rel="stylesheet" href="http://www.domain-name.com/font-face/architect/stylesheet.css" type="text/css" charset="utf-8">

<style type="text/css" media="screen">

h1.fontface {font: 20px 'ArchitectsDaughterRegular', Arial, sans-serif;letter-spacing: 0;}

p.style1 {font: 16px 'ArchitectsDaughterRegular', Arial, sans-serif;}

#container {

width: 725px;

height: 350px;

margin-left: 1em;

padding-right: 2em;}




<div id="container">

<h1 class="fontface">@font-face Demo using the Architect Font</h1>

<p>This demo uses a non websafe font. A font-face kit is upoaded to the server. The fonts are made available in different formats to suit all the popular browsers. </p>

<p>This is not the quickest way to apply text to an iWeb built website but it allows you to use that special font without resorting the insane practice of converting text to images.</p>

<p>Get started by choosing and downloading a font kit at <a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel</a>.</p>

<p>Upload this in a font-face folder to the root folder on the server and referrence the CSS stylesheet in the head of your HTML doc. </p>