Font works in IE but not Firefox?

[Mike Dragonetti]

Hi,

I'm having a devil of a time trying to get a font to work.

The Tempus Sans font works just fine in IE and Dreamweaver, but I can't seem to get it to work in Firefox. Shows a garish times new roman. Could someone view source the page and tell me what I'm doing wrong?

http://www.childrenliteracysociety.org

Thanks in advance!

Mike

[ralph.m]

You have to be careful using any old font on a website. Unless you use standard fonts that most people will have on their computers, your chosen fonts won't be used, as they have to exist on the user's computer. On thing you need to do to prevent this is to list fallback fonts for those who don't have your preferred font:

font-family: 'preferred font', fallback1, fallback2, fallback3, serif;

An alternative is to use @font-face (though there are licensing issues), or use a service like Typekit to serve up fonts, but this is still developing technology and not totally reliable.

I don't know why the font is showing for you on IE and not Firefox, but I'm alerting you to the bigger issues here.

For me, that font doesn't show up on any browser, as I don't have that font on my computer.

[Black Max]

Not to mention there are different varieties of Tempus Sans...

I just took a quick peek at your code. There's some ginchy stuff in there though nothing terribly invalid (though there are validation errors that should be addressed). Your Cufon script looks okay, and that's what should be determining the font usage in the <p>text. I haven't gone over your code closely, but it looks like the <span class="style6"> code is overriding Cufon. Take the <span class="style6"> out of a paragraph and let the paragraph stand unstyled:

<p><img src="butterfly03.gif" longdesc="" />Children's Literacy Society (&quot;CLS&quot;),  a 501(c)3 not-for-profit organization,   is the resource provider of after-school enrichment programs for at-risk children in Staten Island with a*concentration in Richmond County.<br />

and see if that makes a difference. As Ralph notes, you're seeing the page display on your machine because you have Tempus Sans on your machine. We don't, and I'm not seeing it on any browser -- Opera, FF, or IE. We're seeing it in our default browser fonts. I'm guessing that "garish Times New Roman" is the default in your copy of FF.

On an aesthetic note, you're going for "font soup" here, with lots of decorative fonts competing for the viewer's attention. If it were my call, I'd back way off on some of these fonts -- get rid of Comic Sans entirely and use a more neutral sans font (say Helvetica or Trebuchet MS) for the body text. Maybe use Tempus Sans for the header. But that's a design choice, and this is your design, not mine.