Tips and Tricks

Web safe fonts for iWeb

Imagine the scene.  You have found a gap in the internet that you feel you could exploit with a web-site. You book some holidays from work and take three weeks to design your perfect web-site. All the images are there, you have customised the theme just the way you like it and everything looks great. You get yourself a domain name and some webspace, but before you go ‘live’ with the site you ask your PC using friend to take a look and let you know what he thinks (feedback is always good). ‘It looks great’ says your PC using friend ‘except the font looks really crappy!’ Aaaaagggghhhh!!

As a Mac (and more importantly Safari) user when we you design a web-site you must remember to use a compliant font. As bad as it sounds, Internet Explorer is the world’s leading browser and some of the fonts that we Apple lovers use are not readily available to those PC using ********.

Luckily for us there are several good looking fonts that are common to both sorts of browser and in this post I have compiled a list for you to use

Obviously if you know the main bulk of your iWeb sites visitors are using a Mac or you have a web-site called SafariUsersOnly.com then you don’t have much to worry about, but if you have a web-site aimed at the whole world you really need to pay attention to which fonts you use. What would be the point of you spending hours and hours design your dream site with iWeb, only for it to look a complete mess when somebody opens it up in IE7. If a visitor to your site doesn’t have your favourite font installed on their PC when the site loads, the browser will just pick another on by default (normally something like Arial or Times New Roman, mmmmm!!)

If you take a quick look through this list for the web-safe fonts and apply them to your site before you publish, you can be secure in the knowledge that (hopefully) the way you designed it will be the way it looks. A beautiful site is a ‘sticky’ site and you do want repeat visitors don’t you?

WEB-SAFE FONTS

Fonts can be divided into four categories,

  1. Sans-Serif (such as Arail, Verdana or Tahoma)
  2. Serif (such as TImes New Roman, Bookman Old Style or Geogia)
  3. Monospace (Courier or Lucinda Console)
  4. Cursive (Comic Sans MS)

and to decide which ones you like best, here is the complete list of fonts split into those categories. I have listed the fonts with their ‘Mac’ name. Some fonts look the same on Windows PC but have a different name (shown in brackets). Therefore they can be added to your css stylesheet after publication.

Serif

  • Georgia
  • New York (MS Serif)
  • Palatino Linotype (Palatino Linotype, Book Antiqua)
  • Times (Times New Roman)

Sans-Serif

  • Arial
  • Arial Black
  • Geneva (Tahoma and MS Sans Serif)
  • Helvetica ( also Trebuchet MS)
  • Impact
  • Lucida Grande (Lucida Sans Unicode)
  • MS Sans Serif
  • Tahoma
  • Trebuchet
  • Verdana

Monospace

  • Courier New
  • Monaco (Lucida Console)

Cursive

  • Comic Sans MS

There is another fonts you can use (but why would you?)

  • Webdings

So to ensure your design doesn’t fall apart and looks consistent across all browsers, make sure you use one of the fonts listed above.

You may also like

10 Comments

  1. Thanks for the tips

  2. Hi,
    Firstly, let me say thanks for a great website. Its been very helpful.
    I’ve been working hard for the past month trying to finish my new iweb site.
    http://www.imageworkscyprus.com
    I followed your instructions and changed my entire site fonts to Helvetica, converted all my images to jpeg and lost all the photo galleries & blog pages. I thought I had solved the problem, only to find that when I opened it on IE7 with Vista, the font had changed and re-aligned.. I think it converted it to arial…
    You mentioned adding the font to your CSS style sheet, Can you tell me how i go about doing that please..

  3. Hi! Thanks for the great list and informative site. It would be really useful if you could reply to Ben’s question above as I have the same problem- how do I add the font to my CSS style sheet using iWeb?

    Thanks!

  4. Seconded! (or thirded) How do you change the css in iweb?

    1. Caroline,

      you have to save your iWeb site to a folder and then edit the CSS files within that folder. Sadly iWeb creates a CSS document for each page rather than the whole site so if you have a big iWeb site it could take a while.

      Tim

  5. May I know how to add the ”share this knowledge” widget to iWeb? Thank you

  6. Hey Tim,

    Great posts that you have here on All About iWeb.

    I have a question, even a simple font like “Arial Rounded MT Bold” would have some problems on IE?
    I am wondering, as it is still “Arial” I guess.

    Thanks for the feedback.

    Cheers,
    MiG

    1. MiG,

      It will create problems, yes. It may be in the Arial family but it isn’t plain ol’ Arial. That said, it is quite a common font on most users machines so me personally, I would use it if the site called for it.

      Tim

  7. Thank you for a very useful site! I’ve just spent the evening redoing all my pages so that iWeb makes them text not images as I was worried about acessibility. I’ve used Verdana as I loathe Arial. However, nearly all the iWeb designs seem to use Arial for the navigation. Do you know if there’s any way to change it, or if there’s a template that uses Verdana that I could cannibalise? V grateful for any help!

  8. Does anyone know how safe/reliable ‘Cambria’ will be for my site?
    Cheers! Ty

Leave a Reply to Joe Cancel reply

Your email address will not be published. Required fields are marked *