Results 1 to 6 of 6

Thread: Firefox Browser Font Display Problem

  1. #1
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Firefox Browser Font Display Problem

    Hi.

    Since the release of FF 7 a certain font is not displaying correctly anymore on a certain website and the same problem remains in FF 8.

    The font is called "Arial Rounded MT Bold" and is used in the head section.

    The only thing that it makes it work is disabling "Use Hardware Acceleration When Available" but I think that having it enabled is the default setting which most people are using.

    Somebody here got an idea what can be done about it?
    Cheng

  2. #2
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Arrow

    ....... is there nobody who got an idea ?

    The HTML and CSS is all validated (W3C) with green light.

    Why Firefox isn't picking up this font anymore as it used to ?

    Please someone help me out here .......
    Cheng

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Please post a link to the page on your site that contains the problematic script [code] so we can check it out.


    What do you mean by "not displaying correctly"? Are you trying to serve this font using an @font-face rule?

  4. #4
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Arrow

    Quote Originally Posted by traq View Post
    Please post a link to the page on your site that contains the problematic script [code] so we can check it out.


    What do you mean by "not displaying correctly"? Are you trying to serve this font using an @font-face rule?
    ....... thanks for your reply and sorry for my late response.

    Here is a link to the page in question: http://benjapakee.atspace.com/

    Just updated to FF 8.01 and the font problem still remains.

    Please check it out in IE 9 as well because there it is displaying as it should, in "Arial Rounded MT Bold" and in FF 8.01 it shows up in "Times New Roman".

    Any help would be very much appreciated .......
    Cheng

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I don't think that's what's happening. Here's the scenario. In layout.css, which is the last style for h1, it has the font as "Arial Rounded MT Bold". But that's a rare font*, probably not installed on your system, definitely not on mine. Since there's no fallback font, Firefox correctly displays its default font, usually Times New Roman. IE 9 does this too. However, in html.css, which comes before layout css, the h1 selector has "trebuchet ms", serif. If I switch IE 9 to IE 8 mode, that's what displays. Now, trebuchet is a sans-serif font. So, if the browser has it, it will use it, if it doesn't, serif - probably new times roman. Both IE and Firefox have trebuchet though, at least on my system, probably on yours. IE 8 is either mistakenly using it as the fallback or sees its selector as somehow having precedence or you may have it installed for MS products only. H1 elements are bold by default, so it could be hard to tell the difference*. I looked it up, it looks very much like bold trebuchet.

    To make a long story short (there's more to it than just the above), in the benjapakee.atspace.com/css/layout.css file (around line #39) add (red) to the highlighted line as shown:

    Code:
    #header     h1  {
    	margin: 0;
    	padding: 0;
    	letter-spacing: -3px;
    	text-transform: lowercase;
    	color: #FFF;
    	font-family: "Arial Rounded MT Bold", "trebuchet ms", sans-serif;
    	font-size: 3em;
    }
    and I think you will be happy with the results.

    The browser cache may need to be cleared and/or the page refreshed to see changes.


    * See:

    http://ufonts.com/fonts/arial-rounded-mt-bold.html

    http://www.microsoft.com/typography/....aspx?FMID=918

    for further reference on Arial Rounded MT Bold.
    Last edited by jscheuer1; 12-15-2011 at 04:04 PM. Reason: add * links to font Arial Rounded MT Bold
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Cheng (12-16-2011)

  7. #6
    Join Date
    Jan 2006
    Posts
    227
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi John.

    Thanks a lot for your reply.

    Changing what you suggested did made it better but not as I was hoping for.

    Anyway, you got me on the right track and I changed the font-family to this:

    Code:
    #header h1  {
    	margin: 0;
    	padding: 0;
    	letter-spacing: -3px;
    	text-transform: lowercase;
    	color: #FFF;
    	font-size: 3em;
    	font-family: "Arial Rounded MT", Arial, sans-serif;
    	font-weight: bold;
    	text-align: left;
    }
    Everything is fine again.

    This was bugging me for quiet a while.

    Thanks again, I really do appreciate it.
    Cheng

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
  •