SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    New York
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font works in IE but not Firefox?

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •