Firefox Browser Font Display Problem

[Cheng]

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]

....... 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 .......

[traq]

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?

[Cheng]

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 .......

[jscheuer1]

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:


#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/fonts/font.aspx?FMID=918

for further reference on Arial Rounded MT Bold.

[Cheng]

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:


#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.